中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jquery選擇器 之 獲取父級元素、同級元素、子元素

發布時間:2020-03-24 10:06:39 來源:網絡 閱讀:3160 作者:wangxunhg 欄目:web開發

一、獲取父級元素

1、 parent([expr]):

獲取指定元素的所有父級元素

<divid="par_div"><aid="href_fir"href="#">href_fir</a>
<aid="href_sec"href="#">href_sec</a>
<aid="href_thr"href="#">href_thr</a></div>
<spanid="par_span">
<aid="href_fiv"href="#">href_fiv</a>
</span>
$(document).ready(function(){
$("a").parent().addClass('a_par');
});

jquery選擇器 之 獲取父級元素、同級元素、子元素

二、獲取同級元素:

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>
$('li.third-item').next().css('background-color', 'red');
</script>

</body>
</html>

這個例子的結果是,只有list item 4背景色變為紅色

2、nextAll([expr]):

獲取指定元素后邊的所有同級元素

Hello

Hello Again
<div><span>And Again</span></div>
var p_nex = $("p").nextAll();
p_nex.addClass('p_next_all');

jquery選擇器 之 獲取父級元素、同級元素、子元素
注意看最后一個”<p&gt”標簽哦,也被加上了’p_next_all’這個類名哦~~


3、andSelf():

獲取指定元素后邊的所有同級元素,之后加上指定的元素

我感覺這個函數是最有意思的一個函數了,什么意思?直譯過來就是”還有我“,”還有自己”,沒錯,還有自己。

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
var p_nex = $("p").nextAll().andSelf();
p_nex.addClass('p_next_all');

注意看第一個“<p>”標簽啊,這句話的意思是選擇p標簽后面的所有同級標簽,以及自己。。。
jquery選擇器 之 獲取父級元素、同級元素、子元素


以下這兩個不舉具體的例子了,實際上就是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'); 的效果是:

jquery選擇器 之 獲取父級元素、同級元素、子元素
使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是:
jquery選擇器 之 獲取父級元素、同級元素、子元素



向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

闵行区| 遵义市| 安化县| 高雄县| 九江县| 南江县| 衡水市| 秭归县| 博爱县| 孟州市| 巫山县| 都江堰市| 南澳县| 宾阳县| 万荣县| 墨江| 泰安市| 聊城市| 千阳县| 孙吴县| 梓潼县| 绥德县| 西峡县| 板桥市| 行唐县| 云霄县| 天门市| 苗栗县| 唐山市| 永年县| 东宁县| 临安市| 永丰县| 洛阳市| 龙游县| 博兴县| 余姚市| 沙田区| 易门县| 荆州市| 贵溪市|