文档不收费，希望下载

一、基本选择器

1. id选择器（指定id元素）

将id="one"的元素背景色设置为黑色。（id选择器返单个元素）

$(document).ready(function () {

$('#one').css('background', '#000');

});

2. class选择器（遍历css类元素）

将class="cube"的元素背景色设为黑色

$(document).ready(function () {

$('.cube').css('background', '#000');

});

3. element选择器（遍历html元素）

将p元素的文字大小设置为12px

$(document).ready(function () {

$('p').css('font-size', '12px');

});

4. * 选择器（遍历所有元素）

$(document).ready(function () {

// 遍历form下的所有元素，将字体颜色设置为红色

$('form *').css('color', '#FF0000');

});

5. 并列选择器

$(document).ready(function () {

// 将p元素和div元素的margin设为0

$('p, div').css('margin', '0');

});

二、层次选择器

1. parent > child（直系子元素）

$(document).ready(function () {

// 选取div下的第一代span元素，将字体颜色设为红色

$('div > span').css('color', '#FF0000');

});

下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。

2. prev + next（下一个兄弟元素，等同于next()方法）

$(document).ready(function () {

// 选取class为item的下一个div兄弟元素

$('.item + div').css('color', '#FF0000');

// 等价代码

//$('.item').next('div').css('color', '#FF0000');

});

下面的代码，只有123和789会变色

3. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

$(document).ready(function () {

// 选取class为inside之后的所有div兄弟元素

$('.inside ~ div').css('color', '#FF0000');

// 等价代码

//$('.inside').nextAll('div').css('color', '#FF0000');

});

下面的代码，G2和G4会变色

G3

三、过滤选择器

1. 基本过滤选择器

——1.1 :first和:last（取第一个元素或最后一个元素）

$(document).ready(function () {

$('span:first').css('color', '#FF0000');

$('span:last').css('color', '#FF0000');

});

下面的代码，G1（first元素）和G3（last元素）会变色

G1

G2

G3

——1.2 :not（取非元素）

$(document).ready(function () {

$('div:not(.wrap)').css('color', '#FF0000');

});

下面的代码，G1会变色

但是，请注意下面的代码：

当G1所在div和G2所在div是父子关系时，G1和G2都会变色。

——1.3 :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd 表示奇数）

$(document).ready(function () {

$('tr:even').css('background', '#EEE'); // 偶数行颜色

$('tr:odd').css('background', '#DADADA'); // 奇数行颜色

});

A、C行颜色#EEE（第一行的索引为0），

B、D行颜色#DADADA

——1.4 :eq(x)（取指定索引的元素）

$(document).ready(function () {

$('tr:eq(2)').css('background', '#FF0000'); });

更改第三行的背景色，在上面的代码中C的背景会变色。

——1.5 :gt(x)和:lt(x)（取大于x索引或小于x索引的元素）

$(document).ready(function () {

$('ul li:gt(2)').css('color', '#FF0000');

$('ul li:lt(2)').css('color', '#0000FF');

});

L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色

• L1
• L2
• L3
• L4
• L5

——1.6 :header（取H1~H6标题元素）

$(document).ready(function () {

$(':header').css('background', '#EFEFEF'); });

下面的代码，H1~H6的背景色都会变

H1

H2

H3

H4

H5

H6

2. 内容过滤选择器

——2.1 :contains(text)（取包含text文本的元素）

$(document).ready(function () {

// dd元素中包含"jQuery"文本的会变色

$('dd:contains("jQuery")').css('color', '#FF0000'); });

下面的代码，第一个dd会变色

技术

jQuery, .NET, CLR

SEO

关键字排名

其他

——2.2 :empty（取不包含子元素或文本为空的元素）

$(document).ready(function () {

$('dd:empty').html('没有内容');

});

上面第三个dd会显示"没有内容"文本

——2.3 :has(selector)（取选择器匹配的元素）

$(document).ready(function () {

// 为包含span元素的div添加边框

$('div:has(span)').css('border', '1px solid #000'); });

即使span不是div的直系子元素，也会生效

——2.4 :parent（取包含子元素或文本的元素）

$(document).ready(function () {

$('ol li:parent').css('border', '1px solid #000');

});

下面的代码，A和D所在的li会有边框

2. A
4. D

3. 可见性过滤选择器

——3.1 :hidden（取不可见的元素）

jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。

参照：https://www.wendangku.net/doc/b13843465.html,/api/hidden-selector

下面的代码，先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。

——3.2 :visible（取可见的元素）

下面的代码，最后一个div会有背景色

4. 属性过滤选择器

——4.1 [attribute]（取拥有attribute属性的元素）

下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线

• DOM对象和jQuery对象
• jQuery选择器大全
• jQuery事件大全

• 基于jQuery的插件开发
• Wordpress & jQuery
• 其他

——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value 或不等于value的元素）

分别为class="item"和class!=item的a标签指定文字颜色

——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute 属性值以value开始，以value结束，或包含value值）

在属性选择器中，^$符号和正则表达式的开始结束符号表示的含义是一致的，*模糊匹配，类似于sql中的like '%str%'。

——4.4 [selector1][selector2]（复合型属性过滤器，同时满足多个条件）

将title以"jQuery"开始，并且class="item"的a标签隐藏，那么jQuery事件大全会被隐藏

5. 子元素过滤选择器

——5.1 :first-child和:last-child

:first-child表示第一个子元素，:last-child表示最后一个子元素。

需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child 返回的都是集合元素。举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。

