$(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>，等同於$("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 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= 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>