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()终止当前选择器的遍历，回到上个选择条件；