jquery 查找元素

  /************       查找父元素         *************/  
    //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() 紧挨自己的下一个元素