使用jQuery基本过滤器选择器选择元素
示例代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>使用jQuery基本过滤选择器</title>
- <script language="javascript" type="text/javascript"
- src="../Jscript/jquery-1.5.2.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-bottom:solid 1px #eee}
- .GetFocus{width:58px;border:solid 1px #666;background-color:#eee}
- #spnMove{width:238px;height:23px;line-height:23px;}
- </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(); //增加动画效果元素类别
- $("#spnMove:animated").addClass("GetFocus");
- })
- function animateIt() { //动画效果
- $("#spnMove").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="spnMove">Span Move</span>
- </div>
- </body>
- </html>
相关推荐
IT之家 2020-03-11
graseed 2020-10-28
zbkyumlei 2020-10-12
SXIAOYI 2020-09-16
jinhao 2020-09-07
impress 2020-08-26
liuqipao 2020-07-07
淡风wisdon大大 2020-06-06
yoohsummer 2020-06-01
chenjia00 2020-05-29
baike 2020-05-19
扭来不叫牛奶 2020-05-08
hxmilyy 2020-05-11
黎豆子 2020-05-07
xiongweiwei00 2020-04-29
Cypress 2020-04-25
冰蝶 2020-04-20