首頁 web前端 js教程 使用jquery選擇器取得父元素、子元素、同級元素的方法實例

使用jquery選擇器取得父元素、子元素、同級元素的方法實例

May 15, 2018 am 11:11 AM
jquery 使用 元素 獲取 選擇器

一、取得父級元素 

1、 parent([expr]): 取得所有指定元素的父級元素 

<p id="par_p"><a id="href_fir" href="#">href_fir</a> 
<a id="href_sec" href="#">href_sec</a> 
<a id="href_thr" href="#">href_thr</a></p> 
<span id="par_span"> 
<a id="href_fiv" href="#">href_fiv</a> 
</span> 
$(
document
).ready(function(){ 
$("a").parent().addClass(&#39;a_par&#39;); 
});
登入後複製

#firebug查看jquery parent效果

二、取得同級元素:
1、next([expr]):
取得指定元素的下一個同級元素(注意是下一個同級元素哦) 

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/
javascript
" src="/jquery/jquery.js"></script> 
</head> 
<body> 
<ul> 
<li>list item 1</li> 
<li>list item 2</li> 
<li class="third-item">list item 3</li> 
<li>list item 4</li> 
<li>list item 5</li> 
</ul> 
<script> 
$(&#39;li.third-item&#39;).next().css(&#39;
background-color
&#39;, &#39;red&#39;); 
</script> 
</body> 
</html>
登入後複製

這個範例的結果是,只有list item 4背景色變為紅色
2、nextAll([expr]):
取得指定元素後邊的所有同級元素 

<p><span>And Again</span></p> 
var p_nex = $("p").nextAll(); 
p_nex.addClass(&#39;p_next_all&#39;);
登入後複製

注意看最後一個」

」標籤哦,也被加上了'p_next_all'這個類別名稱哦~~
3、andSelf():
取得指定元素後邊的所有同級元素,之後加上指定的元素

<p>Hello</p><p>Hello Again</p><p><span>And Again</span></p> 
var p_nex = $("p").nextAll().andSelf(); 
p_nex.addClass(&#39;p_next_all&#39;);
登入後複製

注意看第一個「

」標籤啊,這句話的意思是選擇p標籤後面的所有同級標籤,以及自己。 。 。
以下這兩個不舉具體的例子了,其實就是next()和nextAll()的相反嘍
4、prev():取得指定元素的上一個同級元素(是上一個哦)。
5、prevAll():取得指定元素的前邊所有的同級元素。
三、取得子元素
1、找出子元素方式1:>
例如:var aNods = $("ul > a");查找ul下的所有a標籤
2 、找出子元素方式2:children()
3、找出子元素方式3:find()
這裡再簡單介紹以下children()和find()的異同:
1> children及find方法都用是用來得到element的子elements的,兩者都不會回傳text node,就像大多數的jQuery方法一樣。
2> children方法獲得的只是元素一下級的子元素,即:immediate children。
3> find方法獲得所有下級元素,即:descendants of these elements in the DOM tree
4> children方法的參數selector 是可選的(optionally),用來過濾子元素,
但find方法的參數selector方法是必選的。
5> find方法事實上可以透過使用 jQuery( selector, context )來實現。即$('li.item-ii').find('li')等同於$('li', 'li.item-ii').
例: 

<ul class="level-1"> 
<li class="item-i">I</li> 
<li class="item-ii">II 
<ul class="level-2"> 
<li class="item-a">A</li> 
<li class="item-b">B 
<ul class="level-3"> 
<li class="item-1">1</li> 
<li class="item-2">2</li> 
<li class="item-3">3</li> 
</ul> 
</li> 
<li class="item-c">C</li> 
</ul> 
</li> 
<li class="item-iii">III</li> 
</ul>
登入後複製

使用:$ ('ul.level-2').children().css('border', '1px solid green');
使用$('ul.level-2').find('li').css ('border', '1px solid green')。

以上是使用jquery選擇器取得父元素、子元素、同級元素的方法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

crystaldiskmark是什麼軟體? -crystaldiskmark如何使用? crystaldiskmark是什麼軟體? -crystaldiskmark如何使用? Mar 18, 2024 pm 02:58 PM

CrystalDiskMark是一款適用於硬碟的小型HDD基準測試工具,可快速測量順序和隨機讀取/寫入速度。接下來就讓小編為大家介紹一下CrystalDiskMark,以及crystaldiskmark如何使用吧~一、CrystalDiskMark介紹CrystalDiskMark是一款廣泛使用的磁碟效能測試工具,用於評估機械硬碟和固態硬碟(SSD)的讀取和寫入速度和隨機I/O性能。它是一款免費的Windows應用程序,並提供用戶友好的介面和各種測試模式來評估硬碟效能的不同方面,並被廣泛用於硬體評

foob​​ar2000怎麼下載? -foobar2000怎麼使用 foob​​ar2000怎麼下載? -foobar2000怎麼使用 Mar 18, 2024 am 10:58 AM

foob​​ar2000是一款能隨時收聽音樂資源的軟體,各種音樂無損音質帶給你,增強版本的音樂播放器,讓你得到更全更舒適的音樂體驗,它的設計理念是將電腦端的高級音頻播放器移植到手機上,提供更便捷高效的音樂播放體驗,介面設計簡潔明了易於使用它採用了極簡的設計風格,沒有過多的裝飾和繁瑣的操作能夠快速上手,同時還支持多種皮膚和主題,根據自己的喜好進行個性化設置,打造專屬的音樂播放器支援多種音訊格式的播放,它還支援音訊增益功能根據自己的聽力情況調整音量大小,避免過大的音量對聽力造成損害。接下來就讓小編為大

百度網盤app怎麼用 百度網盤app怎麼用 Mar 27, 2024 pm 06:46 PM

在如今雲端儲存已成為我們日常生活和工作中不可或缺的一部分。百度網盤作為國內領先的雲端儲存服務之一,憑藉其強大的儲存功能、高效的傳輸速度以及便捷的操作體驗,贏得了廣大用戶的青睞。而且無論你是想要備份重要文件、分享資料,還是在線上觀看影片、聽取音樂,百度網盤都能滿足你的需求。但很多用戶可能對百度網盤app的具體使用方法還不了解,那麼這篇教學就將為大家詳細介紹百度網盤app如何使用,還有疑惑的用戶們就快來跟著本文詳細了解一下吧!百度雲網盤怎麼用:一、安裝首先,下載並安裝百度雲軟體時,請選擇自訂安裝選

網易信箱大師怎麼用 網易信箱大師怎麼用 Mar 27, 2024 pm 05:32 PM

網易郵箱,作為中國網友廣泛使用的一種電子郵箱,一直以來以其穩定、高效的服務贏得了用戶的信賴。而網易信箱大師,則是專為手機使用者打造的信箱軟體,它大大簡化了郵件的收發流程,讓我們的郵件處理變得更加便利。那麼網易信箱大師該如何使用,具體又有哪些功能呢,下文中本站小編將為大家帶來詳細的內容介紹,希望能幫助到大家!首先,您可以在手機應用程式商店搜尋並下載網易信箱大師應用程式。在應用寶或百度手機助手中搜尋“網易郵箱大師”,然後按照提示進行安裝即可。下載安裝完成後,我們打開網易郵箱帳號並進行登錄,登入介面如下圖所示

BTCC教學:如何在BTCC交易所綁定使用MetaMask錢包? BTCC教學:如何在BTCC交易所綁定使用MetaMask錢包? Apr 26, 2024 am 09:40 AM

MetaMask(中文也叫小狐狸錢包)是一款免費的、廣受好評的加密錢包軟體。目前,BTCC已支援綁定MetaMask錢包,綁定後可使用MetaMask錢包進行快速登錄,儲值、買幣等,且首次綁定還可獲得20USDT體驗金。在BTCCMetaMask錢包教學中,我們將詳細介紹如何註冊和使用MetaMask,以及如何在BTCC綁定並使用小狐狸錢包。 MetaMask錢包是什麼? MetaMask小狐狸錢包擁有超過3,000萬用戶,是當今最受歡迎的加密貨幣錢包之一。它可免費使用,可作為擴充功能安裝在網絡

谷歌安全碼在哪裡獲取 谷歌安全碼在哪裡獲取 Mar 30, 2024 am 11:11 AM

谷歌驗證器是一種用於保護使用者帳戶安全的工具,其金鑰是用於產生動態驗證碼的重要資訊。如果忘記了谷歌驗證器的金鑰,只能透過安全碼進行驗證,那麼下文站小編就會為大家帶來谷歌安全碼在哪裡取得的詳細內容介紹,希望能幫助到大家,想要了解的用戶們就請跟著下文繼閱讀吧!首先開啟手機設置,進入設定頁面。下拉頁面,找到Google。進入Google頁面,點選Google帳號。進入帳號頁面,點選驗證碼下方的檢視。輸入密碼或使用指紋驗證身分。取得Google安全碼,利用安全碼驗證Google身分。

教你使用 iOS 17.4「失竊裝置保護」新進階功能 教你使用 iOS 17.4「失竊裝置保護」新進階功能 Mar 10, 2024 pm 04:34 PM

Apple在周二推出了iOS17.4更新,為iPhone帶來了一系列新功能和修復。這次更新包含了全新的表情符號,同時歐盟用戶也能夠下載其他應用程式商店。此外,更新還加強了對iPhone安全性的控制,引入了更多的「失竊設備保護」設定選項,為用戶提供更多選擇和保障。 "iOS17.3首次引入了「失竊設備保護」功能,為用戶的敏感資料增加了額外的安全保障。當用戶不在家等熟悉地點時,該功能要求用戶首次輸入生物特徵信息,並在一小時後再次輸入資訊才能存取和更改某些數據,如修改AppleID密碼或關閉失竊設備保護功能

唧唧down是什麼? -唧唧down怎麼用 唧唧down是什麼? -唧唧down怎麼用 Mar 18, 2024 am 11:46 AM

唧唧Down也可以叫做JJDown,這是專門為嗶哩嗶哩打造的一個視頻下載工具,但是很多小伙伴對這個軟體不了解,今天就讓小編為大家解答一下唧唧down是什麼?唧唧down怎麼使用吧。一、唧唧down的由來唧唧down起源於2014年,是個非常老牌的下載視訊軟體,介面採用Win10磁貼風格,簡潔美觀,操作方便。唧娜是唧唧down的看板娘,畫師是あさひクロイ。唧唧down一直致力於為使用者提供最佳的下載體驗,不斷更新和優化軟體,解決各種問題和bug,增加新的功能和特色。唧唧Down的功能唧唧Down是

See all articles