003-JQuery选择器

 

基本选择器

  •  #id ：根据给定的ID匹配一个元素
  •  .class ：根据给定的类匹配元素
  •  element ：根据给定的元素名匹配所有元素
  • 组合选择selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回，
  • * ：匹配所有元素

示例：

 1 <!DOCTYPE html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>Selecter</title>
 5 
 6   <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>
 7 
 8   <style media="screen">
 9     div{
10       float: left;
11       width: 200px;
12       height: 100px;
13       margin: 10px;
14       border: solid 1px #ccc;
15     }
16   </style>
17 </head>
18 <body>
19   <div id="box">box</div>
20   <div class="box1">box1</div>
21   <div ><p class="myp">textp</p></div>
22 
23   <script type="text/javascript">
24     // 根据元素名匹配
25     $("div").css("background","#ccc");
26     // 根据ID匹配
27     $("#box").css("background","red");
28     // 根据类名匹配
29     $(".box1").css("background","green");
30     // 组合匹配
31     $("#box,.box1,p.myp").css("font-size","16px");
32   </script>
33 </body>
View Code

 结果：

层次选择器

  • ancestor descendant ：在给定的祖先元素下匹配所有的后代元素
  • parent > child ：在给定的父元素下匹配所有的子元素
  • prev + next ：匹配所有紧接在 prev 元素后的 next 元素
  • prev ~ siblings ：匹配 prev 元素之后的所有 siblings 元素

示例：

 1 <!DOCTYPE html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>Selecter</title>
 5 
 6   <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>
 7 
 8 </head>
 9 <body>
10   <div id="box">
11     <p>line1</p>
12     <p>line2</p>
13     <p>line3</p>
14     <p>line4</p>
15     <span>
16       <p>line5</p>
17     </span>
18   </div>
19   <p>line6</p>
20   <p>line7</p>
21 
22   <script type="text/javascript">
23   // 在给定的祖先元素div下匹配所有的后代元素
24   $("div p").css("color","red");
25   // 在给定的父元素div下匹配所有的子元素
26   $("div>p").css("font-weight","800");
27   // 匹配所有紧接在 div 元素后的 p 元素
28   $("div+p").css("background","blue");
29   // 匹配 div 元素之后的所有 p 元素
30   $("div~p").css("color","green");
31   </script>
32 </body>
View Code

 结果：

基本过滤选择器

  •  :first ：获取第一个元素
  •  :last ：获取最后一个元素
  •  :not(selector) ：去除所有与给定选择器匹配的元素
  •  :even ：匹配所有索引值为偶数的元素，从 0 开始计数
  •  :odd ：匹配所有索引值为奇数的元素，从 0 开始计数
  •  :eq(index) ：匹配一个给定索引值的元素
  •  :gt(index) ：匹配所有大于给定索引值的元素
  •  :lt(index) ：匹配所有小于给定索引值的元素
  •  :header ：匹配如 h1, h2, h3之类的标题元素
  •  :animated ：匹配所有正在执行动画效果的元素
  •  :focus ：匹配当前获取焦点的元素

示例：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Selecter</title>

  <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>

</head>
<body>
  <h1>header</h1>
  <div class="box">
    <p>line1</p>
    <p>line2</p>
    <p class="myp">line3</p>
    <p class="myp">line4</p>
    <p>line5</p>
    <p>line6</p>
    <p>line7</p>
  </div>

  <script type="text/javascript">
    // 第一个p元素
    $("p:first").css("color","red");
    // 最后一个p元素
    $("p:last").css("color","blue");
    // 除了类名为 myp 的所有p元素
    $("p:not(.myp)").css("font-weight","800");
    // 下标为偶数的所有p元素
    $("p:even").css("background","#999");
    // 下标为奇数的所有p元素
    $("p:odd").css("background","#eee");
    // 下标为4的p元素
    $("p:eq(4)").css("color","green");
    // 下标大于4的p元素
    $("p:gt(4)").css("font-size","12px");
    // 下标小于4的p元素
    $("p:lt(4)").css("font-size","16px");
    // header：匹配如 h1, h2, h3之类的标题元素
    $(":header").css("font-style","italic");
  </script>
