[jquery]高級篇--獲取div子元素

參考:　　http://zhidao.baidu.com/link?url=IfeQQBn1xMLqWvwdkKbQYJ8mC6ciGi_8M1NYkm6iQ-kXBMX2f2ylN-ckzFLiynnE0nz4hBC6e5CrwaOfwLfata

參考:　　http://blog.sina.com.cn/s/blog_7718755501019kg5.html

實現方法：使用遍歷函數children()，關鍵代碼為 $(this).children("li")，表示獲取當前元素下所有標簽為<li>的子元素。

下面實例演示：點擊div標簽后，何用$(this)選擇它下面的<li>子元素，為了顯示效果，將其設置為紅色。

1、新建HTML文件，輸入如下的HTML結構，為了說明問題，在div標簽下除了li元素外，還設置了其他類型的子元素。

<div id="test">
    <span>我是span標簽</span><br>
    <li>我是li標簽</li>
    <a href="#">我是超鏈接a標簽</a>
</div>

2、在上面新建文件的開頭輸入如下jquery代碼，表示在單擊div標簽區域后，執行一個函數，具體動作為獲取當前div下的li標簽元素，然后使用css()函數設置它的字體顏色為紅色。

<script>
$(function(){
    $("#test").click(function() {    // 單擊div元素
        $(this).children('li').css('color','red');    // 使用children('li')獲取div下的li元素，然后設置顏色為red即紅色
    });
}); 
</script>

3、保存文件，使用瀏覽器打開，演示效果如下圖所示，從結果可知，只有div下的li子元素被選中。

 

------------------------------------------------------------------------------------------------------------------

<div class=\"father\"><div class=\"son\"></div><div class=\"otherson\"></div></div>
<div class=\"father\"><div class=\"son\"></div><div class=\"otherson\"></div></div>

$(function(){
　　$("father").mouseover(function(){
　　　　$(this).find('.son').removeClass("disn");
　　});
});