$(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.contents()，回傳下面的所有內容，包括節點和文本，這個方法和children()的區別就在于，包括空白文本，也會被作為一個jQuery物件回傳，children()則只會回傳節點
jQuery.prev()，回傳上一個兄弟節點，不是所有的兄弟節點
jQuery.prevAll()，回傳所有之前的兄弟節點
jQuery.next()，回傳下一個兄弟節點，不是所有的兄弟節點
jQuery.nextAll()，回傳所有之后的兄弟節點
jQuery.siblings()，回傳兄弟姐妹節點，不分前后
jQuery.find(expr)，跟jQuery.filter(expr)完全不一樣：
jQuery.filter()，是從初始的jQuery物件集合中篩選出一部分，而
jQuery.find()，的回傳結果，不會有初始集合中的內容，比如$("p").find("span")，是從元素開始找，等同于$("p span")
JS獲取：
var chils= s.childNodes; //得到s的全部子節點
var par=s.parentNode; //得到s的父節點
var ns=s.nextSibling; //獲得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 = docuemnt.getElementById("test").getElementsByTagName("div");
這樣是沒有問題的，此時 a.length=2；
但是如果我們換另一種方法：
var b =document.getElementById("test").childNodes;
此時b.length 在IE瀏覽器中沒問題，其依舊等于2，但是在FF和谷歌瀏覽器中則會是5，是因為FF把換行也當做一個元素了（目前新版本IE也是這樣），
所以，在此，我們就要做處理了，
解決方案：
（1）獲取子節點時，可以通過node.getElementsByTagName()來回避這個問題，但是 getElementsByTagName對復雜的DOM結構遍歷明顯不如用childNodes，因為childNodes能更好的處理DOM的層次結構，
（2）在實際運用中，Firefox在遍歷子節點時，不妨在for回圈里加上：
if(childNode.nodeName=="#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(elem_child.nodeValue)){
elem.removeChild(elem_child[i])；
}
}
}
上述函式遍歷子元素，當元素里面有節點型別是文本并且文本型別節點的節點值是空的，就把他洗掉，
nodeNames可以得到一個節點的節點型別，/\s/是非空字符在JS里的正則運算式，前面加！,則表示是空字符
test() 方法用于檢測一個字串是否匹配某個模式，語法是： RegExpObject.test(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 ></span>
<div id="test">
<div ></div>
<div ></div>
</div>
<div ></div>
</div>
<script>
function dom(){
var s= document.getElementById("test"),
m= document.getElementById("main");
del_ff(s); //清理空格
del_ff(m);
var chils= s.childNodes; //得到s的全部子節點
var par=s.parentNode; //得到s的父節點
var ns=s.nextSibling; //獲得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(elem_child.nodeValue)){
elem.removeChild(elem_child[i]);
}
}
}
window.onload = function(){
dom();
}
</script>
</body>
</html
文章來自：https://www.cnblogs.com/goloving/p/7183803.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/145142.html
標籤：JavaScript