今天说的是过滤选择器,主要是通过特定的过滤规则来筛选出所需的DOM元素,方便以后添加我们所需的效果,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。
按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
============================================================================================
今天就像我们标题写的一样,先了解下基本的过滤,以后在说说其他的。
基本过滤器有10个,下面我们一个一个的来了解下
选择器 | 描述 | 返回 | 示例 |
$("Element:first") | 获得在HTML页面中某种元素的第一个 | 单个元素 | $("div:first")表示获得第一个div |
$("Element:last") | 获得在HTML页面中某种元素的最后一个 | 单个元素 | $("div:last")表示获得最后一个div |
$("Element:not(selector)") | 去除所有与给定选择器匹配的元素 | 集合元素 | $(“input:not:(.myclass)”)选取class不是myclass的input元素 |
$("Element:even") | 选取索引是偶数的所有元素,注意:索引是从0开始的 | 集合元素 | $(“input:even”)选取索引是偶数的input元素。 |
$("Element:odd") | 选取索引是奇数的所有元素,注意:索引是从0开始的 | 集合元素 | $(“input:odd”)选取索引是奇数的input元素。 |
$("Element:eq(index)") | 选取索引等于index的元素,注意:索引是从0开始的 | 集合元素 | $(“input:eq(1)”)选取索引等于1的input元素。实际上选择的是第二个input元素 |
$("Element:gt(index)") | 选取索引大于index的元素,注意:索引是从0开始的 | 集合元素 | $(“input:gt(1)”)选取索引大于1的input元素。实际上选择的是第二个input元素开始,之【后】所有的input元素 |
$("Element:lt(index)") | 选取索引小于index的元素,注意:索引是从0开始的 | 集合元素 | $(“input:lt(1)”)选取索引小于于1的input元素。这个就等同于$(“input:eq(0)”)。 $(“input:gt(3)”)选取索引大于3的input元素。实际上选择的是第三个input元素开始,之【前】所有的input元素 |
$(":header") | 选取所有的标题元素,例如h1,h2,h3….. | 集合元素 | $(“:header”)选取网页中所有的h1,h2,h3… |
$("Element:animated") | 选取当前正在执行动画的所有元素 | 集合元素 | $(“div:animated”)选取正在执行动画的div元素 |
=====================================================================================================
这里有几点要注意的:
【1】有一点我觉得有必要提醒大家的是”:first”和”:last”选择器,虽然获取到的是一个元素,但是返回的jQuery对象仍然是一个jQuery包装集,还是一个集合,还是要这样$(“div:first”)[0]转换为DOM对象。具体是以后在说。
【2】odd和even获取的是索引值,是从0开始算起,所以正常表现情况是 even是获取奇数行,odd是获取偶数行 。
【3】如果上面两个方法(gt(index)和lt(index))的大于号小于号记不清,就想想HTML标记中的[& gt ;]和[& lt ;](中括号中内容去掉空格)就行了哈。
=====================================================================================================
=====================================================================================================
完成了w3cfuns网站的作业
基本过滤选择器
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>实例</title>
6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
7 <script type="text/javascript">
8 $(function(){
9 $("#but1").click(function(){
10 $(".a li:first").text("我是第一行");
11 });
12 $("#but2").click(function(){
13 $(".a li:last").text("我是最后一行");
14 });
15 $("#but3").click(function(){
16 $(".b li:odd").text("我是偶数行");
17 });
18 $("#but4").click(function(){
19 $(".b li:even").text("我是奇数行");
20 });
21 $("#but5").click(function(){
22 $(".c li:eq(1)").text("我是第二行");
23 });
24 $("#but6").click(function(){
25 $(".d li:lt(4)").text("我在第五行之前");
26 });
27 $("#but7").click(function(){
28 $(".d li:gt(4)").text(" 我在第五行之后");
29 });
30 $("#but8").click(function(){
31 $(".e :header").text("我是h标题标签");
32 });
33 });
34
35
36 </script>
37 </head>
38
39 <body>
40
41 <input type="button" id="but1" value="我是第一行" />
42 <input type="button" id="but2" value="我是最后一行" />
43 <input type="button" id="but3" value="我是偶数行【:odd】" />
44 <input type="button" id="but4" value="我是奇数行【:even】" />
45 <input type="button" id="but5" value="我是第二行" />
46 <input type="button" id="but6" value="我在第五行之前【:lt()】" />
47 <input type="button" id="but7" value="我在第五行之后【:gt()】" />
48 <input type="button" id="but8" value="我是h标题标签" />
49
50 <p>===============================我是淫荡的分割线【:first和:last应用】===============================</p>
51 <ul class="a">
52 <li>1</li>
53 <li>2</li>
54 <li>3</li>
55 <li>4</li>
56 <li>5</li>
57 </ul>
58 <p>===============================我是淫荡的分割线【:odd和:even应用】===============================</p>
59 <ul class="b">
60 <li>1</li>
61 <li>2</li>
62 <li>3</li>
63 <li>4</li>
64 <li>5</li>
65 <li>6</li>
66 <li>7</li>
67 <li>8</li>
68 <li>9</li>
69 <li>10</li>
70 </ul>
71 <p>===============================我是淫荡的分割线【:eq()应用】===============================</p>
72 <ul class="c">
73 <li>1</li>
74 <li>2</li>
75 <li>3</li>
76 </ul>
77 <p>===============================我是淫荡的分割线【:lt()和:gt()应用】===============================</p>
78 <ul class="d">
79 <li>1</li>
80 <li>2</li>
81 <li>3</li>
82 <li>4</li>
83 <li>5</li>
84 <li>6</li>
85 <li>7</li>
86 <li>8</li>
87 <li>9</li>
88 <li>10</li>
89 </ul>
90 <p>===============================我是淫荡的分割线【:header应用】===============================</p>
91 <div class="e">
92 <h1>h1</h1>
93 <h2>h2</h2>
94 <h3>h3</h3>
95 <h4>h4</h4>
96 <h5>h5</h5>
97 <h6>h6</h6>
98 </div>
99
100
101 </body>
102 </html>