zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    内存问题再次注意
    数据分析(基础/数组)
    总结
    scrapy框架
    selenium
    chromedriver设置无界面模式 selenium基础操作
    selenium+phantomjs/Chrome/Firefox
    json解析模块
    cookie模拟登录
    常用正则
  • 原文地址:https://www.cnblogs.com/wujindong/p/5352412.html
Copyright © 2011-2022 走看看