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="../JQuery库文件/jquery-1.12.1.min.js"></script>
 7     <style type="text/css">
 8         div,span,p{
 9             width: 140px;
10             height: 140px;
11             margin: 5px;
12             background: #aaa;
13             border: #000 1px solid;
14             float: left;
15             font-size: 17px;
16             font-family: Verdana;
17         }
18         div.mini {
19             width: 55px;
20             height: 55px;
21             background-color: #aaa;
22             font-size: 12px;
23         }
24         div.hide{
25             display: none;
26         }
27     </style>
28     <script type="text/javascript">
29         //给id为mover的元素加入动画.
30         $("document").ready(function(){
31             function  animateIt() {
32                 $("#mover").slideToggle("slow", animateIt);
33             }
34             animateIt();
35         })
36     </script>
37     
38 </head>
39 <body>
40     <div class="one" id="one">
41         id为one,class为one的div
42         <div class="mini">class为mini</div>
43     </div>
44 
45     <div class="one" id="two" title="test">
46         id为two,class为one,title为text的div
47         <div class="mini" title="other">class为mini,title为other</div>
48         <div class="mini" title="test">class为mini,title为test</div>
49     </div>
50 
51     <div class="one">
52         <div class="mini">class为mini</div>
53         <div class="mini">class为mini</div>
54         <div class="mini">class为mini</div>
55         <div class="mini"></div>
56     </div>
57 
58     <div class="one">
59         <div class="mini">class为mini</div>
60         <div class="mini">class为mini</div>
61         <div class="mini">class为mini</div>
62         <div class="mini" title="tesst">class为mini,title为tesst</div>
63     </div>
64 
65     <div style="display: none" class="none">
66         style的diaplay为none的div
67     </div>
68 
69     <div class="hide">class为hide的div</div>
70 
71     <div>
72        包括input的type为“hidden”的div
73        <input type="hidden" size="8">
74     </div>
75 
76     <span id="mover">正在运行动画的span元素</span>
77 </body>
78 </html>
复制代码

 

2、初始效果

 

一、基本选择器


1、ID选择器

　　eg：改变id为one的元素的背景颜色

首先在<head>处引入JQuery库文件：

<script type="text/javascript" src="../JQuery库文件/jquery-1.12.1.min.js"></script>

然后编辑JQuery代码：

1 <!--编写JQuery代码-->
2     <script type="text/javascript">
3         $("document").ready(function(){
4             $("#one").css("background-color","#bbffaa");    //改变id为one的元素的背景颜色
5         })
6     </script>

效果图：

！

！

！

全部 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){


);

}

这是为了防止文档在全然载入（就绪）之前执行 jQuery 代码。假设在文档没有全然载入之前就执行函数，操作可能失败。！

！

！


2、类选择器

1 <!--编写JQuery代码-->
2     <script type="text/javascript">
3         $("document").ready(function(){
4             $(".mini").css("background-color","#bbffaa");    //改变class为mini的全部元素的背景颜色
5         })
6     </script>

效果：


3、标签选择器

将代码的关键语句改为：

 $("div").css("background-color","#bbffaa");    //改变元素名是div的全部元素的背景颜色

效果图：


4、通配选择符

 $("*").css("background-color","#bbffaa");    //改变全部元素的背景颜色

效果图：


5、群组选择器

　　eg：改变全部<span>元素和id为two的元素的背景颜色

 $("span,#two").css("background-color","#bbffaa");    //改变全部<span>元素和id为two的元素的背景颜色

效果图：

二、层次选择器


1、$("ancestor descendant")

改变<body>内全部<div>的背景颜色:
1 <!--编写JQuery代码-->
2     <script type="text/javascript">
3         $("document").ready(function(){
4             $("body div").css("background-color","#bbffaa");    //改变<body>内全部<div>的背景颜色
5         })
6     </script>


2、$("parent>child")

改变<body>内子<div>元素的背景颜色:
 $("body > div").css("background-color","#bbffaa");    //改变<body>内子<div>元素的背景颜色


3、$("prev+next")

改变class为one的下一个<div>同辈元素的背景色：（！！。下一个同辈元素，相当于next()方法）

 $(".one + div").css("background-color","#bbffaa");    //改变class为one的下一个<div>同辈元素的背景色

也能够写为：

 $(".one").next("div").css("background-color","#bbffaa");


4、$("prev~siblings")

