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为minidiv>
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为otherdiv>
48         <div class="mini" title="test">class为mini,title为testdiv>
49     div>
50 
51     <div class="one">
52         <div class="mini">class为minidiv>
53         <div class="mini">class为minidiv>
54         <div class="mini">class为minidiv>
55         <div class="mini">div>
56     div>
57 
58     <div class="one">
59         <div class="mini">class为minidiv>
60         <div class="mini">class为minidiv>
61         <div class="mini">class为minidiv>
62         <div class="mini" title="tesst">class为mini,title为tesstdiv>
63     div>
64 
65     <div style="display: none" class="none">
66         style的diaplay为none的div
67     div>
68 
69     <div class="hide">class为hide的divdiv>
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>
View Code

 

2、初始效果

JQuery选择器_第1张图片

 

一、基本选择器

JQuery选择器_第2张图片

1、ID选择器

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

首先在处引入JQuery库文件:

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

然后编辑JQuery代码:

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

效果图:

JQuery选择器_第3张图片

!!!所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){

});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。!!!

2、类选择器

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

效果:

JQuery选择器_第4张图片

3、标签选择器

将代码的关键语句改为:

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

效果图:

JQuery选择器_第5张图片

4、通配选择符

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

效果图:

JQuery选择器_第6张图片

5、群组选择器

  eg:改变所有元素和id为two的元素的背景颜色

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

效果图:

JQuery选择器_第7张图片

二、层次选择器

JQuery选择器_第8张图片

1、$("ancestor descendant")

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

JQuery选择器_第9张图片

2、$("parent>child")

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

JQuery选择器_第10张图片

3、$("prev+next")

改变class为one的下一个

同辈元素的背景色:(!!!下一个同辈元素,相当于next()方法)

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

也可以写为:

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

JQuery选择器_第11张图片

4、$("prev~siblings")

改变id为two的元素后面的所有

同辈元素的背景色:(!!!之后的所有同辈元素,相当于nextAll()方法)

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

相当于:

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

JQuery选择器_第12张图片

三、过滤选择器

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

1、基本过滤选择器

JQuery选择器_第13张图片 

JQuery选择器_第14张图片

 eg:

(1)改变第一个和最后一个

元素的背景色

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>

JQuery选择器_第15张图片

(2)改变class不为one的

元素的背景色

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

JQuery选择器_第16张图片

(3)根据索引改变背景色(!!索引值从0开始!!)

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

JQuery选择器_第17张图片

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

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

JQuery选择器_第18张图片

(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、内容过滤选择器

JQuery选择器_第19张图片

 eg:

(1)改变含有class为mini元素的

元素的背景色

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

JQuery选择器_第20张图片

(2)改变含有子元素(包括文本元素)的

元素的背景色

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

JQuery选择器_第21张图片

3、可见性过滤选择器

JQuery选择器_第22张图片

 在可见性选择器中,需要注意的是选择器:hiddden,它不仅包括样式属性display为“none”的元素,也包括文本隐藏域()和visibility:hidden之类的元素。

 

4、属性过滤选择器

JQuery选择器_第23张图片

 eg:

(1)改变含有属性title的

元素的背景色

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

JQuery选择器_第24张图片

(2)改变属性title值等于“test”的

元素的背景色

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

 

JQuery选择器_第25张图片

(3))改变属性title值不等于“test”的

元素的背景色

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

JQuery选择器_第26张图片

(4)改变属性title值以te开始的

元素的背景色

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

JQuery选择器_第27张图片

(5)改变属性title值以est结束的

元素的背景色

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

JQuery选择器_第28张图片

(6))改变属性title值含有“es”的

元素的背景色

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

JQuery选择器_第29张图片

(7))改变含有属性id,并且属性title值含有“es”的

元素的背景色

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

JQuery选择器_第30张图片

5、子元素过滤选择器

JQuery选择器_第31张图片

!!!这里的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、表单对象属性过滤选择器

JQuery选择器_第32张图片

重新设计一个表单页面如下:

JQuery选择器_第33张图片

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>
View Code

eg:

(1)改变表单内可用元素的值

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

JQuery选择器_第34张图片

(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(""+n+" 个被选中!");  //在第一个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("你选中的是:"+str+"");
 9             }).trigger('change');
10             // trigger('change') 在这里的意思是:
11             // select加载后,马上执行onchange.
12             // 也可以用.change()代替.
13         })
14  script>

JQuery选择器_第35张图片

四、表单选择器

JQuery选择器_第36张图片

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

$(":input").length;

五、案例研究:网站品牌列表效果

一、目标效果如图所示:

JQuery选择器_第37张图片                         JQuery选择器_第38张图片

   如图所示,点击“显示全部品牌”,就可以显示其他未显示的品牌,并且会将推荐的品牌高亮显示。

二、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');    //  获取“显示全部品牌”按钮
 6             $toggleBtn.click(function(){     //  点击“显示全部品牌”按钮
 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     
  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');    //  获取“显示全部品牌”按钮
 59             $toggleBtn.click(function(){     //  点击“显示全部品牌”按钮
 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>
View Code

 

转载于:https://www.cnblogs.com/jasmine-95/p/5367234.html

你可能感兴趣的:(JQuery选择器)