jquery 相关class属性的操作 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>wrap</title>
 6     <script type="text/javascript" src="../jquery/jquery-1.11.3.min.js"></script>
 7     <style type="text/css">
 8         .lianjie{display: inline-block;border:1px solid red}
 9         .border{border:1px solid red}
10         .border1{outline: 4px dotted green }
11     </style>
12 </head>
13 <body>
14 <a href="http://www.baidu.com" class="baidu">百度</a>
15 <a href="http://www.souhu.com" class="souhu">百度</a>
16 <a href="http://www.xinlang.com" class="xinlng">百度</a>
17 <img src="1.jpg" alt="这是张图片"/>
18 
19 <script type="text/javascript">
20     $(document).ready(function(){
21         $("img").addClass("picture");//添加class属性
22         $("img").removeClass("picture").addClass("t_pic");//删除并添加class属性
23         console.log($("img").hasClass("t_pic"));//hasClass检测是否存在Class属性
24 
25         $("a:odd").addClass("lianjie");//odd 奇数 even偶数
26 
27         $("a").addClass(function(index,eclass){//动态添加class属性 index是索引 elcass处理当前元素拥有的class属性
28             if(index%2==0){
29                 return "even";
30             }else{
31                 return "odd";
32             }
33         });
34 
35         $("a").filter(":odd").addClass("oddClass").end()//filter()筛选出于表达式匹配的结果集 end()返回最近一次的破坏性操作之前，将匹配的元素列表变为前一次状态
36                 .filter(":even").addClass("evenClass");
37 
38         $("<button>toggle</button>").appendTo("body").click(doToggle);
39 
40         function doToggle(e){
41 //            $("img").toggleClass("border");//toggleClass切换class
42 //            $("img").toggleClass("border border1");//toggleClass切换多个class
43 //            $("img").toggleClass();//toggleClass()不添加参数的话是切换全部class
44 //            $("img").toggleClass("border",false);//toggleClass()第二个参数是false只删除
45 //            $("img").toggleClass("border",true);//toggleClass()第二个参数是true值添加
46             $("a").toggle(function(index,currentClass){
47 
48                 if(index%2==0){
49                     return "border";
50                 }else{
51                     return "border1";
52                 }
53 
54             });
55 
56             e.preventDefault();
57         }
58 
59     });
60 
61 </script>
62 </body>
63 </html>

 

posted @ 2016-04-04 17:27  Window2016  阅读(308)  评论(0)    收藏  举报