改变id为two的元素后面的全部<div>同辈元素的背景色：（！

！！

之后的全部同辈元素。相当于nextAll()方法）

$("#two ~ div").css("background-color","#bbffaa");

相当于：

 $("#two").nextAll("div").css("background-color","#bbffaa");

三、过滤选择器

　　过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素。过滤规则与CSS中的伪类选择器语法同样，即选择器都以一个冒号(:)开头。


1、基本过滤选择器

 

 eg:

(1)改变第一个和最后一个<div>元素的背景色

1 <script type="text/javascript">
2         $("document").ready(function(){
3             $("div:first").css("background-color","#bbffaa");
4             $("div:last").css("background-color","#bbffaa");
5         })
6 </script>

(2)改变class不为one的<div>元素的背景色

 $("div:not(.one)").css("background-color","#bbffaa");

(3)依据索引改变背景色（！

！索引值从0開始！

！）

 $("document").ready(function(){
     $("div:eq(3)").css("background-color","#bbffaa");   //改变索引值等于3的<div>元素的背景色
     $("div:gt(3)").css("background-color","red");   //改变索引值小于3的<div>元素的背景色
     $("div:lt(3)").css("background-color","blue");   //改变索引值大于3的<div>元素的背景色
 })

(4)改变正在运行动画的元素的背景色

$(":animated").css("background-color","#bbffaa");   //改变正在运行动画的元素的背景色

(5)改变当前获取焦点的元素的背景色

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>选择器</title>
 6     <script type="text/javascript" src="../JQuery库文件/jquery-1.12.1.min.js"></script>
 7     <script type="text/javascript">
 8         $("document").ready(function(){
 9             $("#button1").click(function(){
10                 $(":focus").css("background-color","#bbffaa");   //改变当前获取焦点的元素的背景色
11             })
12         })
13     </script>
14 
15 </head>
16 <body>
17     <input type="button" value="改变当前获取焦点的元素的背景色">
18     <input type="button" value="改变当前获取焦点的元素的背景色" id="button1">
19 </body>
20 </html>
复制代码

效果：


2、内容过滤选择器

 eg:

(1)改变含有class为mini元素的<div>元素的背景色

1 <script type="text/javascript">
2         $("document").ready(function(){
3             $("div:has('.mini')").css("background-color","#bbffaa");   //改变含有class为mini元素的<div>元素的背景色
4         })
5 </script>

(2)改变含有子元素（包含文本元素）的<div>元素的背景色

            $("div:parent").css("background-color","#bbffaa");   //改变含有子元素（包含文本元素）的<div>元素的背景色


3、可见性过滤选择器

 在可见性选择器中，须要注意的是选择器:hiddden,它不仅包含样式属性display为“none”的元素，也包含文本隐藏域（<input type="hidden"/>）和visibility:hidden之类的元素。

 


4、属性过滤选择器

 eg:

(1)改变含有属性title的<div>元素的背景色

  $("div[title]").css("background-color","#bbffaa");   //改变含有属性title的<div>元素的背景色

(2)改变属性title值等于“test”的<div>元素的背景色

            $("div[title=test]").css("background-color","#bbffaa");   //改变属性title值等于“test”的<div>元素的背景色

 

(3))改变属性title值不等于“test”的<div>元素的背景色

 $("div[title!=test]").css("background-color","#bbffaa");   //改变属性title值不等于“test”的<div>元素的背景色

(4)改变属性title值以te開始的<div>元素的背景色

 $("div[title^=te]").css("background-color","#bbffaa");   //改变属性title值以te開始的<div>元素的背景色

(5)改变属性title值以est结束的<div>元素的背景色

 $("div[title$=est]").css("background-color","#bbffaa");   //改变属性title值以est结束的<div>元素的背景色

(6))改变属性title值含有“es”的<div>元素的背景色

  $("div[title*=es]").css("background-color","#bbffaa");   //改变属性title值含有“es”的<div>元素的背景色

(7))改变含有属性id，而且属性title值含有“es”的<div>元素的背景色

 $("div[id][title*=es]").css("background-color","#bbffaa");   //改变含有属性id，而且属性title值含有“es”的<div>元素的背景色


5、子元素过滤选择器

。！

！

这里的index从1開始。！

！

：nth-child()选择器是非经常常使用的子元素过滤选择器，具体功能例如以下：

　　(1)：nth-child(even)：选取每一个父元素下的索引值是偶数的元素

