JSJQuery获取当前元素的上⼀个下⼀个兄弟级元素等元素的⽅
法
$(function(){
//遍历获取的input元素对象数组，绑定click事件
var len = $("input[type='file']").length;
for(var i = 0; i < len; i++){
$("input[type='file']").eq(i).click(function(){
$(this).next().val("");
$(this).next().hide();
$(this).css("width","200px");
})
}
}
jQuery获取：
jQuery.parent(expr)，⽗亲节点，可以传⼊expr进⾏过滤，⽐如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr)，类似于jQuery.parents(expr)，但是是查所有祖先元素，不限于⽗元素
jQuery.children(expr)，返回所有⼦节点，这个⽅法只会返回直接的孩⼦节点，不会返回所有的⼦孙节点
jQuery.prev()，返回上⼀个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
<()，返回下⼀个兄弟节点，不是所有的兄弟节点
jQuery.siblings()，返回兄弟妹节点，不分前后
jQuery.find(expr)，跟jQuery.filter(expr)完全不⼀样：
jQuery.filter()，是从初始的jQuery对象集合中筛选出⼀部分，⽽
jQuery.find()，的返回结果，不会有初始集合中的内容，⽐如$("p").find("span")，是从<p>元素开始<span>，等同于$("p span")
var chils= s.childNodes;  //得到s的全部⼦节点
var par=s.parentNode;  //得到s的⽗节点
var Sibling;  //获得s的下⼀个兄弟节点
var ps=s.previousSibling;  //得到s的上⼀个兄弟节点
var fc=s.firstChild;  //获得s的第⼀个⼦节点
var lc=s.lastChild;  //获得s的最后⼀个⼦节点
JS获取节点⽗级，⼦级元素：JS的⽅法会⽐JQUERY⿇烦很多，主要则是因为FF、⾕歌浏览器会把你的换⾏也当作DOM元素：空的text元素，⽬前IE也是这样
<div id="test">
  <div></div>
  <div></div>
</div>
原⽣的JS获取ID为test的元素下的⼦元素。
var a = ElementById("test").getElementsByTagName("div");
这样是没有问题的，此时 a.length=2；
原生js和js的区别但是如果我们换另⼀种⽅法：
var b =ElementById("test").childNodes;
此时b.length 在IE浏览器中没问题，其依旧等于2，但是在FF和⾕歌浏览器中则会是5，是因为FF把换⾏也当做⼀个元素了（⽬前新版本IE 也是这样）。
所以，在此，我们就要做处理了。
解决⽅案：
  （1）获取⼦节点时，可以通过ElementsByTagName()来回避这个问题。但是 getElementsByTagName对复杂的DOM结构遍历明显不如⽤childNodes，因为childNodes能更好的处理DOM的层次结构。
  （2）在实际运⽤中，Firefox在遍历⼦节点时，不妨在for循环⾥加上：
deName=="#text") continue;//或者使⽤nodeType == 1
这样可以跳过⼀些⽂本节点。
  （3）遍历这些元素，把元素类型为⽂本⽽且是空格的都删除。对于获取兄弟元素也是需要⼀样处理。
function del_ff(elem){
  var elem_child = elem.childNodes;
  for(var i=0; i<elem_child.length;i++){
    if(elem_child[i].nodeName == "#text" && !/\s/.test(deValue)){
      veChild(elem_child[i])；
    }
  }
}
上述函数遍历⼦元素，当元素⾥⾯有节点类型是⽂本并且⽂本类型节点的节点值是空的，就把他删除。
  nodeNames可以得到⼀个节点的节点类型，/\s/是⾮空字符在JS⾥的正则表达式。前⾯加！，则表⽰是空字符
  test() ⽅法⽤于检测⼀个字符串是否匹配某个模式，语法是： st(string)，如果字符
串 string 中含有与 RegExpObject 匹配的⽂本，则返回 true，否则返回 false。
  nodeValue表⽰得到这个节点⾥的值。
  removeChild则是删除元素的⼦元素。
之后，在调⽤⼦，⽗，兄，这些属性之前，调⽤上⾯的函数把空格清理⼀下就可以了
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div id="main">
<span class="prev"></span>
<div id="test">
  <div class="1"></div>
  <div class="2"></div>
</div>
<div class="3"></div>
</div>
<script>
function dom(){
  var s= ElementById("test"),
m= ElementById("main");
  del_ff(s);  //清理空格
del_ff(m);
  var chils= s.childNodes; //得到s的全部⼦节点
  var par=s.parentNode;  //得到s的⽗节点
  var Sibling;  //获得s的下⼀个兄弟节点
  var ps=s.previousSibling; //得到s的上⼀个兄弟节点
  var fc=s.firstChild;  //获得s的第⼀个⼦节点
  var lc=s.lastChild;  //获得s的最后⼀个⼦节点
}
function del_ff(elem){
  var elem_child = elem.childNodes;
  for(var i=0; i<elem_child.length;i++){
    if(elem_child[i].nodeName == "#text" && !/\s/.test(deValue)){
      veChild(elem_child[i]);
    }
  }
}
dom();
}
</script>
</body>
</html

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。