码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-05-21 06:36:08      阅读:276      评论:0      收藏:0      [点我收藏+]

标签:

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

选择器是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/ 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

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

标签:

原文地址:http://www.cnblogs.com/smbk/p/5513884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!