常规选择器:
-
简单选择器:
(1)jQuery选择器里,
$(‘#box’).css(‘color’,’red’);//获取DOM节点对象,并添加行为
还有以下选择器:
选择器 | CSS模式 | jQuery模式 | 描述 |
元素名 | div{} | $(‘div’) | 获取所有div元素的DOM对象 |
ID | #box{} | $(‘#box’) | 获取一个ID为box元素的对象 |
类 | .box{} | $(‘.box’) | 获取所有class为box的所有DOM对象 |
注意:id是唯一标识符,只能出现一次,名字是唯一的
(2)Size()、length获取对象的长度
(3)CSS添加样式,jquery添加行为
添加样式时,css对部分浏览器不兼容,jquery解决了这个问题
CSS: #box>p{color:red;} //使box的子节点,不包括孙子节点的颜色变红,IE6不兼容
Jquery:&(‘#box>p’).css(‘color’,’red’);//解决了IE6不兼容的问题
(4)Jquery获取节点对象,并且有容错功能
$(‘#pox’).css(‘color’,’red’);//例如pox不存在,但是 并不会报错,这种方式在很多情况下是很便捷的,因为很多dom是在运行时生成的,会执行很多不存在的id选择器
DOM节点的判断:
If($(pox).size()>0){…}
If($(pox).get(0)){…}
If(&(pox)[0]){…}
2.进阶选择器
选择器 | CSS模式 | jQuery模式 | 描述 |
群组选择器 | span,em,box{} | $(‘span,em,box’) | 获取多个选择器的DOM对象 |
后代选择器 | ul,li,a{} | $(‘ul li a’) | 获取追溯到的多个DOM对象 |
通配选择器 |
|
|
|
注意:全局范围使用*号,会极大的消耗资源,所以不建议在 全局使用
通配符一般运用在局部的环境内
还有一种选择器 在ID和class中指明元素的前缀,eg
$(‘div .box’)//元素标签的限定作用,只获取class=box 的元素,并且前面有div限定的 eg.<div class=”box”>ppp</div>
$(‘p#box div.side’)
类有一种特殊模式的选择器,同一个节点可以声明多个类,。
eg. <div class=” box pox”>div</div>
<p class=”box”>p</p>
<div class=”pox”>div</div>
<p class=”box”>p</p>
如果要选择第一个,则代码为$(‘.box.pox’).css(‘color’,’red’);//多个class选择器
注意要区分群组选择器:$(‘.box,.pox’).css(‘color’,’red’);//选择所有class名为box或者pox的对象
单个ID不需要字符串解析就可以获取到
3.高级选择器
在IE7以后才开始支持高级选择器
层次选择器
选择器 | CSS模式 | jQuery模式 | 描述 |
后代选择器 | Ul li a{} | $(“ul li a”) | 获取追溯到的多个DOM对象 |
子选择器 | div>p{} | $(‘div>p’) | 只获取之类节点的多个DOM对象 |
next选择器 | div+p{} | $(‘div+p’) | 只获取某节点后一个同级DOM对象 |
nextAll选择器 | div~p{} | $(‘div~p’) | 获取某节点后面的所有同级DOM对象 |
-
jQuery为后代选择器提供了一个等价的find()方法
$('#boxp').css('color','red');与$(‘#box’).find(‘p’).css(‘color’,’red’)等价
-
子选择器只能支持儿子,不包含孙子
jQuery为后代选择器提供了一个等价的children()方法
$('div>p').css('color','red');与$(‘#box’).children(‘p’).css(‘color’,’red’)等价
-
jQuery为后代选择器提供了一个等价的next()方法
$('#box+p').css('color','red');与$(‘#box’).next(‘p’).css(‘color’,’red’)等价
-
jQuery为后代选择器提供了一个等价的nextAll()方法
$('#box·~p').css('color','red');与$(‘#box’).nextAll(‘p’).css(‘color’,’red’)等价
注意:子选择器,只有子节点才会被选择到,孙子节点和重孙子节点都不会被选到
next()必须是层次的后一个节点
nextAll()是层次的后N个节点
find()、children()、next()、nextAll()如果不传递参数,就相当于传递了*
选择上一级别元素
$(‘#box’).prev(‘p’).css(‘color’,’red’);
$(‘#box’).prevAll(‘p’).css(‘color’,’red’);
选择上下同级的DOM元素
$(‘#box’).siblings(‘p’).css(‘color’,’red’);
$(‘#box’).prevUntil(‘p’).css(‘color’,’red’);//同级上非指定元素,遇到则停止,,即遇到非p的元素执行,直到遇到p为止
$(‘#box’).nextUntil(‘p’).css(‘color’,’red’);//同级下非指定元素,遇到则停止
4.属性选择器
具有这个属性的,添加行为样式
<a title="num1">num1</a><a>num2</a><a>num3</a><a>num4</a><atitle="num5">num5</a>
$('a[title]').css('color','red'); 则第一个和第五个变红
具有这个属性,并且等于这个属性的,添加行为样式
$('a[title=title]').css('color','red'); 则第五个变红
开头匹配属性值的,添加行为样式
<a title="num1">num1</a><a>num2</a><a>num3</a><atitle="no4">num4</a>
<a title="num5">num5</a>
$('a[title^=num]').css('color','red');则第一个和第五个变红
结尾匹配属性值的,添加行为样式
<a title="num1">num1</a><a>num2</a><a>num3</a><atitle="no4">num4</a>
<a title="num5">num5</a>
$('a[title$=num]').css('color','red');则第一个和第五个变红
选定具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号
<a title="num-1">num-1</a><a>num2</a><a>num3</a><atitle="num-4">num-4</a>
<a title="num5">num5</a>
$('a[title|=num]').css('color','red');则第一个和第四个变红
选定具有这个属性,且属性值总不相等的
$(‘a[title!=num1]’).css(‘color’,’red’);
不等于num1的都变红色
选定具有这个属性,且属性值是以一个空格分割的列表
<a title="num1 aaa bbb ">num1</a>
$(‘a[title~=num1]’).css(‘color’,’red’);或者$(‘a[title~=aaa]’).css(‘color’,’red’);或者$(‘a[title~=bbb]’).css(‘color’,’red’);都会让其变红
具有指定字符串的
<a title="irqwycbednum1aaabbb">num1</a>
$(‘a[title*=num]’).css(‘color’,’red’);
选定具有多属性且属性值匹配成功的
<a title="num1">num-1</a>
<a>num2</a>
<a>num3</a>
<a title="no4">num</a>
<a bbb=”aaa” title="num5">num</a>
$(‘a[bbb][title=num5 ]’).css(‘color’,’red’);则只有第四个变红