/************ 查找父元素 *************/ //closest()方法 $("#mytd1").bind("click",function(){ alert($(this).closest("table").attr("id")); //table1 alert($(this).closest("tr").attr("id"));//mytr1 console.info($(this).closest());//本身 console.info($(this).closest("td"));//mytd1 返回元素本身。 console.info($("td").closest("tbody"));//返回三個tbody /** *官方解釋：從元素本身開始，逐級向上級元素匹配，並返回最先匹配的元素。 *closest會首先檢查當前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上查找父元素，一層一層往上，直到找到匹配選擇器的元素。如果什么都沒找到則返回一個空的jQuery對象。 */ }); //parent()方法 $("#mytd2").bind("click",function(){ //alert($(this).html()); //$(this).html()是21 (this).attr("id")是mytd2 alert($(this).parent().parent().parent().attr("id")); //.parent()是tr 第二個.parent是tbody。即使沒有tbody標簽，找到的也是tbody 第三個.parent()是table console.info($("tr").parent());//返回三個dbody:dbody1,dbody2-1,dbody2-2.同理,如果改成td,則返回好多tr console.info($("table").parent());//返回兩個div:div1,div2。 console.info($("table").parent("#divn"));//div1 //document.write("第一個parent的id:" + $(this).parent().attr("id") + "。 第二個parent的id是:"+$(this).parent().parent().attr("id") + "。 第三個parent的id是:"+$(this).parent().parent().parent().attr("id")); /**parent官方解釋：取得一個包含着所有匹配元素的唯一父元素的元素集合。 * */ }); //parent("選擇器") parents("選擇器") $("#mytd3").bind("click",function(){ $("p").parent("#div1").css("background", "yellow");//這里換成了p標簽。不知道為什么用this找不到元素 //原因：$(this).parent() 選擇的為td3,在td3里面繼續找div1自然找不到 //alert($(this).parent("#div").attr("id"));//undefined alert($(this).parents("div")[0].attributes.id.value);//div1 注意一個parent parents alert($(this).parents("div")[1].attributes.id.value);//div0 console.info($(this).parents("div"));//div1 div0 topdiv 向上找所有的div.可以一層一層向上找，返回所有符合條件的 /** parents官方解釋： * 取得一個包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通過一個可選的表達式進行篩選。 * 語文不好，看着真心弄不懂~~~ 淚奔，見下面解釋. */ }); /************ 查找子元素 *************/ //查找table2的td元素 find() $("#sectd1").bind("click",function(){ alert($("#table2").find("td").length);//和$("#table2 td")效果一樣 /* $("#table2").find("td").each(function(index,element){ alert($(element).text()); }); */ //alert($("tr").find("td").length); //7 console.info($("#table2 td")); console.info($("tr").find("td"));//返回所有匹配的td /**官方解釋： * 搜索所有與指定表達式匹配的元素。 */ }); //children() $("#sectd2").bind("click",function(){ alert($("#table2").children().children().children("td[id='sectd2']").html()); //children() 是 tbody children()是 tr children("td[id='sectd2']")是td console.info($("div[name='mydiv']").children());//p table1 p table2.返回name為mydiv的所有 子元素 /**官方解釋： *取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。 */ }); // js的 children[] $("#sectd3").bind("click",function(){ var table = document.getElementById("table2"); alert(table.children[0].children[2].children[0].innerHTML); //children[0] 是 tbody children[2]是 第三行的tr children[0]是td console.info(table.children);//兩個tbody2-1 tbody2-2 console.info(table.children[0].children);//三個tr });
總結：
closest()
一層一層向上找，返回最先匹配上的元素。
$(this).closest("td")
$("td").closest("tbody")
因為td是多個元素，所有最先匹配上的tbody也是多個
parent()返回唯一父元素（即：向上只找一層）。如果選擇器選擇多個對象，則返回父元素數組。需要在數組里面繼續選擇，則使用parent("#id")，parent(".className")
什么是唯一父元素：td的父親是tr,tr的父親是tbody,tbody的父元素是table...
eg:
$("tr").parent() 一個或者多個tbody
$("table").parent("#div1");//div1。
parents()
一層一層向上找，返回所有匹配上的元素。
find()
$("#table2").find("td")和$("#table2 td")效果一樣，這一句話應該足夠了。
children()和parent()反之。
每一個元素的所有子元素的元素集合。
$("div[name='mydiv']").children()
p table1 p table2
children屬性和jquery的children()類似，返回緊挨的下一級並列的子元素
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
對象都是this的話，可能更容易理解：
closest(“”) 一層一層向上，找到一個匹配就返回
parent() 緊挨自己的上一個元素
parents() 一層一層向上，找到所有的
find()
$("#table2").find("td") eg:$("#table2 td")
children() 緊挨自己的下一個元素