jQuery-----隔行换色/全选全不选/

隔行换色：              全选全不选：

       分析：

              1、页面加载   $(function(){})

              2、获取所有奇数行数     添加css样式

              3、获取所有偶数行数     添加css样式

       属性和CSS

              对属性进行操作

              attr()设置或者获取元素的属性

     方式一

              attr("获取属性名称")；

     方式二

              attr("属性名称","属性值");

     方式三

              设置多个属性  json

              attr({

                      "属性1"："值",

                      "属性2"："值",

                      "属性3"："值"

              })

    移除指定属性

              removeAttr("获取属性名称");

    CSS

              attr("class","值")；

              addClass("添加指定样式");

              removeClass("一处指定样式");

    对CSS进行操作：style样式

                               css();   括号里不写值就是获取      写值就是设置css样式 

                               方式一：css("属性名");

                               方式二：css("属性名称","属性值");

                               方式三 ：设置多个值用 json

                                             css({ 

                                                                      "属性1"："值",

 

                                                                      "属性2"："值",

 

                                                                      "属性3"："值"

                                                })    

     获取元素尺寸：

 

 

 

 

-----------------------------------------------------------------------------------------------------

   //给元素添加属性

   var  $username =  $("name='username'");

   $username.attr("title","姓名");

  //获取元素的属性

   ---->$username.attr("title");

  //添加value和class属性

   $username.attr({"value":"张三"  "class":"textClass"})

  //删除username的class属性

   $username.removeAttr("class");

  //给username添加一个名为textClass的样式

   $username.addClass("textClass");      -----textClass  为已经写好的 里面有背景颜色的属性

  //删除username的textClass的样式

   $username.removeClass("textClass");

  //给div添加边框样式

   var  $div =  $("div");

   $div.css("border","1px solid red");

   //获取div的表框样式

   $div.css("color");   -=-=-=-=-=-=-=-        获取得到的rgb的格式

   //给div添加多种样式

   $div.css({

       "width":"200px","height":"100px","background-color":"red"

    })

   //获取div的位置

   $div.offset().left    ---- 距离左的举例

   $div.offset().width()     ---获取div的宽度

   $div.offset().height()    ---获取div的高度

==========================================================

隔行换色

   

<!--错误率较高-->

$(function(){

     $("tr:gt(0):odd").css("background-color","red");

     $("tr:gt(0):even").css("background-color","yellow");

})

第二种：

   $("tr:gt(0):odd").addClass("odd");

   $("tr:gt(0):even").addClass("even");

然后再odd里面和even 的 class类里面写颜色的样式。

 

-----------------------------------------------------------------------------------------------------全选和全不选

     要求：上面复选框状态与下面一组复选框保持一致

     分析： 1、复选框点击事件

                2、函数：

                              a.获取复选框选中状态     attr   true  false

                              b. 获取下面所有复选框状态，让他们与第一个复选框一致

     注意：

               jQuery版本1.6以上      使用 prop来操作联合属性

 

 

==========================================================

例子：

        <input   type="checkbox"  id = "selectAll" />

       

        <input   type="checkbox"  class="itemSelect" />

        <input   type="checkbox"  class="itemSelect" />

 

//首先获得

     $(function(){

         $("#selectAll").click(function(){

             //测试 alert($(this).prop("checked"));    //选中为true  未选中为false

             $(".itemSlect").prop("checked",$(this).prop("checked"));

         });

   })

 

转载于:https://www.cnblogs.com/Leroyo/p/8205140.html