前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JQuery第二节

JQuery第二节

作者头像
用户3461357
发布2019-08-02 15:03:45
1.1K0
发布2019-08-02 15:03:45
举报
文章被收录于专栏:web前端基地web前端基地

jQuery操作样式

css操作

功能:设置或者修改样式,操作的是style属性。

操作单个样式

代码语言:javascript
复制
//name:需要设置的样式名称
//value:对应的样式值
css(name, value);
//使用案例
$("#one").css("background","gray");//将背景色修改为灰色

设置多个样式

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

获取样式

代码语言:javascript
复制
//name:需要获取的样式名称
css(name);
//案例
$("div").css("background-color");

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

隐式迭代:

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

class操作

添加样式类

代码语言:javascript
复制
//name:需要添加的样式类名,注意参数不要带点.
addClass(name);
//例子,给所有的div添加one的样式。
$(“div”).addClass(“one”);

移除样式类

代码语言:javascript
复制
//name:需要移除的样式类名
removeClass(“name”);
//例子,移除div中one的样式类名
$(“div”).removeClass(“one”);

判断是否有某个样式类

代码语言:javascript
复制
//name:用于判断的样式类名,返回值为true false
hasClass(name)
//例子,判断第一个div是否有one的样式类
$(“div”).hasClass(“one”);

切换样式类

代码语言:javascript
复制
//name:需要切换的样式类名,如果有,移除该样式,如果没有,添加该样式。
toggleClass(name);
//例子
$(“div”).toggleClass(“one”);

【案例:tab栏切换案例.html】

【案例:旋转木马.html】

jQuery操作属性

attr操作

设置单个属性

代码语言:javascript
复制
//第一个参数:需要设置的属性名
//第二个参数:对应的属性值
attr(name, value);
//用法举例
$(“img”).attr(“title”,”哎哟,不错哦”);
$(“img”).attr(“alt”,“哎哟,不错哦”);

设置多个属性

代码语言:javascript
复制
//参数是一个对象,包含了需要设置的属性名和属性值
attr(obj)
//用法举例
$("img").attr({
    title:"哎哟,不错哦",
    alt:"哎哟,不错哦",
    style:"opacity:.5"
});

获取属性

代码语言:javascript
复制
//传需要获取的属性名称,返回对应的属性值
attr(name)
//用法举例
var oTitle = $("img").attr("title");
alert(oTitle);

移除属性

代码语言:javascript
复制
//参数:需要移除的属性名,
removeAttr(name);
//用法举例
$("img").removeAttr("title");

【案例:美女相册.html】

prop操作

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

代码语言:javascript
复制
//设置属性
$(“:checked”).prop(“checked”,true);
//获取属性
$(“:checked”).prop(“checked”);//返回true或者false

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

jQuery动画

jquery提供了三组基本动画,这些动画都是标准的、有规律的效果,jquery还提供了自定义动画的功能。【演示动画例子】

三组基本动画

显示(show)与隐藏(hide)是一组动画:滑入(slideUp)与滑出(slideDown)与切换(slideToggle),效果与卷帘门类似淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)

代码语言:javascript
复制
show([speed], [callback]);
//speed(可选):动画的执行时间
	 //1.如果不传,就没有动画效果。如果是slide和fade系列,会默认为normal
	 //2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     //3.固定字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。
//callback(可选):执行完动画后执行的回调函数

【案例:下拉菜单动画版.html】【案例:京东轮播图(呼吸灯).html】

自定义动画

animate: 自定义动画

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

动画队列与停止动画

在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画执行完成了才会执行(联想:火车进站)。

代码语言:javascript
复制
//stop方法:停止动画效果
stop(clearQueue, jumpToEnd);
//第一个参数:是否清除队列
//第二个参数:是否跳转到最终效果

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

jQuery节点操作

创建节点

代码语言:javascript
复制
//$(htmlStr)
//htmlStr:html格式的字符串
$(“<span>这是一个span元素</span>”);

添加节点

代码语言:javascript
复制
//append  appendTo
//prepend prependTo
//before
//after

【案例:城市选择案例.html】

清空节点与删除节点

empty:清空指定节点的所有元素,自身保留(清理门户)

代码语言:javascript
复制
$(“div”).empty();//清空div的所有内容(推荐使用,会清除子元素上绑定的内容,源码)
$(“div”).html(“”);//使用html方法来清空元素,不推荐使用,会造成内存泄漏,绑定的事件不会被清除。

remove:相比于empty,自身也删除(自杀)

代码语言:javascript
复制
$(“div”).remove();

克隆节点

作用:复制匹配的元素

代码语言:javascript
复制
// 复制$(selector)所匹配到的元素(深度复制)
//cloneNode(true)
// 返回值为复制的新元素,和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。
$(selector).clone();
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-07-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 web前端基地 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • jQuery操作样式
    • css操作
      • class操作
      • jQuery操作属性
        • attr操作
          • prop操作
          • jQuery动画
            • 三组基本动画
              • 自定义动画
                • 动画队列与停止动画
                • jQuery节点操作
                  • 创建节点
                    • 添加节点
                      • 清空节点与删除节点
                        • 克隆节点
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档