Jquery选择器

时间：2019-09-28 10:29:27 阅读：79 评论：0 收藏：0 [点我收藏+]

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

Jquery选择器

原文：https://www.cnblogs.com/li923/p/11553707.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)