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();