澳门贵宾会娱乐官网回顾下jQuery常用的选择器-Web前端之家

层次选择器:

jQuery常用的选择器有很多,过段时间不使用,有时候可能会忘记,所以需要经常去复习下咯,一起来回顾下吧。

$;//选取div下的所有的p元素

层次选择器:

$.css(‘border’,’1px solid red’);//只选取div下的直接子元素

$;//选取div下的所有的p元素

//相邻的元素

$.css(‘border’,’1px solid red’);//只选取div下的直接子元素

$.css(‘border’,’1px solid red’);与$等价;//表示div后面的

$.css(‘border’,’1px solid red’);与$.nextAll等价;//表示div后面的

所有p兄弟元素

$.css(‘border’,’1px solid red’);//表示div后面的所有兄弟元素

$.css(‘border’,’1px solid red’);//表示div后面的所有兄弟元素

$.css(‘border’,’1px solid red’);与$.next等价//这种写法表示div后

$.css(‘border’,’1px solid red’);与$等价//这种写法表示div后

只找紧挨着的第一个兄弟元素,并且该元素是p。

只找紧挨着的第一个兄弟元素,并且该元素是p。

获得兄弟元素的方法:

获得兄弟元素的方法:

next();
//当前元素之后的紧邻着的第一个兄弟元素;//当前元素之后的所有兄弟元素

next();
//当前元素之后的紧邻着的第一个兄弟元素;//当前元素之后的所有兄弟元素

prev();//当前元素之前的紧邻着的兄弟元素;//当前元素之前的所有兄弟元素

prev();//当前元素之前的紧邻着的兄弟元素;//当前元素之前的所有兄弟元素

siblings();//当前元素的所有兄弟元素

siblings();//当前元素的所有兄弟元素

基本过滤选择器:

基本过滤选择器:

$与$是等价的。获取所有p元素中的第一个P元素

$.first()是等价的。获取所有p元素中的第一个P元素

$在所有的p元素中找到索引为2的元素

$.last在所有的p元素中找到索引为2的元素

$选取所有奇数的p标签

$选取所有奇数的p标签

$选取所有偶数的p标签

$选取所有偶数的p标签

$’).css();选取所有的不应用.tst这种样式的p元素not后面写一个选择器名称

$;选取所有的不应用.tst这种样式的p元素not后面写一个选择器名称

$选取所有索引值大于1的p元素

$选取所有索引值大于1的p元素

$选取所有索引值小于3的p元素。

$选取所有索引值小于3的p元素。

$选取页面上所有的h1-h6的元素。

$选取页面上所有的h1-h6的元素。

属性过滤选择器:

属性过滤选择器:

$选取有id属性的

$选取有id属性的

$(“div[title=test]”)选取title属性为“test”的

$选取title属性为“test”的

,jQuery中没有对getElementsByName

,jQuery中没有对getElementsByName

进行封装,用$(“input[name=abc]”)

澳门贵宾会娱乐官网,进行封装,用$

$(“div[title!=test]”)选取title属性不为“test”的

$选取title属性不为“test”的

还可以选择开头、包含等,条件还

还可以选择开头、包含等,条件还

$(“#form1 :enabled”)选取id为form1的表单内所有启用的元素

可以复合。

$(“#form1 :disabled”)选取id为form1的表单内所有禁用的元素

表单对象属性选择器:

$选取所有选中的元素,这个中间不能加空格.

$选取id为form1的表单内所有启用的元素

$(“select :selected”)选取所有选中的选项元素

$选取id为form1的表单内所有禁用的元素

表单滤选择器:

$选取所有选中的元素,这个中间不能加空格.

$(‘#form1:enabled’);//这个表示能够启用的且id为form1的标签

$选取所有选中的选项元素

$(‘#form1
:enabled’);//这个表示能够启用的且id为form1下的所有启用的元素。

表单滤选择器:

$(‘input:checked’)

$;//这个表示能够启用的且id为form1的标签

$(‘input:disabled’)

$;//这个表示能够启用的且id为form1下的所有启用的元素。

$ (‘select:selected’)

$

$选取所有、

$

、和

$

元素。和$不一样,

$选取所有、

$只获得

、和

$选取所有单行文本框,等价于

元素。和$不一样,

$(“input[type=text]”),$(‘input[type=text]’),$;

$只获得

内容过滤选择器:

$选取所有单行文本框,等价于

:contains:过滤出包含给定文本的元素。

$,$,$;

:empty包含没有子元素的或者是内容为空的元素。

$选取所有密码框。

:parent 获得有子元素的元素。

内容过滤选择器:

可见性过滤器:

:contains:过滤出包含给定文本的元素。

:hidden

:empty包含没有子元素的或者是内容为空的元素。

选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)

:has

1.表单元素type=“hidden”

:parent 获得有子元素的元素。

2.设置css的display:none

可见性过滤器:

3.高度和宽度明确设置为0的元素。

:hidden

4.父元素时隐藏的,所以子元素也是隐藏的

选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)

visibility: hidden 与opacity为0不算,因为还占位所以不认为是hidden.

1.表单元素type=“hidden”

:visible

2.设置css的display:none

子元素过滤选择器:

3.高度和宽度明确设置为0的元素。

first-child
与first的区别:first只能选取第一个,而first-child,则能选取每个子元素的第一个元素。

4.父元素时隐藏的,所以子元素也是隐藏的

only-child:匹配当前父元素中只有一个子元素的元素。

visibility: hidden
与opacity为0不算,因为还占位所以不认为是hidden.(与之前版本

nth-child:对比eq值匹配一个,nth-child()为每个父元素都要匹配一个子元素。

jQuery不太一样,1.3.2之前)

nth-child,index从1开始

:visible

nth-child,选取3的倍数的元素

选取所有可见元素

nth-child满足3的倍数+1的元素

子元素过滤选择器:

注意:

first-child
与first的区别:first只能选取第一个,而first-child,则能选取每个子元素的第一个元素。

1.通过jQuery选择器选择的对象本身就是一个jQuery对象,选择器具有隐式迭代
的作用,例如:

last-child:

$.click{alert;

only-child:匹配当前父元素中只有一个子元素的元素。

是为所有的p都注释了click事件。

nth-child:对比eq值匹配一个,nth-child()为每个父元素都要匹配一个子元素。

2.无论选择器选择了几个元素返回的一个元素都是一个集合对象,如果没有找到相应的元素,则这个集合对象的length值为0,如果选择到了元素,这个length的元素就是选择的元素的索引值。所以也根据这个属性来判断元素是否存在。例如:

nth-child,index从1开始

Iif.length>0)//判断元素是否存在

nth-child

3.在事件中this还是表示当前触发事件的元素的对象,但是这里的this是dom对象而不是jQuery对象。如果需要执行jQuery中的方法或属性时,应该把this转换为jQuery对象

nth-child

nth-child,选取3的倍数的元素

nth-child满足3的倍数+1的元素

注意:

1.通过jQuery选择器选择的对象本身就是一个jQuery对象,选择器具有隐式迭代
的作用,例如:

${

alert;

});

是为所有的p都注释了click事件。

2.无论选择器选择了几个元素返回的一个元素都是一个集合对象,如果没有找到相应的元素,则这个集合对象的length值为0,如果选择到了元素,这个length的元素就是选择的元素的索引值。所以也根据这个属性来判断元素是否存在。例如:

Iif//判断元素是否存在

3.在事件中this还是表示当前触发事件的元素的对象,但是这里的this是dom对象而不是jQuery对象。如果需要执行jQuery中的方法或属性时,应该把this转换为jQuery对象

转换方式为:$;

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注