js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代
js進(jìn)階 11-16 jquery如何查找元素的父親、祖先和子代、后代
一、總結(jié)
一句話總結(jié)：過濾或者查找的方法里面可以帶參數(shù)進(jìn)行進(jìn)一步的選擇。
1、parent()和parents()方法的區(qū)別是什么（父親和祖先）？
parent()找父親，parents()找祖先
父親只有一個(gè)，所以是單數(shù)，祖先就有很多個(gè)了，所以是復(fù)數(shù)
parent() 獲得當(dāng)前匹配元素集合中每個(gè)元素的父元素，由選擇器篩選（可選）。
parents() 獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素，由選擇器篩選（可選）。
34 // $('span').parent('.red').css('border','solid red 2px')
35 // $('.sp').parents('li').css('border','solid red 2px')
2、parentsUntil()如何使用？
方法的參數(shù)里面可以是標(biāo)簽和選擇器，和juqery其它方法里面的東西一樣
parentsUntil() 獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素，直到遇到匹配選擇器的元素為止。
36 $('.sp').parentsUntil('.inner').css('border','solid red 2px')
3、children()方法和contents()方法的異同（子代）？
都是找所有子元素，contents()范圍更廣，包括文本和注釋節(jié)點(diǎn)
39 // $('.inner').children('.red').css('border','solid red 2px')
4、jquery中如何查找一個(gè)元素的后代（后代）？
find()方法
find() 獲得當(dāng)前匹配元素集合中每個(gè)元素的后代，由選擇器進(jìn)行篩選。
40 $('.main').find('span').css('border','solid red 2px')
二、jquery如何查找元素的父親、祖先和子代后代
1、相關(guān)知識(shí)
查找祖先元素
parent() 獲得當(dāng)前匹配元素集合中每個(gè)元素的父元素，由選擇器篩選（可選）。
parents() 獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素，由選擇器篩選（可選）。
parentsUntil() 獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素，直到遇到匹配選擇器的元素為止。
查找后代元素
children() 獲得匹配元素集合中每個(gè)元素的所有子元素。
find() 獲得當(dāng)前匹配元素集合中每個(gè)元素的后代，由選擇器進(jìn)行篩選。
contents() 獲得匹配元素集合中每個(gè)元素的子元素，包括文本和注釋節(jié)點(diǎn)。
不常用，了解即可
2、代碼
1 <!DOCTYPE html>
2 <html lang="en">
3 <style>
4 </style>
5 <head>
6 <meta charset="UTF-8">
7 <title>演示文檔</title>
8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
9 <style>
10 li{
11 margin-top: 25px;width: 150px;
12 }
13 </style>
14 </style>
15 </head>
16 <body>
17 <ol class="main">
18 <li>1</li>
19 <li class="li2">2
20 <ul class="inner">
21 <li><span>1</span></li>
22 <li class="red"><span class="sp">2</span></li>
23 <li><span>3</span></li>
24 </ul>
25 </li>
26 <li>3</li>
27 </ol>
28 <input id="btn1" type="button" value='查找祖先'>
29 <input id="btn2" type="button" value='查找后代'>
30 <script type="text/javascript">
31 $(function(){
32 $('#btn1').click(function(){
33 // $('.sp').parent().css('border','solid red 2px')
34 // $('span').parent('.red').css('border','solid red 2px')
35 // $('.sp').parents('li').css('border','solid red 2px')
36 $('.sp').parentsUntil('.inner').css('border','solid red 2px')
37 })
38 $('#btn2').click(function(){
39 // $('.inner').children('.red').css('border','solid red 2px')
40 $('.main').find('span').css('border','solid red 2px')
41 })
42 })
43 </script>
44 </body>
45 </html>
總結(jié)
以上是生活随笔為你收集整理的js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第三十四天 how can I 坚持
- 下一篇： 想想而已。。。