Jq 02 样式、动画、节点操作等

一、操作样式

1、设置样式

           js ： style（行内样式） className（类样式，有权重）

           css(name样式名，value样式值)         

$("li")      // css 之间没有逗号或分号

     .css("backgroundColor","red")

     .css("margin","10px")

     .css("padding","5px")

     .css("border","1px solid green")

         若同时设置不同的大小，那么最终大小是多少？

$("li").eq(0).css("fontSize", "20px"); // 以下4个都是设置样式

$("li").eq(1).css("fontSize", "21px");

$("li").eq(2).css("fontSize", "22px");

$("li").eq(3).css("fontSize", "23px");

console.log($("li").css("fontSize")); // 20px

//隐式迭代：

// 默认所有的元素都是相同的效果，故只获取第一个元素的样式

css(obj) ：直接写多个对象

$("li").css({

backgroundColor:"red",

fontSize:"10px",

border:"1px solide green"

});

2、获取样式

           css(name样式名)

           $("li").eq(0).css("fontSize")

3、增删有----->类

         新增类 $("li"）.addClass("abc")

        删除类 $("li").removeClass("abc")

        有类 $("li").hasClass("abc");

         切换类（有则删除；无则添加） $("li").toggleClass("abc")

4、Tab 栏切换

// class=tab-item 是tab 栏，main 是下属 ul

$(function () {

$(".tab-item").mouseenter(function () {

//两件事件

$(this).addClass("active").siblings().removeClass("active");

var idx = $(this).index();

$(".main").eq(idx).addClass("selected").siblings().removeClass("selected");

});

});

二、操作属性

          1、.attr(name,value) // 与css 一样

          2、.attr(obj) // 设置多个属性，也可自定义属性

          3、prop 方法

             //对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。disabled，selected，checked，只能用prop

          4、removeAttr(name) // 移除某个属性

三、动画

1、显示、隐藏：

              show([speed：持续时间],[callback：动画结束后函数])

              hide([speed：持续时间],[callback：动画结束后函数])

2、滑入、滑出：

              slideDown(speed,callback)

              slideUp(speed,callback)

              slideToggle(speed,callback) 两者切换

3、淡入淡出：

              fadeIn(speed,callback);

              fadeOut(speed,callback);

              fadeToggle(speed,callback); 两者切换

4、自定义动画 animate(prop,[speed],[swing/linear],[callback])

5、停止 stop()

 

四、节点操作

1、添加节点

              创建一个节点 var $li=$('要添加的标签内容')；

             给某一个父元素添加节点

             $("div").append($li) [$li 作为最后一个子节点添加]

             $li.appendTo($("div")); [$li 添加到div 里，更常用]

             $("div").prepend($li) [$li 作为第一个子节点添加]

             $li.prependTo($("div"));

              $('div').after($("p")); // 添加到 div 之后或之后，作为兄弟元素

              $('div').before($("p"));

2、清空

$("div").html("") 若标签绑定事件，当内容被清空后，事件不会清空，导致“内存泄漏”[只占用户的内存，不会有大问题 但不严谨]

应使用 $("div").empty() 清空全部子节点同时删除事件，组织内存泄漏

3、删除节点

       $("div").remove() 删除自己和全部的子节点（不需要像js 一样，找到父节点再删除自己）

3、克隆

        $("div").clone(false/true)       false 和true 都是深复制，false不会复制事件，而true 会