JQ选择器

本文详细介绍了jQuery中的各种选择器用法,包括基本的选择方式如:first、:last等,以及更复杂的选择器如:not(selector)、:even等。通过这些选择器,开发者能够更加灵活地定位页面中的元素。

过滤器名

语法

说明

返回

 

:first

$('li:first')

选取第一个元素

单个元素

:last

$('li:last')

选取最后一个元素

单个元素

:not(selector)

$('li:not(.red)')

选取 class 不是 red 的 li 元素

集合元素

:even

$('li:even')

选择索引(0 开始)是偶数的所有元素

集合元素

:odd

$('li:odd')

选择索引(0 开始)是奇数的所有元素

集合元素

:eq(index)

$('li:eq(2)')

选择索引(0 开始)等于 index 的元素

单个元素

:gt(index)

$('li:gt(2)')

选择索引(0 开始)大于 index 的元素

集合元素

:lt(index)

$('li.lt(2)')

选择索引(0 开始)小于 index 的元素

集合元素

:header

$(':header')

选择标题元素,h1 ~ h6

集合元素

:animated

$(':animated')

选择正在执行动画的元素

集合元素

:focus

$(':focus')

获取焦点的元素

集合元素

:contains(text)

$(':contains("baidu

.com")')

选取含有" baidu.com"文本的元素

集合元素

:empty

$(':empty')

选取不包含子元素或空文本的元素

集合元素

:parent

$(':parent')

选取含有子元素或文本的元素

 

集合元素

:hidden

$(':hidden')

选取所有不可见元素

集合元素

:visible

$(':visible')

选取所有可见元素

集合元素

:first-child

$('li:first-child')

获取每个父元素的第一个子元素

集合元素

:last-child

$('li:last-child')

获取每个父元素的最后一个子元素

集合元素

:only-child

$('li:only-child')

获取只有一个子元素的元素

集合元素

:nth-child(od

d/even)

 

$('li:nth-child(ev

en)

选获取每个自定义子元素的元素(索引

值从 1 开始计算)

 

集合元素

is(s/o/e/f)

$('li').is('.red')

传递选择器、DOM、jquery 对象或是函数来匹配元素结合

集合元素

hasClass(class)

$('li').eq(2).hasClass('red')

其实就是 is("." + class) 集合元素

集合元素

slice(start, end)

$('li').slice(0,2)

 

选择从 start 到 end 位置的元素,

如果是负数,则从后开始

集合元素

filter(s/o/e/f)

$('li').filter('.red')

 

 

end()

 

$('div').find('p').end()

获取当前元素前一次状态

集合元素

contents()

$('div').contents()

获取某元素下面所有元素节点,包括文本节点,如果是 iframe,则可以查找文本内容

集合元素

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值