jQuery选择器。 5.21 《深夜还在编码的你》

(之所以字体弄那么大是因为省眼，程序员不容易，程序员的眼睛更不容易，请保护我们的眼睛)

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。

熟练地使用选择器，不但能简化代码，而且能够事半功倍。

jQuery选择器可通过CSS选择器、条件过滤两种方式获取元素。

可以通过CSS选择器语法规则获取元素的jQuery选择器包括基本选择器、层次选择器和属性选择器；

可以通过条件过滤选取元素的jQuery选择器包括基本过滤选择器和可见性过滤选择器。

jQuery 的选择器是很强大的，在这里我总结一下常用的元素查找方法

一、基本选择器
1. id选择器（指定id元素）
将id="one"的元素背景色设置为黑色。（id选择器返单个元素）

1 $(document).ready(function () {
2         $(‘#one‘).css(‘background‘, ‘#000‘);
3  });

2. class选择器（遍历css类元素）
将class="cube"的元素背景色设为黑色

1 $(document).ready(function () {
2         $(‘.cube‘).css(‘background‘, ‘#000‘);
3 });

3. element选择器（遍历html元素）
将p元素的文字大小设置为12px

1 $(document).ready(function () {
2         $(‘p‘).css(‘font-size‘, ‘12px‘);
3 });

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

1 $(document).ready(function () {
2         // 遍历form下的所有元素，将字体颜色设置为红色
3         $(‘form *‘).css(‘color‘, ‘#FF0000‘);
4 });

5. 并列选择器

 1 $(document).ready(function () {
 2         // 将p元素和div元素的margin设为0
 3         $(‘p, div‘).css(‘margin‘, ‘0‘);
 4 });
 5
 6
 7 $(document).ready(function(){
 8  $(‘#.nihao‘).hover(
 9  function(){
10   $(this).addClass("")
11  },function(){
12   $(this).removeClass("")
13  });
14 });

基本过滤选择器

1. :first和:last（取第一个元素或最后一个元素）

1 $(document).ready(function () {
2             $(‘span:first‘).css(‘color‘, ‘#FF0000‘);
3             $(‘span:last‘).css(‘color‘, ‘#FF0000‘);
4         });//下面的代码，G1（first元素）和G3（last元素）会变色
5
6 <span>G1</span>
7 <span>G2</span>
8 <span>G3</span>

2. :not（取非元素）

 1 $(document).ready(function () {
 2             $(‘div:not(.wrap)‘).css(‘color‘, ‘#FF0000‘);
 3         });//下面的代码，G1会变色
 4
 5 <div>G1</div>
 6 <div class="wrap">G2</div>
 7 //但是，请注意下面的代码：
 8
 9 <div>
10     G1
11     <div class="wrap">G2</div>
12 </div>

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

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

 1 $(document).ready(function () {
 2             $(‘tr:even‘).css(‘background‘, ‘#EEE‘); // 偶数行颜色
 3             $(‘tr:odd‘).css(‘background‘, ‘#DADADA‘); // 奇数行颜色
 4         });A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADA
 5
 6
 7
 8 <table width="200" cellpadding="0" cellspacing="0">
 9     <tbody>
10         <tr><td>A</td></tr>
11         <tr><td>B</td></tr>
12         <tr><td>C</td></tr>
13         <tr><td>D</td></tr>
14     </tbody>
15 </table>
1 $("#myELement")   //  选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
2 $("div")         //   选择所有的div标签元素，返回div元素数组
3 $(".myClass")    //   选择使用myClass类的css的所有元素
4 $("*")          //    选择文档中的所有的元素，可以运用多种的选择方式进行合选择：例如$("#myELement,div,.myclass")

One(层次选择器):

1 $("form input")          // 选择所有的form元素中的input元素
2 $("#main > *")          //   选择id值为main的所有的子元素
3 $("label + input")     //   选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元  // 素
4 $("#prev ~ div")       //   同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

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

 1 $(document).ready(function () {
 2         // 选取div下的第一代span元素，将字体颜色设为红色
 3         $(‘div > span‘).css(‘color‘, ‘#FF0000‘);
 4     });下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。
 5
 6 <div>
 7         <span>123</span>
 8         <p>
 9             <span>456</span>
10         </p>
11 </div>

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

 1 $(document).ready(function () {
 2     // 选取class为item的下一个div兄弟元素
 3     $(‘.item + div‘).css(‘color‘, ‘#FF0000‘);
 4     // 等价代码
 5     //$(‘.item‘).next(‘div‘).css(‘color‘, ‘#FF0000‘);
 6 });下面的代码，只有123和789会变色
 7 <p class="item"></p>
 8 <div>123</div>
 9 <div>456</div>
10 <span class="item"></span>
11 <div>789</div>

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

 1 $(document).ready(function () {
 2     // 选取class为inside之后的所有div兄弟元素
 3     $(‘.inside ~ div‘).css(‘color‘, ‘#FF0000‘);
 4     // 等价代码
 5     //$(‘.inside‘).nextAll(‘div‘).css(‘color‘, ‘#FF0000‘);
 6 });下面的代码，G2和G4会变色
 7
 8 <div class="inside">G1</div>
 9 <div>G2</div>
10 <span>G3</span>
11 <div>G4</div>

Two(属性选择器):

1 $("div[id]")                  // 选择所有含有id属性的div元素
2 $("input[name=‘newsletter‘]")  //  选择所有的name属性等于‘newsletter‘的input元素
4 $("input[name!=‘newsletter‘]")// 选择所有的name属性不等于‘newsletter‘的input元素
6 $("input[name^=‘news‘]")     //    选择所有的name属性以‘news‘开头的input元素
7 $("input[name$=‘news‘]")     //    选择所有的name属性以‘news‘结尾的input元素
8 $("input[name*=‘man‘]")       //选择所有的name属性包含‘news‘的input元素

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

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

 1 <script type="text/javascript">
 2         $(document).ready(function() {
 3             $(‘a[title]‘).css(‘text-decoration‘, ‘none‘);
 4        });
 5     </script>
 6     <ul>
 7         <li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>
 8         <li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>
 9         <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
10         <li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>
11         <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
12         <li><a href="#" class="item">其他</a></li>
13     </ul>——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）
14
15 分别为class="item"和class!=item的a标签指定文字颜色
16
17
18 .main_shipin a:hover img{filter:Alpha(Opacity=70);opacity:0.7;}

Three(基本过滤选择器):

1 $("tr:first")            //   选择所有tr元素的第一个
2 $("tr:last")            //    选择所有tr元素的最后一个
3 $("input:not(:checked) + span")  //过滤掉：checked的选择器的所有的input元素

过滤掉：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")

Four(可见性过滤选择器):

1 $("div:hidden")      // 选择所有的被hidden的div元素
2 $("div:visible")      //  选择所有的可视化的div元素

: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仍然是不可见的。

 1 <html xmlns="http://www.w3.org/1999/xhtml" >
 2 <head runat="server">
 3     <title></title>
 4     <style type="text/css">
 5         div
 6         {
 7             margin: 10px;
 8             width: 200px;
 9             height: 40px;
10             border: 1px solid #FF0000;
11             display:block;
12         }
13         .hid-1
14         {
15             display: none;
16         }
17         .hid-2
18         {
19             visibility: hidden;
20         }
21     </style>
22     <script type="text/javascript" src="js/jquery.min.js"></script>
23     <script type="text/javascript">
24         $(document).ready(function() {
25             $(‘div:hidden‘).show(500);
26             alert($(‘input:hidden‘).val());
27         });
28     </script>
29 </head>
30 <body>
31     <div class="hid-1">display: none</div>
32     <div class="hid-2">visibility: hidden</div>
33     <input type="hidden" value="hello"/>
34 </body>
35 </html>

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

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

 1 <script type="text/javascript">
 2     $(document).ready(function() {
 3         $(‘div:visible‘).css(‘background‘, ‘#EEADBB‘);
 4     });
 5 </script>
 6 <div class="hid-1">display: none</div>
 7 <div class="hid-2">visibility: hidden</div>
 8 <input type="hidden" value="hello"/>
 9 <div>
10     jQuery选择器
11 </div>

Five(内容过滤选择器):

1 $("div:contains(‘John‘)") //选择所有div中含有John文本的元素
2 $("td:empty")        //   选择所有的为空（也不包括文本节点）的td元素的数组
3 $("div:has(p)")    //    选择所有含有p标签的div元素
4 $("td:parent")       //   选择所有的以td为父节点的元素数组

1. :contains(text)（取包含text文本的元素）

 1 $(document).ready(function () {
 2             // dd元素中包含"jQuery"文本的会变色
 3             $(‘dd:contains("jQuery")‘).css(‘color‘, ‘#FF0000‘);
 4         });下面的代码，第一个dd会变色
 5
 6 <dl>
 7     <dt>技术</dt>
 8     <dd>jQuery, .NET, CLR</dd>
 9     <dt>SEO</dt>
10     <dd>关键字排名</dd>
11     <dt>其他</dt>
12     <dd></dd>
13 </dl>

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

1 $(document).ready(function () {
2             $(‘dd:empty‘).html(‘没有内容‘);
3 });

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

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

 1 $(document).ready(function () {
 2             // 为包含span元素的div添加边框
 3             $(‘div:has(span)‘).css(‘border‘, ‘1px solid #000‘);
 4         });即使span不是div的直系子元素，也会生效
 5
 6 <div>
 7     <h2>
 8         A
 9         <span>B</span>
10     </h2>
11 </div>

4. :parent（取包含子元素或文本的元素）

 1 $(document).ready(function () {
 2             $(‘ol li:parent‘).css(‘border‘, ‘1px solid #000‘);
 3         });下面的代码，A和D所在的li会有边框
 4
 5 <ol>
 6     <li></li>
 7     <li>A</li>
 8     <li></li>
 9     <li>D</li>
10 </ol>

Six(子元素过滤选择器):

1 $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
3 $("div span:first-child")       //   返回所有的div元素的第一个子节点的数组
4 $("div span:last-child")        //   返回所有的div元素的最后一个节点的数组
5 $("div button:only-child")      // 返回所有的div中只有唯一一个子节点的所有子节点的数组

Seven(表单元素选择器):

 1 $(":input")              //    选择所有的表单输入元素，包括input, textarea, select 和 button
 3 $(":text")               //      选择所有的text input元素
 4 $(":password")       //    选择所有的password input元素
 5 $(":radio")                //   选择所有的radio input元素
 6 $(":checkbox")        //    选择所有的checkbox input元素
 7 $(":submit")            //   选择所有的submit input元素
 8 $(":image")            //     选择所有的image input元素
 9 $(":reset")             //      选择所有的reset input元素
10 $(":button")           //     选择所有的button input元素
11 $(":file")                //     选择所有的file input元素
12 $(":hidden")         //      选择所有类型为hidden的input元素或表单的隐藏域

Eight(表单元素过滤选择器):

1 1 $(":enabled")            // 选择所有的可操作的表单元素
2 2 $(":disabled")          //  选择所有的不可操作的表单元素
3 3 $(":checked")        //    选择所有的被checked的表单元素
4 4 $("select option:selected")// 选择所有的select 的子元素中被selected的元素

—————————————————————————————华丽的分割线——————————————————————————————————

//选取一个Name 为”S_2222″的input text框的上一个td的text值
$(”input[@ name =S_2222]“).parent().prev().text() 

//名字以”S_”开始，并且不是以”_R”结尾的
$(”input[@ name ^=‘S_‘]“).not(”[@ name $=‘_R‘]“) 

//一个名为 radio_1294的radio所选的值
$(”input[@ name =radio_1294][@checked]“).val();

$("A B") 查找A元素下面的所有子节点，包括非直接子节点

$("A>B") 查找A元素下面的直接子节点

$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点

$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点

 //1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点
//例：找到表单中所有的 input 元素
//HTML 代码:
 5 <form>
 6 <label>Name:</label>
 7 <input name="name" />
 8 <fieldset>
 9       <label>Newsletter:</label>
10       <input name="newsletter" />
11 </fieldset>
12 </form>
13 <input name="none" />
 //jQuery 代码:
15 $("form input")
 //结果:
18 [ <input name="name" />, <input name="newsletter" /> ]
 1 //2. $("A>B") 查找A元素下面的直接子节点
 2 //例：匹配表单中所有的子级input元素。
 3 //HTML 代码:
 4 <form>
 5 <label>Name:</label>
 6 <input name="name" />
 7 <fieldset>
 8       <label>Newsletter:</label>
 9       <input name="newsletter" />
10 </fieldset>
11 </form>
12 <input name="none" />
13 //jQuery 代码:
14 $("form > input")
15 //结果:
16 [ <input name="name" /> ]

--

 1 //3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
 2 //例子：匹配所有跟在 label 后面的 input 元素
 3 //HTML 代码:
 4 <form>
 5 <label>Name:</label>
 6 <input name="name" />
 7 <fieldset>
 8       <label>Newsletter:</label>
 9       <input name="newsletter" />
10 </fieldset>
11 </form>
12 <input name="none" />
13 //jQuery 代码:
14 $("label + input")
15 //结果:
16 [ <input name="name" />, <input name="newsletter" /> ]

--

 1 //4. $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点
 2 //例子：找到所有与表单同辈的 input 元素
 3 //HTML 代码:
 4 <form>
 5 <label>Name:</label>
 6 <input name="name" />
 7 <fieldset>
 8       <label>Newsletter:</label>
 9       <input name="newsletter" />
10 </fieldset>
11 </form>
12 <input name="none" />
13 //jQuery 代码:
14 $("form ~ input")
15 //结果:
16 [ <input name="none" /> ]

编写选择器时要注意特殊符号和空格。

以上是我所总结   谢谢你的观看！

生活其实和代码是一样的  总有不顺的时候  在那时转换一下你的思维  或许 你可以改变那不顺。

                                                                                          爱自己 爱生活  爱代码  爱音乐 爱文字 爱交友 



©北京你好！




      




            作者：微冷的风




            出处：http://www.cnblogs.com/smbk/
            本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。


				


				
时间： 2024-10-12 13:56:40 

		


		


	

	
	

		


		
jQuery选择器。  5.21  《深夜还在编码的你》的相关文章


								

		

			

                jQuery选择器大全(48个代码片段+21幅图演示)
			

		

		

									

				选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(func			

		

	

				

		

			

                jQuery内核详解与实践读书笔记2:破解jQuery选择器接口1
			

		

		

									

				前两篇已经介绍了如何搭建一个jQuery框架的雏形,从这一篇开始详细了解jQuery选择器的接口.jQuery选择器功能强大但用法很简单,它仅仅提供了一个接口:jQuery(),也可以简写为$(). 1. 简单但很复杂的黑洞 jQuery提供了唯一的接口(jQuery()或$())使选择器与外界进行交流.jQuery框架的基础是查询,即查询文档元素对象,因此可以认为jQuery对象就是一个选择器,并在此基础上构建和运行查询过滤器.jQuery查询结果的数据集合是jQuery对象的一部分.在$()			

		

	

				

		

			

                jquery选择器从认识到使用初级篇
			

		

		

									

				1.   .class 选择器 ---一种通过元素类别属性查找元素 调用格式: $(".class") ----其中参数表示元素的css类别名称(类选择器)<input class="abc" />-------$(".abc") 2.*选择器 (取走所有的元素)调用格式: $("*") 可以与其他元素组合使用$("div *")-------选取包含在div里面的所有元素:例如 <div			

		

	

				

		

			

                JavaScript（15）jQuery 选择器
			

		

		

									

				jQuery 选择器 选择器允许对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器允许通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器允许对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 &			

		

	

				

		

			

                锋利的jQuery学习笔记之jQuery选择器
			

		

		

									

				在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro			

		

	

				

		

			

                JQuery选择器
			

		

		

									

				JQuery选择器 通过一个样例来分辨这些选择器,首先做一个初始的页面: 1.HTML 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>选择器</title> 6 <script type="text/javascript" src="../JQue			

		

	

				

		

			

                我自作聪明，擅自主张的优化了jQuery选择器。
			

		

		

									

				</pre><pre name="code" class="javascript">闲了一会,写篇博客. 最近项目里面,我自作聪明,擅自主张的,自我感觉的优化了一下jQuery选择器.哈哈哈~~~~ ( ﹁ ﹁ ) 我这么想的: jQuery最底层采用getById getByTagName,2.0版本之后结合最近html5的API--getByClassName. 如果没有getByClassName.将进行所搜查找className选择器			

		

	

				

		

			

                jQuery 选择器总结
			

		

		

									

				一.基本选择器 1．#id选择器 通过元素id选择指定元素 1 <div id="notMe"><p>id="notMe"</p></div> 2 <div id="myDiv">id="myDiv"</div> 3 4 jq: 5 $("#myDiv"); 6 result: 7 [ <div id="myDiv&qu			

		

	

				

		

			

                【jQuery基础学习】01 jQuery选择器
			

		

		

									

				关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选择器 以文档元素作为选择符 a{ text-decoration:none; } ID选择器 以文档元素的唯一标识符ID作为选择符 #myNameDiv{ font-size:14px; width:120px; } 类选择器 以文档元素的class作为选择符 div.note{ font-size