　　(2)：nth-child(odd)：选取每一个父元素下的索引值是奇数的元素

　　(3)：nth-child(2)：选取每一个父元素下的索引值是2的元素

　　(4)：nth-child(3n)：选取每一个父元素下的索引值是3的倍数的元素（n从1開始）

　　(5)：nth-child(3n+1)：选取每一个父元素下的索引值是(3n+1)的元素（n从1開始）


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

又一次设计一个表单页面例如以下：

HTML代码：

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>选择器</title>
 6     <script type="text/javascript" src="../JQuery库文件/jquery-1.12.1.min.js"></script>
 7     <script type="text/javascript">
 8         $("document").ready(function(){
 9 
10         })
11     </script>
12 
13 </head>
14 <body>
15     <h3> 表单对象属性过滤选择器.</h3>
16     <form>
17         <!-- 測试的元素 -->
18         可用元素：<input name="add" value="可用文本框"/>  <br/>
19         不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
20         可用元素： <input name="che" value="可用文本框" /><br/>
21         不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
22         <br/>
23 
24         多选框：<br/>
25         <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
26         <input type="checkbox" name="newsletter" value="test2" />test2
27         <input type="checkbox" name="newsletter" value="test3" />test3
28         <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
29         <input type="checkbox" name="newsletter" value="test5" />test5
30         <div></div>
31 
32         <br/><br/>
33         下拉列表1：<br/>
34         <select name="test" multiple="multiple" style="height:100px">
35             <option>浙江</option>
36             <option selected="selected">湖南</option>
37             <option>北京</option>
38             <option selected="selected">天津</option>
39             <option>广州</option>
40             <option>湖北</option>
41         </select>
42 
43         <br/><br/>
44         下拉列表2：<br/>
45         <select name="test2" >
46             <option>浙江</option>
47             <option>湖南</option>
48             <option selected="selected">北京</option>
49             <option>天津</option>
50             <option>广州</option>
51             <option>湖北</option>
52         </select>
53         <div></div>
54     </form>
55 </body>
56 </html>
复制代码

eg：

（1）改变表单内可用<input>元素的值

1 <script type="text/javascript">
2         $("document").ready(function(){
3             $("input:enabled").val("这里变化了！！。");
4         })
5  </script>

（2）获取多选框选中的个数

复制代码
 1 <script type="text/javascript">
 2         $("document").ready(function(){
 3             $(":checkbox").click(countChecked);    //这里的相关知识点在第四节会讲到
 4             function countChecked() {
 5                 var n = $("input:checked").length;   //获取多选框选中的个数
 6                 $("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");  //在第一个div处输入结果
 7             }
 8             countChecked();//进入页面就调用.
 9         })
10  </script>
复制代码

效果：

（3）获取下拉框选中的内容

