【5】jQuery学习——入门jQuery选择器之过滤选择器-基本过滤选择器

今天说的是过滤选择器,主要是通过特定的过滤规则来筛选出所需的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 ;](中括号中内容去掉空格)就行了哈。

=====================================================================================================

ps.文章参考梦三秋和w3cfuns网站

=====================================================================================================

完成了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>

 

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