</body>
View Code

结果：

内容与可见性选择器

  • :contains(text) ：匹配包含给定文本的元素
  • :has(selector) ：匹配含有选择器所匹配的元素的元素
  • :empty ：匹配所有不包含子元素或者文本的空元素
  • :parent ：匹配含有子元素或者文本的元素

示例：

 1 <!DOCTYPE html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>Selecter</title>
 5 
 6   <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>
 7   <style media="screen">
 8     p{
 9       width: 120px;
10       height:30px;
11     }
12   </style>
13 </head>
14 <body>
15   <div class="box">
16     <p>PHP</p>
17     <p><b>JQuery</b></p>
18     <p>Java</p>
19     <p style="display:none;">C++</p>
20     <p>Javascript</p>
21     <p></p>
22   </div>
23 
24   <script type="text/javascript">
25   // 匹配p元素中包含”J“字母的元素
26   $("p:contains(J)").css("color","red");
27   // 匹配p元素中没有内容或子元素的所有元素
28   $("p:empty").css("background","#666");
29   // 匹配p元素中包含b标签的元素
30   $("p:has(b)").css("color","blue");
31   // 匹配p元素中含有内容或子元素的所有元素
32   $("p:parent").css("background","#999");
33 
34   // 匹配隐藏的p元素
35   $("p:hidden").css("display","block");
36   // 匹配显示的p元素
37   //$("p:visible").css("display","none")
38   </script>
39 </body>
View Code

结果：

 属性选择器与子元素选择器

  •  [attribute] ：匹配包含指定属性的元素
  •  [attribute=value] ：匹配指定属性的值为value的元素
  •  [attribute!=value] ：匹配指定属性的值不为value的元素
  •  [attribute^=value] ：匹配给定的属性是以value开始的元素
  •  [attribute$=value] ：匹配给定的属性是以value值结尾的元素
  •  [attribute*=value] ：匹配给定的属性是以包含某些值的元素
  •  [selector1][selector2][selectorN] ：复合属性选择器，需要同时满足多个条件时使用

示例：

 

 1 <!DOCTYPE html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>Selecter</title>
 5 
 6   <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>
 7   <style media="screen">
 8     table{
 9       border: solid 1px #333;
10     }
11   </style>
12 </head>
13 <body>
14   <div class="box">
15     <p class="p1">line1</p>
16     <p id="p2">line2</p>
17     <p id="p3">line3</p>
18     <p class="p4">line4</p>
19   </div>
20   <div class="box2">
21     <p class="p5">line5</p>
22   </div>
23 
24   <script type="text/javascript">
25     // 拥有ID属性的p元素
26     $("p[id]").css("color","red");
27     // class属性为p1的元素
28     $("p[class='p1']").css("color","blue");
29     // class属性以4为结尾的元素
30     $("p[class$='4']").css("color","green");
31     // 第二个子元素
32     $("p:nth-child(2)").css("background","#666");
33     // 本身是唯一的子元素
34     $("p:only-child").css("background","#666");
35   </script>
36 </body>
View Code

 

表单选择器

  • :input ：匹配所有的input，textarea, select 和 button 元素
  • :text ：匹配所有的单行文本框
  • :password ：匹配所有密码框
  • :radio ：匹配所有单选按钮
  • :checkbox ：匹配所有复选框
  • :submit ：匹配所有提交按钮
  • :image ：匹配所有图像域
  • :reset ：匹配所有重置按钮
  • :button ：匹配所有按钮
  • :file ：匹配所有文件域
  • :hidden ：匹配所有不可见元素，或者type为hidden的元素

表单属性选择器

  •  :enabled ：匹配所有可用元素
  •  :disabled ：匹配所有不可用元素
  •  :checked ：匹配所有选中的被选中元素(复选框、单选框等，不包括下拉select中的option)
  •  :selected ：匹配所有选中的option元素

 

posted @ 2017-10-19 10:10  agmj  阅读(151)  评论(0)  编辑  收藏  举报