复制代码
 1 <script type="text/javascript">
 2         $("document").ready(function(){
 3             $("select").change(function () {
 4                 var str = "";
 5                 $("select :selected").each(function () {
 6                     str += $(this).text() + ",";
 7                 });
 8                 $("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
 9             }).trigger('change');
10             // trigger('change') 在这里的意思是：
11             // select载入后，立即运行onchange.
12             // 也能够用.change()取代.
13         })
14  </script>
复制代码

四、表单选择器

eg：获得表单内表单元素的个数：

$(":input").length;

五、案例研究：站点品牌列表效果

一、目标效果如图所看到的：

                         

   如图所看到的，点击“显示所有品牌”。就能够显示其它未显示的品牌，而且会将推荐的品牌高亮显示。

二、JQuery代码

复制代码
 1 <script type="text/javascript">
 2         $("document").ready(function(){  //  等待DOM载入完成.
 3             var $category = $('ul li:gt(5):not(:last)');  //  获得索引值大于5的品牌集合对象(除最后一条)
 4             $category.hide();    //  隐藏上面获取到的jQuery对象。
 5             var $toggleBtn = $('div.showMore > a');    //  获取“显示所有品牌”button
 6             $toggleBtn.click(function(){     //  点击“显示所有品牌”button
 7                 if($category.is(":visible")){   //假设获得索引值大于5的品牌集合对象(除最后一条)是显示的
 8                     $category.hide();       //  隐藏$category
 9                     $(this).find('span')
10                             .text("显示所有品牌");     //改变文本
11                     $('ul li').removeClass("promoted");        // 去掉高亮样式
12                 }
13                 else{    //假设获得索引值大于5的品牌集合对象(除最后一条)是隐藏的
14                     $category.show();         //  显示$category
15                     $(this).find('span')
16                             .text("精简显示品牌");      //改变文本
17                     $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")  //filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
18                             .addClass("promoted");    //加入高亮样式
19                 }
20                 return false;    //超链接不跳转
21             })
22         })
23 </script>
复制代码

三、完整的HTML代码

复制代码
  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>站点品牌列表效果</title>
  6     <!--引入JQuery库文件-->
  7     <script type="text/javascript" src="../JQuery库文件/jquery-1.12.1.min.js"></script>
  8     <style type="text/css">
  9         #box{
 10             border: solid 1px #BEBEBE;
 11             width: 400px;
 12             /*height: 200px;*/
 13             margin: 0px auto;
 14         }
 15         /*列表样式*/
 16         ul {
 17             list-style: none;
 18             font-size: 18px;
 19             line-height: 40px;
 20         }
 21         /*使每一行有三个li元素*/
 22         li{
 23             float:left;   /*此时li标签紧凑排列*/
 24             width: 120px;
 25         }
 26 
 27         /*超链接样式*/
 28         a {
 29             text-decoration: none;
 30         }
 31         a:hover,a:active {
 32             color: red;
 33             text-decoration: underline;
 34         }
 35 
 36         /*高亮显示的元素*/
 37         .promoted a { color:#F50;}
 38 
 39         /*以下部分样式*/
 40         .showMore{
 41             margin: 0px auto;
 42             width: 150px;
 43             height: 30px;
 44             border: solid 1px #BEBEBE;
 45             text-align: center;
 46             font-size: 13px;
 47             clear:left;
 48         }
 49         .showMore a span{
 50             display: block;   /*设置为块状元素。使其方便调边距*/
 51             margin-top: 6px;
 52         }
 53     </style>
 54     <script type="text/javascript">
 55         $("document").ready(function(){  //  等待DOM载入完成.
 56             var $category = $('ul li:gt(5):not(:last)');  //  获得索引值大于5的品牌集合对象(除最后一条)
 57             $category.hide();    //  隐藏上面获取到的jQuery对象。
 58             var $toggleBtn = $('div.showMore > a');    //  获取“显示所有品牌”button
 59             $toggleBtn.click(function(){     //  点击“显示所有品牌”button
 60                 if($category.is(":visible")){   //假设获得索引值大于5的品牌集合对象(除最后一条)是显示的
 61                     $category.hide();       //  隐藏$category
 62                     $(this).find('span')
 63                             .text("显示所有品牌");     //改变文本
 64                     $('ul li').removeClass("promoted");        // 去掉高亮样式
 65                 }
 66                 else{    //假设获得索引值大于5的品牌集合对象(除最后一条)是隐藏的
 67                     $category.show();         //  显示$category
 68                     $(this).find('span')
 69                             .text("精简显示品牌");      //改变文本
 70                     $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")  //filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
 71                             .addClass("promoted");    //加入高亮样式
 72                 }
 73                 return false;    //超链接不跳转
 74             })
 75         })
 76     </script>
 77 </head>
 78 <body>
 79     <div id="box">
 80         <ul>
 81             <li ><a href="#">佳能</a></li>
 82             <li ><a href="#">索尼</a></li>
 83             <li ><a href="#">三星</a></li>
 84             <li ><a href="#">尼康</a></li>
 85             <li ><a href="#">松下</a></li>
 86             <li ><a href="#">卡西欧</a></li>
 87             <li ><a href="#">富士</a></li>
 88             <li ><a href="#">柯达</a></li>
 89             <li ><a href="#">宾得</a></li>
 90             <li ><a href="#">理光</a></li>
 91             <li ><a href="#">奥林巴斯</a></li>
 92             <li ><a href="#">明基</a></li>
 93             <li ><a href="#">爱国者</a></li>
 94             <li ><a href="#">其他品牌相机</a></li>
 95         </ul>
 96         <div class="showMore">
 97             <a href="more.html"><span>显示所有品牌</span></a>
 98         </div>
 99     </div>
100 </body>
101 </html>
复制代码

 

posted on 2017-08-20 20:52  ljbguanli  阅读(202)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 ljbguanli
Powered by .NET 9.0 on Kubernetes