码迷,mamicode.com
首页 > Web开发 > 详细

jQuery-筛选器

时间:2020-06-08 00:25:58      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:item   筛选器   lan   第一个   一个   代码   选择器   span   rev   

jQuery筛选器

筛选器一般用于对选择器选中的标签进行再次筛选。

parent 父标签

HTML代码:

<div>
    <p>Hello</p>
    <p>Hello</p>
</div>

jQuery代码:

$("p").parent()

结果:

[<div><p>Hello</p><p>Hello</p></div> ]

children 所有子标签

HTML代码:

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

jQuery代码:

$("div").children()

结果:

[ <span>Hello Again</span> ]

next 下一个兄弟标签

HTML代码:

<p>Hello</p>
<p>Hello Again</p>
<div>
    <span>And Again</span>
</div>

jQuery代码:

$("p").next()

结果:

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

prev 上一个兄弟标签

HTML代码:

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

jQuery代码:

$("p").prev()

结果:

[ <div><span>Hello Again</span></div> ]

siblings 所有兄弟标签

HTML代码:

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

jQuery代码:

$("div").siblings()

结果:

[ <p>Hello</p>, <p>And Again</p> ]

find 子孙中查找标签

HTML代码:

<p>
    <span>Hello</span>, how are you?
</p>

jQuery代码:

$("p").find("span")

结果:

[ <span>Hello</span> ]

first 匹配的第一个标签

HTML代码:

<ul>    
    <li>list item 1</li>    
    <li>list item 2</li>    
    <li>list item 3</li>    
    <li>list item 4</li>    
    <li>list item 5</li>
</ul>

jQuery代码:

$(‘li‘).first()

结果:

[ <li>list item 1</li> ]

last 匹配的最后一个标签

HTML代码:

<ul>    
    <li>list item 1</li>    
    <li>list item 2</li>    
    <li>list item 3</li>    
    <li>list item 4</li>    
    <li>list item 5</li>
</ul>

jQuery代码:

$(‘li‘).last()

结果:

[ <li>list item 5</li> ]

jQuery-筛选器

标签:item   筛选器   lan   第一个   一个   代码   选择器   span   rev   

原文地址:https://www.cnblogs.com/Hedger-Lee/p/13062991.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!