Jquery选择器
1）选择器写法：$( )---> $('div') 字符串
根据css样式来进行选取。css叫做添加样式，但是jQuery叫做添加行为。
|
选择器
|
CSS模式
|
jQuery模式
|
描述
|
|
标签名
|
div{}
|
$('div')
|
获取所有div标签的DOM元素
|
|
ID
|
#box{}
|
$('#box')
|
获取一个ID为box的DOM对象
|
|
class(类名)
|
.box{}
|
$('.box')
|
获取所有class名为box的DOM对象
|
一个小的知识点：ID选择器的失明现象。
ID在一个页面中只能出现一次，这是一个唯一标识符。在jQuery中就会存在问题。
选择器选择出的对象，有一些属性和方法（length,.size()）
jQuery的兼容性
css3的子选择器（不兼容IE6）
但是到了jQuery中，jQuery会自行将不兼容IE的问题解决掉。
jQuery的DOM对象和原生JavaScript的DOM对象之间的属性方法是不通用的，但是可以共同存在
相互转换：
$('DOM')[0].style.color=red;
$('DOM').get(0).style.color=red;
jQuery的DOM元素转换原生JavaScript的DOM元素
解析数组 通过get方法
原生JavaScript的DOM元素转换jQuery的DOM元素
使用jq的函数包裹原生DOM对象
进阶选择器：
|
选择器
|
CSS模式
|
jQuery模式
|
|
群组选择器
|
div,span,p{}
|
$('div,span,p')
|
|
后代选择器
|
ul li a{}
|
$('ul li a')
|
|
通配选择器
|
*{}
|
$('*')
|
通配选择器
选择所有；对性能有极大的浪费所以不能在全局范围内使用，最好的方法就是在局部环境下使用；
$('ul li a,ul li em,ul li strong')；
简化成通配选择器：
$('ul li *')
高级选择器：
1）层次选择器
|
选择器
|
css模式
|
jQuery模式
|
描述
|
|
后代选择器
|
ul li a{}
|
$('ul li a')
|
获取追溯到的所有元素
|
|
子选择器
|
div>p{}
|
$('div>p')
|
只获取子类节点
|
|
next选择器
|
div+p{}
|
$('div+p')
|
只获取某节点后一个同级DOM元素
|
|
nextAll选择器
|
div~p{}
|
$('div~p')
|
获取某节点后所有同级DOM元素
|
jQuery为后代选择器提供了一个方法find()这个find方法里面有一个参数，就是想要找到的后代（可以是标签，类名，ID）
$('div p').css('color','red') == $('div').find('p').css('color','red')
jQuery为子选择器提供了一个方法，children()，参数同上；
$('div>p').css('color','red') == $('div').children('p').css('color','red');
jQuery提供了next(）, nextAll( ) 选择器，参数同上：注意next（）选择器，只选择后一个元素。
$('div+p').css('color','red') == $('div').next('p').css('color','red')
$('div~p').css('color','red') == $('div').nextAll('p').css('color','red')
注意：children() , next() , nextAll() 这些方法如果不传递参数的话， 那么就默认传递一个通配符*，通常在使用这些选择器的时候，我们需要精准的选择元素，避免发生各种怪异结果。
属性选择器：
|
CSS模式
|
jQuery模式
|
描述
|
|
input[name]
|
$('input[name]')
|
获取具有这个属性的DOM元素
|
|
input[name=XXX]
|
$('input[name=XXX]')
|
获取具有属性且属性值为XXX的DOM元素
|
|
input[value][name=XXX]
|
$('input[value][name=XXX]')
|
获取有value 属性且name为XXX的DOM元素
|
....
过滤选择器：伪类选择器：
|
过滤器名
|
jQuery语法
|
说明
|
返回
|
|
:first
|
$('li:first')
|
选取第一个元素
|
单个元素
|
|
:last
|
$('li:last')
|
选取最后一个元素
|
单个元素
|
|
：not(选择器)
|
$('li:not(.red)')
|
选取class不是red的元素
|
一组元素
|
|
:even
|
$('li:even')
|
选择偶数的所有元素
|
一组元素
|
|
:odd
|
$('li:odd')
|
选择所有奇数元素
|
一组元素
|
|
：eq
|
$('li:eq（1）')
|
选择对应下表的元素
|
单个元素
|
内容过滤器
|
过滤器名
|
jQuery语法
|
说明
|
返回
|
|
:contains(text)
|
$('li:contains(123456)')
|
选择有123456文本的元素
|
一组元素
|
|
:empty
|
$(li':empty')
|
选取li中不包含子元素或空文本的元素
|
一组元素
|
|
：has（选择器）
|
$('ul:has(.red)')
|
选择子元素含有类red的ul
|
一组元素
|
jQuery为了优化:has选择器性能，提供了一个方法.has()
$('ul:has(.red)')==$('ul').has('.red')
可见性选择器
|
过滤器名
|
jQuery语法
|
说明
|
返回
|
|
:hidden
|
$(li:hidden)
|
选取所有不可见元素
|
集合元素
|
|
:visible
|
$('li:visible')
|
选取所有可见元素
|
集合元素
|
注：是否可见的判定因素为display：block & display :none
其他方法：
jQuery在选择器和过滤器的基础上提供了一些常用的方法，方便我们开发时灵活使用。
|
方法名
|
jQuery语法
|
说明
|
返回
|
|
is()
|
li.is('.red')
|
传递选择器、DOM、jquery对象
|
true||false
|
|
hasClass()
|
$('li').hasClass('red')
|
就是is('.'+class)
|
true||false
|
is()方法
$('li').is('.red');
$('li').hasClass('red')；
.end()终止当前选择器的遍历，回到上个选择条件；