jQuery各种选择器总结-白红宇

jQuery各种选择器总结

阅读量：5094 次

发布时间：2019-06-13

本文共 3065 字，大约阅读时间需要 10 分钟。

首先介绍几个简单的：

id选择器

$('#p1').html('<font color='red'>nihao</font>);

类选择器:表示页面上所有应用了a样式的标签

$('.a').css('color','green');

层次选择器：div下的所有p标签

$('div p')

组合选择器：选择id为btn以及p1和span标签

$('#btn,#p1,span').css('color','red')

标签+类选择器：表示p标签下应用a样式的标签

$('p.a')

层次选择器：div下的所有p标签

$('div p')

只选取div下的子元素p和后代元素p

$('div p')

只选取div下的直接子元素p

$('div>p')

表示div后的所有p兄弟

$('div~p') 等价$('div').nextAll('p')

表示div后的所有兄弟

$('div~*')

表示div后只找紧挨着的的第一个元素，并且这个元素必须是p

$('div+p') 等价$('div').next('p')

表示选择div前面的所有兄弟p元素

$('div').preAll('p')

表示div前只找紧挨着的的第一个元素，并且这个元素必须是p

$('div').pre('p')

当前元素的所有兄弟元素

siblings();

写过滤选择器的时候我们要注意jquery中的另一个特性：链式编程

例如：既可以设置p元素的边框，又可以添加其事件

s('p').text('我们都是p！').css('border','1px').click(function(){ })

但是，类似于prevAll()、nextAll()、prev()、next()、sibings()等这些函数都会破坏链，所以这种情况下不能直接进行链式编程。

例如：

$(this).prevAll().css('backgroundColor', 'yellow').nextAll().css('backgroundColor', 'blue'); //不能链式编程，链已经被破坏了。end()回到最近的一个"破坏性"操作之前。

基本选择过滤器

$('p:eq(2)');选择出来的索引是2的标签

$('p:even')偶数个

$('p:odd')奇数个

first 选取第一个元素。$("div:first")选取第一个<div>

:last 选取最后一个元素。$("div:last")选取最后一个<div>

:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>

:even、:odd，选取索引是偶数、奇数的元素：$("input:even")选取索引是奇数的<input>

:eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>

$(":header")选取所有的h1……h6元素

$("div:animated")选取正在执行动画的<div>元素。

属性选择器

$('input[type=text]').css('clolr',black);

$('input[name^=a]')属性name以a开头的

$('input[name$=a]')属性name以a结尾的

$('input[name*=a]')属性name以包含a的

$('input[name^=a][value] [id]')属性name以a开头的并且包含value和id属性的

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

表单对象属性选择器

红色竖线是空格

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

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

$(“input:checked”)选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.

$("select .:selected")选取所有选中的选项元素（下拉列表）

$("input[name=names]:checked");获取所有name为names的选中的元素

表单选择器

$(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input>

$(":text")选取所有单行文本框，等价于$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);

$(“:password”)选取所有密码框。

同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

代替了$(‘input[type=***]’);

input[type=radio]→:radio

input[type=checkbox] → :checkbox

input[type=text] → :text

可见性选择器

:hidden

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

1.表单元素type=“hidden”

2.设置css的display:none

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

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

visibility: hidden 与opacity为0不算，因为还占位所以不认为是hidden.(与之前版本jQuery不太一样，1.3.2之前)

:visible

选取所有可见元素

注意：$(‘.cls :hidden’);与$(‘.cls:hidden’);是不一样的。

内容过滤器：

:contains(text),过滤出包含给定文本的元素。(innerText中包含。)

:empty,过滤出所有不包含子元素或者文本的空元素。

:has(selector),过滤出元素中包含（即子元素中）selector选择器能选择到的元素。

:parent,过滤出可以当做父元素的元素（即该元素有子元素或者元素中包含文本。