功能:设置或者修改样式,操作的是style属性。
操作单个样式
//name:需要设置的样式名称
//value:对应的样式值
css(name, value);
//使用案例
$("#one").css("background","gray");//将背景色修改为灰色
设置多个样式
//参数是一个对象,对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例
$("#one").css({
"background":"gray",
"width":"400px",
"height":"200px"
});
获取样式
//name:需要获取的样式名称
css(name);
//案例
$("div").css("background-color");
注意:获取样式操作只会返回第一个元素对应的样式值。
隐式迭代:
添加样式类
//name:需要添加的样式类名,注意参数不要带点.
addClass(name);
//例子,给所有的div添加one的样式。
$(“div”).addClass(“one”);
移除样式类
//name:需要移除的样式类名
removeClass(“name”);
//例子,移除div中one的样式类名
$(“div”).removeClass(“one”);
判断是否有某个样式类
//name:用于判断的样式类名,返回值为true false
hasClass(name)
//例子,判断第一个div是否有one的样式类
$(“div”).hasClass(“one”);
切换样式类
//name:需要切换的样式类名,如果有,移除该样式,如果没有,添加该样式。
toggleClass(name);
//例子
$(“div”).toggleClass(“one”);
【案例:tab栏切换案例.html】
【案例:旋转木马.html】
设置单个属性
//第一个参数:需要设置的属性名
//第二个参数:对应的属性值
attr(name, value);
//用法举例
$(“img”).attr(“title”,”哎哟,不错哦”);
$(“img”).attr(“alt”,“哎哟,不错哦”);
设置多个属性
//参数是一个对象,包含了需要设置的属性名和属性值
attr(obj)
//用法举例
$("img").attr({
title:"哎哟,不错哦",
alt:"哎哟,不错哦",
style:"opacity:.5"
});
获取属性
//传需要获取的属性名称,返回对应的属性值
attr(name)
//用法举例
var oTitle = $("img").attr("title");
alert(oTitle);
移除属性
//参数:需要移除的属性名,
removeAttr(name);
//用法举例
$("img").removeAttr("title");
【案例:美女相册.html】
在jQuery1.6之后,对于checked、selected、disabled这类boolean类型的属性来说,不能用attr方法,只能用prop方法。
//设置属性
$(“:checked”).prop(“checked”,true);
//获取属性
$(“:checked”).prop(“checked”);//返回true或者false
【案例:表格全选案例.html】
jquery提供了三组基本动画,这些动画都是标准的、有规律的效果,jquery还提供了自定义动画的功能。【演示动画例子】
显示(show)与隐藏(hide)是一组动画:滑入(slideUp)与滑出(slideDown)与切换(slideToggle),效果与卷帘门类似淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)
show([speed], [callback]);
//speed(可选):动画的执行时间
//1.如果不传,就没有动画效果。如果是slide和fade系列,会默认为normal
//2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
//3.固定字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。
//callback(可选):执行完动画后执行的回调函数
【案例:下拉菜单动画版.html】【案例:京东轮播图(呼吸灯).html】
animate: 自定义动画
$(selector).animate({params},[speed],[easing],[callback]);
// {params}:要执行动画的CSS属性,带数字(必选)
// speed:执行动画时长(可选)
// easing:执行效果,默认为swing(缓动) 可以是linear(匀速)
// callback:动画执行完后立即执行的回调函数(可选)
在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画执行完成了才会执行(联想:火车进站)。
//stop方法:停止动画效果
stop(clearQueue, jumpToEnd);
//第一个参数:是否清除队列
//第二个参数:是否跳转到最终效果
【案例:手风琴特效】【案例:音乐导航】
//$(htmlStr)
//htmlStr:html格式的字符串
$(“<span>这是一个span元素</span>”);
//append appendTo
//prepend prependTo
//before
//after
【案例:城市选择案例.html】
empty:清空指定节点的所有元素,自身保留(清理门户)
$(“div”).empty();//清空div的所有内容(推荐使用,会清除子元素上绑定的内容,源码)
$(“div”).html(“”);//使用html方法来清空元素,不推荐使用,会造成内存泄漏,绑定的事件不会被清除。
remove:相比于empty,自身也删除(自杀)
$(“div”).remove();
作用:复制匹配的元素
// 复制$(selector)所匹配到的元素(深度复制)
//cloneNode(true)
// 返回值为复制的新元素,和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。
$(selector).clone();