常规选择器



常规选择器：

1. 简单选择器：

（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对象

1. jQuery为后代选择器提供了一个等价的find（）方法

         $('#boxp').css('color','red');与$(‘#box’).find(‘p’).css(‘color’,’red’)等价

1. 子选择器只能支持儿子，不包含孙子

jQuery为后代选择器提供了一个等价的children（）方法

$('div>p').css('color','red');与$(‘#box’).children(‘p’).css(‘color’,’red’)等价

1. jQuery为后代选择器提供了一个等价的next（）方法

$('#box+p').css('color','red');与$(‘#box’).next(‘p’).css(‘color’,’red’)等价

1. 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’);则只有第四个变红