这里有个问题：如果一个元素没有子元素，:first-child和:last-child会返回null吗？请看下面的代码：

也许你觉得这个答案，是不是太简单了？len1 = 2, len2 = 2。但实际确并不是，它们俩都等于3。

把上面的代码稍微修改一下：

结果却是弹出三个alert，只不过最后一个alert里面是空白的。

——5.2 :only-child

当某个元素有且仅有一个子元素时，:only-child才会生效。

这里:only-child也是三个元素，从最后一个很粗的红色边框（实际是两个元素的边框重叠了）也可以看出来。

——5.3 :nth-child

看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child 就表示第n个child元素。要注意的是，这儿的n不像eq(x)、gt(x)或lt(x)是从0开始的，它是从1开始的，英文里好像也没有zeroth这样的序号词吧。

:nth-child有三种用法：

1) :nth-child(x)，获取第x个子元素

2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素

3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。（当x=0,y>=0时，等同于:hth-child(x)；当x=2,y=0时，等同于nth-child(even)；当x=2,y=1时，等同于:nth-child(odd)）

下面的两个例子是针对2)和3)的，1)的例子我就不列举了。

例2：

例3（html代码和例2是一样的）：

6. 表单对象属性过滤选择器

——6.1 :enabled和:disabled（取可用或不可用元素）

:enabled和:diabled的匹配范围包括input, select, textarea。

——6.2 :checked（取选中的单选框或复选框元素）

下面的代码，更改边框或背景色仅在IE下有效果，chrome和firefox不会改变，但是alert 都会弹出来。

——6.3 :selected（取下拉列表被选中的元素）

引入。 简单的jQuery示例

jquery常用的选择器整理

jquery: 基本的选择器： $('#id').css('color','blue');//根据id属性为id，设置css样式颜色设置成蓝色 $('h2').css('background-color','pink'); $('input').css('width','500px'); $('.apple').css('background-color','lightgreen');//class属性值查找 $('*').css('background-color','gray');//通配符 $('h2,#usertel,#userqq').css('color','lightblue');//联合选择器 层次选择器： $('div span');//在div内部获得span节点，不考虑层次,只获得div内第一个span节点，，注意不考虑层次 $('div > span')//在div内部获得子元素span节点 $('div+span')//在div后边获得紧紧挨着的第一个兄弟关系的span节点，获得的是span节点 $('div~span')//在div后边后边获得全部兄弟关系的span节点 并且选择器： $('li').css('color','red'); $('li:first');//:first第一个 :last 最后一个 $('li:eq(3)').css('color','red')//eq(下标索引号码) 获得节点的下标索引值与给定索引值相等 gt(索引号) great than 节点索引值，大于某个范围 lt(索引值) less than 节点索引值，小于某个范围 $('li:gt(5)').css('background-color','pink'); $('li:lt(5)').css('background-color','orange'); :even 匹配到下标索引值为偶数的节点 :odd 匹配到下标索引值为奇数的节点

jQuery选择器种类

jQuery选择器种类 由于经常使用jQuery，但是其中的很多选择器又不太能够熟练记牢使用，所以趁着上周有人分享，我再仔细的把jQuery的选择器过一遍，争取一次拿下，以后做到运用自如。jQuery选择器主要来分可以分为三种：（1）基本选择器（2）层次选择器（3）过滤选择器(4) 表单选择器 1、基本选择器 基本选择器主要就是比较常见和常用的集中，是必须要掌握的。 #ID id选择器返回一个对象$("#div") .class类选择器返回集合$(".content") Element 标签选择器返回集合$("input") * 匹配所有元素返回集合$("*") selector1,selector2,selector3,....合并每个选择器匹配的元素，返回集合$("#div,.class,input") 2、层次选择器（主要是选择层次下面的元素） $("E F") 选择E元素中的所有F后代元素(注意：是子孙元素) 返回集合 $("P>C") 选择P元素下的C子元素（注意：是子元素）返回集合 $("P+N") 选择P元素后的相邻元素（即下一个兄弟元素），和$("P").next("N")方法执行效果相同 $("P~S") 选择P元素之后的所有S兄弟元素，和$("P").nextAll("S")方法执行效果相同，另pre()方法和next()方法相对。preAll()和nextAll()相对。 注意siblings()方法和nextAll()方法的区别：siblings()是所有前后的兄弟元素，nextAll()是所有后面的兄弟元素 第三和第四个选择器常常用后面的写法代替

Jquery选择器分类应用(最全最新)

现在我们开始Jquery 的选择器之旅哈哈。 下面的选择器分类中， 带有“过滤器”的分类表示是“过滤”选择器， 否则就是“选择”功能的选择器。 jQuery 选择器分为如下几类： ［说明］ 1.点击“名称”会跳转到此方法的jQuery 官方说明文档。 2.可以在下节中的jQuery 选择器实验室测试各种选择器 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id 选择 $("divId") 选择ID 为divId 的元素 element 根据元素的名称选择, $("a") 选择所有元素 .class 根据元素的css 类选择 $(".bgRed") 选择所用CSS 类为bgRed 的 元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几 个选择器匹配的内容. $("#divId, a, .bgRed") ［学习建议］： 大家暂时记住基础选择器即可， 可以直接跳到下一节“jQuery 选择器实验室”进行动手练习， 以后再回来慢慢学习全部的选择器， 或者用到的时候再回来查询。 2.层次选择器 Hierarchy

child必须包含在parent中并且父类是 parent元素.选择CSS类为myList元素中的直接子节点