jQuery总结笔记（二）

1. jQuery的操作

1.1. css的基本操作

//name：需要设置的样式名称
//values：对应的样式值
css(name,value);
//使用案例
$("#one").css("backgroudColor","red");//将背景颜色改为红色

设置多个样式

//参数是一个对象，对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例
$("#one").css({
    backgroudColor:"gray",
    width:"400px",
    height:"200px"
});

获取样式

//参数name是想要获取的样式名
css(name)
//使用案例
$("#one").css("backgroudColor");

 

1.2. class的基本操作

添加样式类

//name：需要添加的样式类名，注意参数不要带点
addClass(name);
//使用案例：给所有的div添加one的样式
$("div").addClass("one");

移除样式类

//name：需要移除的样式类名
removeClass(name);
//使用案例
$("div").removeClass("one");

判断是否有某个样式类

//name：需要判断的样式类名  返回值为true  false
hasClass("name")
//使用案例：判断div是否有one的样式类
$("div").hasClass("one");

切换样式类

//name：需要切换的样式类名，如果有，则移除，没有，则添加
toggleClass("name")
//使用案例
$("div").toggleClass("one");

 

2. jQuery操作属性

2.1 attr操作

设置单个属性

//name：需要设置的属性名
//value：对应的属性值
attr(name，value);
//用法举例
$("img").attr("title","哎咬，不错喔");
$("img").attr("alt","哎咬，不错喔");

设置多个属性

//obj：参数是一个对象，包含了需要设置的属性名和属性值
attr(obj);
//用法举例
$("img").attr({
    title:"哎咬，不错喔",
    alt:"哎咬，不错喔",
});

获取属性

//传需要获取的属性名称，返回对应的属性值
attr(name);
//用法举例
$("img").attr("title");

2.2 prop操作

//设置属性
$(":checked").prop("checked",true):
//获取属性
$(":checked").prop("checked");//返回true或者fasle

 

3. jQuery动画

3.1 三组基本动画

显示（show）和隐藏（hide）是一组动画；

滑入（slideDown）、滑出（slideUp）和切换（slideToggle），效果与卷帘门类似；

淡入（fadeIn）、淡出（fadeOut）和切换（fadeToggle）

 

3.2 自定义动画

自定义动画：animate

$(selector).animate({params},[speed],[easing],[callback]);
//{params}：要执行动画的css属性，带数字（必选）
//speed:执行动画时长（可选）
//easing：执行效果，默认为swing（缓动）   可以是linear（匀速）
//callback：动画执行完后立即执行的回调函数（可选）

3.3 动画队列与停止动画
 

//stop方法：停止动画效果
stop(clearQueue,jumpToEnd);
//第一个参数：是否清楚队列
//第二个参数：是否跳转到最终效果

4. jQuery节点操作

4.1 创建节点

//$(htmlStr)
//htmlStr：html格式的字符串
$("<span>这是一个span元素<span>");

4.2 添加节点

//append（在父元素的后面添加子元素） appendTo（将子元素添加到父元素的后面）
//prepend prependTo
//before
//after
 

4.3 清空节点与删除节点

empty：清空指定节点的所有元素，自身保留（清理门户）

$("div").empty();//清空div的所有内容（推荐使用，会清楚子元素上绑定的内容，源码）
$("div").html("");//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清楚。
remove：相比于empty，自身也删除（自杀）

$("div").remove();

4.4 克隆节点

作用：复制匹配的元素

//复制$(selector)所匹配的元素（深度复制）
//cloneNode(true)
//返回值为复制的新的元素，和原来的元素没有任何关系了。即修改新的元素，不会影响到原来的元素
$(selector).clone();