这是《jQuery入门教程笔记》系列4,在第4篇里面将继续讲述jQuery的选择器,这篇讲述“基本过滤选择器”。
下面是简单过滤选择器的语法表格:
选择器
功能
返回值
first()或者:first
|
获取第一个元素
|
单个元素
|
last()或:last
|
获取最后一个元素
|
单个元素
|
:not(selector)
|
获取除给定选择器外的所有元素
|
元素集合
|
:even
|
获取所有索引值为偶数的元素,索引号从0开始
|
元素集合
|
:odd
|
获取所有索引值为奇数的元素,索引号从0开始
|
元素集合
|
:eq(index)
|
获取指定索引值的元素,索引号从0开始
|
元素集合
|
:gt(index)
|
获取所有大于给定索引值的元素,索引号从0开始
|
元素集合
|
:lt(index)
|
获取所有小于给定索引值的元素,索引号从0开始
|
元素集合
|
:header
|
获取所有类型的元素,如h1,h2……
|
元素集合
|
:animated
|
获取正在执行动画效果的元素
|
元素集合
|
下面是示例代码,请自己调整注释符的位置来体会各种不同的选择器的效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <title>chap2-4 使用jQuery基本过滤选择器</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="Geany 0.20" /> <script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script> <style type="text/css"> body{ font-size:12px; text-align:center; } div{ width:241px; height:83px; border:solid 1px #eee; } h1{ font-size:13px; } ul{ list-style-type:none; padding:0px; } .DefClass,.NotClass{ height:23px; width:60px; line-height:23px; float:left; border-top:solid 1px #eee; border-botton:solid 1px #eee; } .GetFocus{ width:58px;border:solid 1px #666; background-color:#eee; } #spanMove{ width:238px; height:23px; line-height:23px; } .clsFraA{ width:65px; height:65px; } .clsFraP{ width:45px; height:45px; background-color:#eee; } .clsFraC{ width:25px; height:25px; background-color:#ddd; } </style> <script type="text/javascript"> /**/$(function(){ //增加第一个元素的类别 $("li:first").addClass("GetFocus"); }); /*$(function(){ //增加最后一个元素的类别 $("li:last").addClass("GetFocus"); }); $(function(){ //增加去除所有与给定选择器匹配的元素类别 $("li:not(.NotClass)").addClass("GetFocus"); }); $(function(){ //增加所有索引值为偶数的元素类别,从0开始计数 $("li:even").addClass("GetFocus"); }); $(function(){ //增加所有索引值为奇数的元素类别,从0开始计数 $("li:odd").addClass("GetFocus"); }); $(function(){ //增加一个给定索引值的元素类别,从0开始计数 $("li:eq(1)").addClass("GetFocus"); }); $(function(){ //增加所有大于给定索引值的元素类别,从0开始计数 $("li:gt(1)").addClass("GetFocus"); }); $(function(){ //增加所有小于给定索引值的元素类别,从0开始计数 $("li:lt(4)").addClass("GetFocus"); }); $(function(){ //增加标题类元素类别 $("div h1").css("width","238"); $(":header").addClass("GetFocus"); }); $(function(){ animateIt();//增加动画效果元素类别 $("#spanMove:animated").addClass("GetFocus"); });*/ function animateIt() { //动画效果 $("#spanMove").slideToggle("slow",animateIt); } </script> </head>
<body> <div> <h1>基本过滤选择器</h1> <ul> <li class="DefClass">Item 0</li> <li class="DefClass">Item 1</li> <li class="NotClass">Item 2</li> <li class="DefClass">Item 3</li> </ul> <span id="spanMove">Span Move</span> </div> </body> </html>
|