jQuery入門之層次選擇器實例簡析
更新時間：2015年12月11日 15:08:58 作者：zhouhb
這篇文章主要介紹了jQuery入門之層次選擇器用法,以簡單實例形式分析了jQuery層次選擇器中ancestor descendant與parent>child的區(qū)別,需要的朋友可以參考下
本文實例分析了jQuery入門之層次選擇器的使用方法。分享給大家供大家參考，具體如下：
這里簡單介紹一下jQuery層次選擇器中ancestor descendant與parent>child的區(qū)別。
parent>child：根據(jù)父元素匹配所有的子元素，層次關(guān)系是父子關(guān)系。
ancestor descendant:根據(jù)祖先元素匹配所有的后代元素，層次關(guān)系是祖先和后代。
編寫代碼，進行測試，以更加清楚的區(qū)分兩者的區(qū)別：
<div id="first">1
<span>1.1 </span>
<span>1.2 </span>
<div>1.3
<span>1.3.1 </span>
</div>
</div>
<script type="text/javascript" src="jquery-1.4.1.min.js">
</script>
<script type="text/javascript">
$(function () {
$("#first>span").css("color", "red");
});
</script>
運行后發(fā)現(xiàn)：
1.3.1的文字顏色不是紅色，因為parent>child是父子關(guān)系；
如果把選擇器改為：
復(fù)制代碼 代碼如下:
$("#first span").css("color", "red");
則運行后發(fā)現(xiàn)：
1.3.1的文字顏色也是紅色，因為ancestor descendant層次關(guān)系是祖先和后代。即id為"first"的元素下的所有span標記，不管是子輩，還是孫子輩，都會變成紅色。
希望本文所述對大家jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
最近在學(xué)習(xí)JQuery，其實也不叫學(xué)習(xí)，很久以前就學(xué)過，只是有一段時間沒用，有些生疏了，于是就做幾個小例子來練習(xí)練習(xí)，為了方便以后查找就將這些小示例記錄下來2012-09-09
觸發(fā)事件，或稱模擬用戶動作。比如點擊，我們可以用代碼去模擬用戶點擊，達到的效果與真實的鼠標點擊是一樣的。2011-08-08
借助jQuery,我們能夠更加輕松地判斷頁面滾動條(scroll)是上滾還是下滾,且是否滾動到頭部或者底部,這里我們就來看一下使用jQuery判斷瀏覽器滾動條位置的方法2016-05-05
這篇文章主要介紹了jquery.form.js清空form的方法,需要的朋友可以參考下2014-03-03
jQuery實現(xiàn)帶滾動線條導(dǎo)航效果的方法
這篇文章主要介紹了jQuery實現(xiàn)帶滾動線條導(dǎo)航效果的方法,分析了帶滾動條導(dǎo)航效果的實現(xiàn)原理與相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
idTabs基于JQuery的根據(jù)URL參數(shù)選擇Tab插件
我們的項目用了SunSean的idTabs，但每個tab里的控件會觸發(fā)postback，或者轉(zhuǎn)到其他頁面再轉(zhuǎn)回來，這樣當(dāng)前選中的tab必丟。印度同事不肯用AJAX，無奈今天加班給印度人寫個demo，通過回傳URL參數(shù)來選擇tab2012-04-04
使用jQuery調(diào)用XML實現(xiàn)無刷新即時聊天
這篇文章主要介紹了使用jQuery調(diào)用XML實現(xiàn)無刷新即時聊天的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
基于jquery實現(xiàn)的服務(wù)器驗證控件的啟用和禁用代碼
用戶點擊下一步時，不對Display=none的新增區(qū)域表單進行驗證，需要在用戶點擊“取消增加時”，禁用服務(wù)器驗證控件。反之，啟用服務(wù)器驗證控件。2010-04-04
基于$.ajax()方法從服務(wù)器獲取json數(shù)據(jù)的幾種方式總結(jié)
下面小編就為大家分享一篇基于$.ajax()方法從服務(wù)器獲取json數(shù)據(jù)的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
密碼框提示文字的功能還是比較實用的，下面為大家介紹下使用jquery簡單的實現(xiàn)下，喜歡的朋友可以參考下2013-08-08