jQuery选择器


张登友,张登友的博客,张登友的网站——

jQuery选择器

css的基本选择器

符号 说明 用法
#id id选择器 #id{color:red;}
.class 类选择器 .class{ }
Element 标签选择器 P{ }
* 通配符选择器 配合其他选择器使用
, 并集选择器 div,p{ }
空格 后代选择器,选择div下面所有后代的span div span{}
> 子代选择器 div span{}
+ 紧邻选择器 div+p

1、jQuery的基本选择器

符号 说明 用法
$(‘#div’) 选择id为div的第一个元素 $(‘#div’).css(‘color’,’red’)
$(‘.div’) 选择所有类名为div的元素 $(‘.div’).css(‘color’,’red’)
$(‘div’) 选择所有标签名为div的元素 $(‘div’).css(‘color’,’red’)
$(‘*’) 选择所有元素,尽量少用活配合其他选择器使用 $(‘*’).css(‘color’,’red’)
$(‘.div,span’) 选择多个指定的元素,这个地方是选择除了.div和span元素 $(‘div,span’).css(‘color’,’red’)

jQuery基本选择器

2、层级选择器

符号 说明 用法
空格 后代选择器 $(‘div span’).css(‘color’,’red’)
> 子代选择器 $(‘div>span’).css(‘color’,’red’)
+ 紧邻选择器 $(‘div+span’).css(‘color’,’red’)
~ 兄弟选择器 $(‘div~span’).css(‘color’,’red’)

jQuery层级选择器

3、基本过滤选择器

符号 说明 用法
:eq(index) index是从0开始的一个数字,选择序号为index的元素。选择第一格匹配的元素 $(‘li:eq(1)’).css(‘color’,’red)
:gt(index) 选择序号大于index的元素 $(‘li:gt(2)’).css(‘color’,’red)
:lt 选择序号小于index的元素 $(‘li:lt(1)’).css(‘color’,’red)
:odd 选择所有序号为奇数的元素 $(‘li:odd’).css(‘color’,’red)
:even 选择所有序号为偶数的元素 $(‘li:even’).css(‘color’,’red)
:first 选择匹配的第一个元素 $(‘li:first’).css(‘color’,’red)
:last 选择匹配的最后一个元素 $(‘li:last’).css(‘color’,’red)

jQuery基本过滤选择器

4、属性选择器

符号 说明 用法
$(‘a[href]’) 选择所有包含href属性的元素 $(‘a[href]’).css(‘color’,’red)
$(‘a[href=”demo”]’) 选择href属性值为demo的所有a标签 $(‘a[href=”demo”]’).css(‘color’,’red)
$(‘a[href!=”baidu”]’) 选择所有href属性不等于百度的元素,包括没有href的元素 $(‘a[href!=”baidu”]’).css(‘color’,’red)
$(‘a[href^=”web”]’) 选择所有以web开头的元素 $(‘a[href^=”web”]’).css(‘color’,’red)
$(‘a[href$=”web”]’) 选择所有以web结尾的元素 $(‘a[href$=”web”]’).css(‘color’,’red)
$(‘a[href*=”web”]’) 选择所有包含i这个字符的元素,可以试中英文 $(‘a[href*=”i”]’).css(‘color’,’red)
$(‘a[href][title=”我”]’) 选择所有符合指定属性规则的元素,都符合才会被选中 $(‘a[href][title=”我”]’).css(‘color’,’red)

5、筛选选择器

符号(名称) 说明 用法
find(selector) 查找指定元素所有后代元素(包含 子子孙孙) $(‘#div’).find(‘li’).css(‘color’,’red’)
选择id为div的所有后代元素li
children() 查找指定元素的直接子元素(亲儿子元素) $(‘#div’).children(‘li’).css(‘color’,’red’)
选择id为div的所有子代元素li
siblings() 查找所有兄弟元素(不包括自己) $(‘#div’).siblings().css(‘color’,’red’)
选择id为div的所有兄弟元素
parent 查找父元素(亲的) $(‘#div’).parent().css(‘color’,’red’)
选择id为div的父元素
eq(index) 查找指定元素的第index个元素, index是索引号,从0开始 $(‘li’).eq(2).css(‘color’,’red’)
选择所有li元素中的索引值为2的值

文章作者: 张登友
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 张登友 !
  目录