JQuery第二节

jQuery操作样式

css操作

功能:设置或者修改样式,操作的是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");

注意:获取样式操作只会返回第一个元素对应的样式值。

隐式迭代:

  1. 设置操作的时候,如果是多个元素,那么给所有的元素设置相同的值
  2. 获取操作的时候,如果是多个元素,那么只会返回第一个元素的值。

class操作

添加样式类

//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】

jQuery操作属性

attr操作

设置单个属性

//第一个参数:需要设置的属性名
//第二个参数:对应的属性值
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】

prop操作

在jQuery1.6之后,对于checked、selected、disabled这类boolean类型的属性来说,不能用attr方法,只能用prop方法。

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

【案例:表格全选案例.html】

jQuery动画

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);
//第一个参数:是否清除队列
//第二个参数:是否跳转到最终效果

【案例:手风琴特效】【案例:音乐导航】

jQuery节点操作

创建节点

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

原文发布于微信公众号 - web前端基地(webjidi)

原文发表时间:2019-07-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券