23.样式操作和click事件

一。jQuery样式操作

jQuery用法思想二

统一个函数完成取值和赋值

操作行间样式：原生js无法读取行间没有定义的css属性值

 

//读取div的样式

$("div").css(width);       

$("div").css(color);     

 

//设置div的样式

$("div").css("width","30px"); 

$("div").css("height","30px"); 

$("div").css({fontSize:"30px"  ,  color:"red"}); 

 

特别注意：

选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css(width); ，获取的是第一个div的width

 

//操作样式类名

        $("#div1").addClass("divClass2")   //为id是div1的对象追加样式divClass2

        $("#div1").removeClass("divClass")   //移除id为div1的对象的class名为divClass的样式

        $("#div1").removeClass("divClass  divClass2")  //移除多个样式

        $("#div1").toggleClass("anoterClass")  //重复切换anoterClass样式

二。绑定click事件

给元素绑定click事件，可以用如下方法：

 

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

            //内部的this指的是原生对象

            

            //使用jQuery对象用

        }

 

获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index（）方法获取

.............................................................................

var $li = $(".list  li).eq(1);

alert($li.index());  //弹出1

.。。。。。。

<ul   class = "class">

<li> 1 </li>

<li> 2 </li>

.............................................................................

 

三。jQuery特性效果

      fadeIn（）      淡入--默认是隐藏的

      fadeOut()    淡出    图片会消失。

      fadeToggle（）  切换淡入淡出

      hide（）  隐藏元素

      show（） 显示元素

      toggle（） 切换元素的可见状态

      slideDown（）  向下展开

      slideUp（） 向上卷起

      slideToggle（）  一次展开或卷起某个元素

四。jQuery链式调用

jQuery对象的方法会在执行完后返回这个jQuery对象，所有jQuery对象的方法可以连起来写：

    <script >

        $("#div1")   //id为div的元素

        .children("ul")  //该元素下面的ul子元素

        .slideDown("fast")  //高度从零变到实际奥杜来显示ul元素

        .parent()  //跳到ul的父元素，也就是id为div1的元素

        .siblings()  //跳到div1元素平级的所有兄弟元素

        .children("ul")  //这些兄弟元素中的ul元素

        .slideUp("fast")  //高度实际高度变换到零来隐藏ul元素

    </script>

 

五。如何修正反复点击持续动画的bug

需要添加一个.stop（）来修正此问题。