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>