13518219792
1、基本选择器：
创新互联公司专业IDC数据服务器托管提供商，专业提供成都服务器托管，服务器租用，移动服务器托管，移动服务器托管，成都多线服务器托管等服务器托管服务。
#id 、element 、.class 、* 、selector1,selector2,selectorN
2、层次选择器：
ancestor descendant 、parent child 、prev + next 、prev ~ siblings
3、基本过滤器选择器
:first 、:last 、:not 、:even 、:odd 、:eq 、:gt 、:lt 、:header 、
:animated
4、内容过滤器选择器
:contains 、:empty 、:has 、:parent
5、可见性过滤器选择器
:hidden 、:visible
6、属性过滤器选择器
[attribute] 、[attribute=value] 、[attribute!=value] 、[attribute^=value] 、[attribute$=value] 、[attribute*=value] 、[attrSel1][attrSel2][attrSelN]
7、子元素过滤器选择器
:nth-child 、:first-child 、:last-child 、:only-child
8、表单选择器
:input 、:text 、:password 、:radio 、:checkbox 、:submit 、:image 、:reset 、:button
、:file 、:hidden
9、表单过滤器选择器
:enabled 、:disabled 、:checked 、:selected
已经测试#36;('#div1,#div2').attr('class','waring');
是正确的
还有一种就是多个DIV你可以给他们加一些无用的属性比如：
div id="div1" title="haha"/divdiv id="div2" title="haha"/divdiv id="div3" title="haha"/div#36;("div [titile=haha]").attr('class','waring');
在HTML页面引入jQuery文件
!-- 1. 引入jQuery文件 --
script src="jquery-1.11.3.js"/script
在HTML页面定义元素
!-- 定义HTML页面元素 --
input type="text" value="请输入你的用户名" id="username"
使用jQuery的选择器定位元素
// 2. 使用jQuery选择器定位HTML页面元素
var $username = $("#username");
jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法
基本选择器：
$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") 选择所有的div标签元素，返回div元素数组
$(".myClass") 选择使用myClass类的css的所有元素
$("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")
层叠选择器：
$("form input") 选择所有的form元素中的input元素
$("#main *") 选择id值为main的所有的子元素
$("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
3.基本过滤选择器：
$("tr:first") 选择所有tr元素的第一个
$("tr:last") 选择所有tr元素的最后一个
$("input:not(:checked) + span")
过滤掉：checked的选择器的所有的input元素
$("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）
$("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素
$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") 选择td元素中序号大于4的所有td元素
$("td:ll(4)") 选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")
4.内容过滤选择器：
$("div:contains('John')") 选择所有div中含有John文本的元素
$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组
$("div:has(p)") 选择所有含有p标签的div元素
$("td:parent") 选择所有的以td为父节点的元素数组
5. 可视化过滤选择器：
$("div:hidden") 选择所有的被hidden的div元素
$("div:visible") 选择所有的可视化的div元素
6.属性过滤选择器：
$("div[id]") 选择所有含有id属性的div元素
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") 选择所有的name属性包含'news'的input元素
$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
7.子元素过滤选择器：
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") 返回所有的div元素的第一个子节点的数组
$("div span:last-child") 返回所有的div元素的最后一个节点的数组
$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组
8.表单元素选择器：
$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button
$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域
9.表单元素过滤选择器：
$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法快速轻松地对页面进行设置。了解jQuery选择器是打开高效开发jQuery之门的钥匙。一个典型的jQuery选择器句法形式：
$(selector).methodName();
selector是一个字符串表达示，用于识别DOM中的元素，然后使用jQuery提供的方法集合加以设置。
大多数情况下jQuery支持这样的操作：
$(selector).method1().method2().method3();
这个实例表示隐含DOM中id=”goAway”的元素，然后为其添加一个class=”incognito”属性。
$(’#goAway’).hide().addClass(’incognito’);
提示一下：当选择器表达示匹配多个元素时，可以象JavaScritp数组操作一样，方便灵活地利用数组指针进行选取。这是例子：
var element = $(’img’)[0];
匹配表达示的元素中，第一个元素对象将赋给变量element。
jQuery选择器的分类
有三种分类：基本选择器，位置选择器和自定义选择器。可以将基本选择器理解为“发现型选择器”，事实上它用于搜索DOM中的元素。位置选择器和自定义选择器更像是“筛选型选择器”。
基本选择器
这里提供了一份基本选择器的参考实例。这些选择器都支持CSS3语法准标和语议。
$(‘div’) 选取所有div元素。
$(‘fieldset a’) 选择在fieldset元素内出现的所有a元素。
$(‘lip’) 选取在li标记中直接出现的所有p元素。
$(‘div~p’) 选取位为div标记之后出现的所有p元素。
$(‘p:has(b)’) 选取p元素内包含有b的所有元素。
$(‘div.someClass’) 选取div元素中出现class=”someClass”属性的所有元素。
$(‘.someClass’) 选取出现class=”someClass”属性的所有元素。
$(‘#testButton’) 选取id=”testButton”的元素。元素id属性值在当前DOM中是唯一的。因此我很好奇出现了两个id=”testButton”的元素时它会 怎么选。实验证明它只会选取第一个元素。真正的开发过程中，我们绝对不要在一个DOM中出现多个id相同的元素。
$(‘img[alt]’) 选取具有alt属性的所有img元素。
$(‘a[href$=.pdf]’) 选取具有href属性，而且属性的值以.pdf结尾的所有a元素。
$(‘button[id*=test]’) 选取所有的按钮，但按钮的id属性要包含”test”。
提示一下：在同一个$()结构中可以用“,”来连接多个不同的选择器，比如这样：
$(’div,p’)
以下是匹配所有具有title属性的div元素，和所有具有alt属性的img元素：
$(’div[title],img[alt]‘)
位置选择器
这种类型的选择器可以附加到任何基本选择器上，用于进行基于元素位置的筛选。如果缺省基本选择器，则将被视为所有元素。
举一些例子吧。
$(’p:first’) 选取页面中第一个出现的p元素。
$(’img[src$=.png]:first’) 选取页面中第一个出现src属性值以.png结尾的img元素。
$(’button.small:last’) 选取页面中最后一个出现class=”small”的按钮元素。
$(’li:first-child’) 选取页面中所有li列表的第一项元素。
$(’a:only-child’) 选取页面中所有a元素，但这些元素只能位于一个父级元素内。比如lia href=”url”An url/a/li，此时li内的a是匹配的。
$(‘li:nth-child(2)’) 选取父级元素中第二个li元素。li也一家要位于一个父级元素内。比如ul
li1/li
li2/li
/ul
此时li2/li是匹配的。
$(’tr:nth-child(odd)’) 选取表格中所有为奇数的行元素。
$(‘li:nth-child(3n)’) 在父级元素中有很多个li元素，但只选取隔3次出现的li元素。比如
ul
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
li7/li
li8/li
/ul
其中li3/li,li6/li匹配。
$(’li:nth-child(3n+5)’) 带有偏移量的选取。在父级元素中只选取从第5个li元素开始每隔3次出现的li元素。比如
ul
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
li7/li
li8/li
/ul
其中li5/li,li8/li匹配。
$(‘.someClass:eq(1)’) 选取页面中class=”someClass”的第二个元素。jQuery以0为基准，因此(1)表示相当于第2个。
$(‘.someClass:gt(1)’) 选取页面中所有class=”someClass”的元素，除了开头两个。
$(‘.someClass:lt(4)’) 只选取页面中所有class=”someClass”元素中最先的4个元素。
自定义选择器
jQuery提供这类的选择器用于在并不期望有CSS明确规定时，对元素进行方便快捷地选取。自定义选择器有可能会被组合起来，来看一看这些强大的选择器实例。
$(’img:animated’) 选取所有刚刚经历完动画方法调用的img元素。
$(’:button:hidden’) 选取所有被hide()方法隐含的按钮类型元素。
$(’input[name=myRadioGroup]:radio:checked’)选取name=”myRadioGroup”的单选框内被选中的项目。
$(’:text:disabled’) 选取所有被禁用的文本框元素。
$(’#xyz :header’) 选取id=”xyz”元素内的所有h元素。
$(’option:not(:selected)’) 选取没有被选中的所有的option元素。
$(’#myForm button:not(.someClass)’) 选取id=”myForm”的表单内不具有class=”someClass”属性的所有按钮。
$(’select[name=choices] :selected’) 选取name=”choices”的select元素中所有被选中的option项。
$(’p:contains(coffee)’) 选取所有内容包含有coffee的p元素。
无论是单一的或是组合，jQuery选择器能创建强大而简便的一套方案，便于jQuery内置的一些方法地行极富想像力的WEB开发。
因为你找的是属性style="display: block;" 而你输入的却是div[style='display: block']
jQuery的[] 选择器是找属性值完全等于某个值 也就是说 少一个分号 少一个空格 那都无法匹配到的
如果你完全可以保证 style=""里面肯定等于 display: block; 而且 空格什么都匹配那才能成功
这里 就是因为你少了一个分号吧 当然 你可以设置 $("div[style^='display: block']"); ^=就是说 以display: block 开头的
或者 把你那分号加上试试
这样做偶合性太高了 差个空格都不行
最好的办法就是
$("div").each(function(){//通过each来遍历
if($(this).css("display")=='block'){ //通过$(this).css("css名") 来获取当前遍历元素的display值
//这里就是display=block的
}
})
选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。
一、基本选择器
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的一代子元素，颜色保持不变。
div
span123/span
p
span456/span
/p
/div
2. prev + next（下一个兄弟元素，等同于next()方法）
$(document).ready(function () {
// 选取class为item的下一个div兄弟元素
$('.item + div').css('color', '#FF0000');
// 等价代码
//$('.item').next('div').css('color', '#FF0000');
});
下面的代码，只有123和789会变色
p class="item"/p
div123/div
div456/div
span class="item"/span
div789/div
3. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）
$(document).ready(function () {
// 选取class为inside之后的所有div兄弟元素
$('.inside ~ div').css('color', '#FF0000');
// 等价代码
//$('.inside').nextAll('div').css('color', '#FF0000');
});
下面的代码，G2和G4会变色
div class="inside"G1/div
divG2/div
spanG3/span
divG4/div
三、 过滤选择器
1. 基本过滤选择器
——1.1 :first和:last（取第一个元素或最后一个元素）
$(document).ready(function () {
$('span:first').css('color', '#FF0000');
$('span:last').css('color', '#FF0000');
});
下面的代码，G1（first元素）和G3（last元素）会变色
spanG1/span
spanG2/span
spanG3/span
——1.2 :not（取非元素）
$(document).ready(function () {
$('div:not(.wrap)').css('color', '#FF0000');
});
下面的代码，G1会变色
divG1/div
div class="wrap"G2/div
但是，请注意下面的代码：
div
G1
div class="wrap"G2/div
/div
当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
table width="200" cellpadding="0" cellspacing="0"
tbody
trtdA/td/tr
trtdB/td/tr
trtdC/td/tr
trtdD/td/tr
/tbody
/table
——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是默认颜色
ul
liL1/li
liL2/li
liL3/li
liL4/li
liL5/li
/ul
——1.6 :header（取H1~H6标题元素）
$(document).ready(function () {
$(':header').css('background', '#EFEFEF');
});
下面的代码，H1~H6的背景色都会变
h1H1/h1
h2H2/h2
h3H3/h3
h4H4/h4
h5H5/h5
h6H6/h6
2. 内容过滤选择器
——2.1 :contains(text)（取包含text文本的元素）
$(document).ready(function () {
// dd元素中包含"jQuery"文本的会变色
$('dd:contains("jQuery")').css('color', '#FF0000');
});
下面的代码，第一个dd会变色
dl
dt技术/dt
ddjQuery, .NET, CLR/dd
dtSEO/dt
dd关键字排名/dd
dt其他/dt
dd/dd
/dl
——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的直系子元素，也会生效
div
h2
A
spanB/span
/h2
/div
——2.4 :parent（取包含子元素或文本的元素）
$(document).ready(function () {
$('ol li:parent').css('border', '1px solid #000');
});
下面的代码，A和D所在的li会有边框
ol
li/li
liA/li
li/li
liD/li
/ol
3. 可见性过滤选择器
——3.1 :hidden（取不可见的元素）
jQuery至1.3.2之后的:hidden选择器仅匹配display:none或input type="hidden" /的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。
参照：
下面的代码，先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。
html xmlns=""
head runat="server"
title/title
style type="text/css"
div
{
margin: 10px;
width: 200px;
height: 40px;
border: 1px solid #FF0000;
display:block;
}
.hid-1
{
display: none;
}
.hid-2
{
visibility: hidden;
}
/style
script type="text/javascript" src="js/jquery.min.js"/script
script type="text/javascript"
$(document).ready(function() {
$('div:hidden').show(500);
alert($('input:hidden').val());
});
/script
/head
body
div class="hid-1"display: none/div
div class="hid-2"visibility: hidden/div
input type="hidden" value="hello"/
/body
/html
——3.2 :visible（取可见的元素）
下面的代码，最后一个div会有背景色
script type="text/javascript"
$(document).ready(function() {
$('div:visible').css('background', '#EEADBB');
});
/script
div class="hid-1"display: none/div
div class="hid-2"visibility: hidden/div
input type="hidden" value="hello"/
div
jQuery选择器大全
/div
4. 属性过滤选择器
——4.1 [attribute]（取拥有attribute属性的元素）
下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线
script type="text/javascript"
$(document).ready(function() {
$('a[title]').css('text-decoration', 'none');
});
/script
ul
lia href="#" title="DOM对象和jQuery对象" class="item"DOM对象和jQuery对象/a/li
lia href="#" title="jQuery选择器大全" class="item-selected"jQuery选择器大全/a/li
lia href="#" title="jQuery事件大全" class="item"jQuery事件大全/a/li
lia href="#" title="基于jQuery的插件开发" class="item"基于jQuery的插件开发/a/li
lia href="#" title="Wordpress jQuery" class="item"Wordpress jQuery/a/li
lia href="#" class="item"其他/a/li
/ul
——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）
分别为class="item"和class!=item的a标签指定文字颜色
