jQuery入門之層次選擇器實(shí)例簡析

更新時(shí)間：2015年12月11日 15:08:58 作者：zhouhb

這篇文章主要介紹了jQuery入門之層次選擇器用法,以簡單實(shí)例形式分析了jQuery層次選擇器中ancestor descendant與parent>child的區(qū)別,需要的朋友可以參考下

本文實(shí)例分析了jQuery入門之層次選擇器的使用方法。分享給大家供大家參考，具體如下：

這里簡單介紹一下jQuery層次選擇器中ancestor descendant與parent>child的區(qū)別。

parent>child：根據(jù)父元素匹配所有的子元素，層次關(guān)系是父子關(guān)系。

ancestor descendant:根據(jù)祖先元素匹配所有的后代元素，層次關(guān)系是祖先和后代。

編寫代碼，進(jì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>

運(yùn)行后發(fā)現(xiàn)：

1.3.1的文字顏色不是紅色，因?yàn)閜arent>child是父子關(guān)系；

如果把選擇器改為：

復(fù)制代碼代碼如下:

$("#first span").css("color", "red");

則運(yùn)行后發(fā)現(xiàn)：

1.3.1的文字顏色也是紅色，因?yàn)閍ncestor descendant層次關(guān)系是祖先和后代。即id為"first"的元素下的所有span標(biāo)記，不管是子輩，還是孫子輩，都會(huì)變成紅色。

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

基于JQuery的多標(biāo)簽實(shí)現(xiàn)代碼
最近在學(xué)習(xí)JQuery，其實(shí)也不叫學(xué)習(xí)，很久以前就學(xué)過，只是有一段時(shí)間沒用，有些生疏了，于是就做幾個(gè)小例子來練習(xí)練習(xí)，為了方便以后查找就將這些小示例記錄下來
2012-09-09
讀jQuery之十四（觸發(fā)事件核心方法）
觸發(fā)事件，或稱模擬用戶動(dòng)作。比如點(diǎn)擊，我們可以用代碼去模擬用戶點(diǎn)擊，達(dá)到的效果與真實(shí)的鼠標(biāo)點(diǎn)擊是一樣的。
2011-08-08
使用jQuery判斷瀏覽器滾動(dòng)條位置的方法
借助jQuery,我們能夠更加輕松地判斷頁面滾動(dòng)條(scroll)是上滾還是下滾,且是否滾動(dòng)到頭部或者底部,這里我們就來看一下使用jQuery判斷瀏覽器滾動(dòng)條位置的方法
2016-05-05
jquery.form.js用法之清空form的方法
這篇文章主要介紹了jquery.form.js清空form的方法,需要的朋友可以參考下
2014-03-03
jQuery實(shí)現(xiàn)帶滾動(dòng)線條導(dǎo)航效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶滾動(dòng)線條導(dǎo)航效果的方法,分析了帶滾動(dòng)條導(dǎo)航效果的實(shí)現(xiàn)原理與相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
idTabs基于JQuery的根據(jù)URL參數(shù)選擇Tab插件
我們的項(xiàng)目用了SunSean的idTabs，但每個(gè)tab里的控件會(huì)觸發(fā)postback，或者轉(zhuǎn)到其他頁面再轉(zhuǎn)回來，這樣當(dāng)前選中的tab必丟。印度同事不肯用AJAX，無奈今天加班給印度人寫個(gè)demo，通過回傳URL參數(shù)來選擇tab
2012-04-04
使用jQuery調(diào)用XML實(shí)現(xiàn)無刷新即時(shí)聊天
這篇文章主要介紹了使用jQuery調(diào)用XML實(shí)現(xiàn)無刷新即時(shí)聊天的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
基于jquery實(shí)現(xiàn)的服務(wù)器驗(yàn)證控件的啟用和禁用代碼
用戶點(diǎn)擊下一步時(shí)，不對(duì)Display=none的新增區(qū)域表單進(jìn)行驗(yàn)證，需要在用戶點(diǎn)擊“取消增加時(shí)”，禁用服務(wù)器驗(yàn)證控件。反之，啟用服務(wù)器驗(yàn)證控件。
2010-04-04
基于$.ajax()方法從服務(wù)器獲取json數(shù)據(jù)的幾種方式總結(jié)
下面小編就為大家分享一篇基于$.ajax()方法從服務(wù)器獲取json數(shù)據(jù)的幾種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
密碼框顯示提示文字jquery示例
密碼框提示文字的功能還是比較實(shí)用的，下面為大家介紹下使用jquery簡單的實(shí)現(xiàn)下，喜歡的朋友可以參考下
2013-08-08