jQuery基础知识点总结(DOM操作)


Posted in Javascript onJune 01, 2016

使用jQuery的方式来操作DOM更加的简洁、方便,统一的调用方式方便学习并且可降低学习成本。

1、样式属性操作

1)设置样式属性操作

①设置单个样式:

// 第一个参数表示:样式属性名称
// 第二个参数表示:样式属性值
$(selector).css(“color”, “red”);

②设置多个样式(也可以设置单个)

// 参数为 {}(对象)
$(selector).css({“color”: “red”, “font-size”: “30px”});

2)获取样式属性操作

// 参数表示要获取的 样式属性名称
$(selector).css(“font-size”);

2、类操作

1)添加类样式

——addClass(className)为指定元素添加类className

$(selector).addClass(“liItem”); //此处类型不带点,所有类操作的方法类名都不带点
2)移除类
        ——removeClass(className)为指定元素移除类className
$(selector).removeClass(“liItem”);
$(selector).removeClass(); //不指定参数,表示移除被选中元素的所有类

 3)判断有没有类样式

        ——hasClass(className)判断指定元素是否包含类className
$(selector).hasClass(“liItem”); //返回值为true或false

4)切换类样式

        ——toggleClass(className)为指定元素切换类className,该元素有类则移除,没有指定类则添加
$(selector).hasClass(“liItem”);

【注意】

1、操作类样式的时候,所有的类名都不带点(.)

2、操作的样式非常少,那么可以通过.css()这个方法来操作

3、操作的样式很多,那么要通过使用类的方式来操作

4、如果考虑以后维护方便(把CSS从js中分离出来)的话,推荐使用类的方式来操作。类比CSS书写位置(把CSS从html中分离出来)

关键字:简约、粗暴、干净利落、直截了当

3、jQuery动画

3.1隐藏显示动画

①show方法

// 用法一:
// 参数为数值类型,表示:执行动画时长
/* 单位为:毫秒(ms),参数2000表示动画执行时长为2000毫秒,即2秒钟 */
$(selector).show(2000);
 
// 用法二:
// 参数为字符串类型,是jQuery预设的值,共有三个,分别是:slow、normal、fast
/* 跟用法一的对应关系为: */
/* slow:600ms、normal:400ms、fast:200ms */
$(selector).show(“slow”);
 
// 用法三:
// 参数一可以是数值类型或者字符串类型
// 参数二表示:动画执行完后立即执行的回调函数
$(selector).show(2000, function() {});
 
// 用法四:
// 不带参数,作用等同于 css(“display”, ”block”)
/* 注意:此时没有动画效果 */
$(selector).show();

【注意】:jQuery预设的三组动画效果的语法几乎一致:参数可以有两个,第一个是动画的执行时长,第二个是动画执行完成后的回调函数。

第一个参数可以是:指定字符或者毫秒数

②hide方法

$(selector).hide(1000); 
$(selector).hide(“slow”);
$(selector).hide(1000, function(){});
$(selector).hide();

3.2 滑入滑出动画

 ①滑入动画效果

$(selector).slideDown(speed,callback); 
// 注意:省略参数或者传入不合法的字符串,那么则使用默认值:400毫秒(同样适用于fadeIn/slideDown/slideUp)
$(selector).slideDown();

 ②滑出

// 作用:让元素以上拉动画效果隐藏起来
$(selector).slideUp(speed,callback);

③滑入滑出切换动画效果

$(selector).slideToggle(speed,callback);
// 参数等同与"隐藏和显示"

4、淡入淡出动画

 ①淡入动画效果

// 作用:让元素以淡淡的进入视线的方式展示出来
$(selector).fadeIn(speed, callback);

 ②淡出

// 作用:让元素以渐渐消失的方式隐藏起来
$(selector).fadeOut(1000);

③淡入淡出切换动画效果

// 作用:通过改变不透明度,切换匹配元素的显示或隐藏状态
$(selector).fadeToggle('fast',function(){});
// 参数等同与"隐藏和显示"

④改变不透明度到某个值

——与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明;而fadeTo可以指定元素不透明度的具体值;并且时间参数是必需的!

// 作用:调节匹配元素的不透明度
// 用法有别于其他动画效果
// 第一个参数表示:时长
// 第二个参数表示:不透明度值,取值范围:0-1
$(selector).fadeTo(1000, .5); // 0全透,1全不透
 
// 第一个参数为0,此时作用相当于:.css(“opacity”, .5);
$(selector).fadeTo(0, .5);

jQuery提供的这几个动画效果控制的CSS属性包括:高度、宽度、不透明度。{height:400px; width:300px; opacity:.4;}

这三个CSS属性的共性是:属性值只有一个,并且这个值是数值(去掉单位后)。

5、自定义动画

注意:所有能够执行动画的属性必须只有一个数字类型的值。

比如:要改变字体大小,要使用:fontSize(font-size),不要使用:font

// 作用:执行一组CSS属性的自定义动画
// 第一个参数表示:要执行动画的CSS属性(必选)
// 第二个参数表示:执行动画时长(可选)
// 第三个参数表示:动画执行完后立即执行的回调函数(可选)
$(selector).animate({params},speed,callback);

6、停止动画 stop()

6.1 作用:停止当前正在执行的动画

6.2 为什么要停止动画?

如果一个以上的动画方法在同一个元素上调用,那么对这个元素来说,后面的动画将被放到效果队列中。这样就形成了动画队列。(联想:排队进站)

动画队列里面的动画不会执行,直到第一个动画执行完成。

// 第一个参数表示是否清空所有的后续动画
// 第二个参数表示是否立即执行完当前正在执行的动画
$(selector).stop(clearQueue,jumpToEnd);
// 常用方式
$(selector).stop();

解释:

当调用stop()方法后,队列里面的下一个动画将会立即开始。但是,如果参数clearQueue被设置为true,那么队列面剩余的动画就被删除了,并且永远也不会执行。

如果参数jumpToEnd被设置为true,那么当前动画会停止,但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如:slideUp()方法,那么元素会立即隐藏掉。如果存在回调函数,那么回调函数也会立即执行。

 注意:如果元素动画还没有执行完,此时调用sotp()方法,那么动画将会停止。并且动画没有执行完成,那么回调函数也不会被执行。

7、jQuery节点操作

7.1 动态创建元素

// $()函数的另外一个作用:动态创建元素
var $spanNode = $(“<span>我是一个span元素</span>”);

7.2 添加元素(重点)

①在元素的最后一个子元素后面追加元素:append()(重点)

②作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(页面中存在或者创建出来的元素都可以)

如果是页面中存在的元素,那么调用append()后,会把这个元素从原先的位置移除,然后再插入到新的位置。

 如果是给多个目标追加一个元素,那么append()方法的内部会复制多份这个元素,然后追加到多个目标里面去。(最好不要这么做)

③常用参数:htmlString 或者 jQuery对象

// 在$(selector)中追加$node
$(selector).append($node);
// 在$(selector)中追加div元素,参数为htmlString
$(selector).append('<div></div>');

(了解)不常用操作:(用法跟append()方法基本一致)

// appendTo()
//作用:同append(),区别是:把$(selector)追加到node中去
$(selector).appendTo(node);
 
// prepend()
//作用:在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);
 
// after()
//作用:在被选元素之后,作为兄弟元素插入内容或节点
$(selector).after(node);
 
// before()
//作用:在被选元素之前,作为兄弟元素插入内容或节点
$(selector).before(node);
7.3 html创建元素(推荐,重点)

①作用:设置或返回所选元素的html内容(包括 HTML 标记)

②设置内容的时候,如果是html标记,会动态创建元素,此时作用跟js里面的 innerHTML属性相同

// 动态创建元素
$(selector).html(‘<span>大方啊</span>');
// 获取html内容
$(selector).html();

 7.4 清空元素

// 清空指定元素的所有子元素(光杆司令)
// 没有参数
$(selector).empty();
$(selector).html(“”);
// “自杀” 把自己(包括所有内部元素)从文档中删除掉
$(selector).remove();

 7.5 复制元素

//作用:复制匹配的元素
// 复制$(selector)所匹配到的元素
// 返回值为复制的新元素
$(selector).clone();

【总结】:推荐使用html(“<span></span>”)方法来创建元素或者html(“”)清空元素

8、操作form表单(重点)

    8.1属性操作

①设置属性:

// 第一个参数表示:要设置的属性名称
// 第二个参数表示:改属性名称对应的值
$(selector).attr(“title”, “小花啊”);

②获取属性:

// 参数为:要获取的属性的名称,改操作会返回指定属性对应的值
$(selector).attr(“title”); // 此时,返回指定属性的值

③移除属性:

// 参数为:要移除的属性的名称
$(selector).removeAttr(“title”);

【注意】:checkedselecteddisabled要使用.prop()方法。

prop方法通常用来影响DOM元素的动态状态,而不是改变的HTML属性。例如:inputbuttondisabled特性,以及checkboxchecked特性。

8.2 值和内容

①val()方法:

// 作用:设置或返回表单元素的值,例如:input,select,textarea的值
// 获取匹配元素的值,只匹配第一个元素
$(selector).val();
// 设置所有匹配到的元素的值
$(selector).val(“具体值”);

②text() 方法

// 作用:设置或获取匹配元素的文本内容
//获取操作不带参数(注意:这时候会把所有匹配到的元素内容拼接为一个字符串,不同于其他获取操作!)
$(selector).text();
//设置操作带参数,参数表示要设置的文本内容
$(selector).text(“我是内容”);

9、尺寸位置操作

9.1 高度和宽度操作

①高度操作height() :

// 作用:设置或获取匹配元素的高度值
//带参数表示设置高度
$(selector).height(200);
//不带参数获取高度
$(selector).height();

②宽度操作width() :

// 作用:设置或获取匹配元素的宽度值
//带参数表示设置宽度
//不带参数获取宽度
$(selector).width(200);

css()获取高度和height获取高度的区别?

A:方式一,返回值number类型,例如:30
方式二,返回值string类型,例如:“30px”
区别:方式一常用在参与数学计算的情况。
 

9.2 坐标值操作

①offset()

// 作用:获取或设置元素相对于文档左上角的位置
// 无参数表示获取,返回值为:{left:num, top:num},值是相对于document的位置
$(selector).offset();
// 有参数表示设置,参数推荐使用数值类型
$(selector).offset({left:100, top: 150});

注意点:设置offset后,如果元素没有定位(默认值:static),则被修改为relative

②scrollTop()

、、作用:获取或者设置元素垂直方向滚动的位置
// 无参数表示获取偏移
$(selector).scrollTop();
 
// 有参数表示设置偏移,参数为数值类型
$(selector).scrollTop(100);

 ③scrollLeft()

 

// 作用:获取或者设置元素水平方向滚动的位置
$(selector).scrollLeft(100);

 对scrollTop的理解:

垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。

如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条,那么这个距离为0

以上这篇jQuery基础知识点总结(DOM操作)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
jQuery图片轮播插件——前端开发必看
May 31 #Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 #Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 #Javascript
基于jQuery实现点击列表加载更多效果
May 31 #Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 #Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 #Javascript
Bootstrap表单布局样式代码
May 31 #Javascript
You might like
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
用header 发送cookie的php代码
2007/03/16 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
python字典get()方法用法分析
2015/04/17 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
关于逃课的检讨书
2014/01/23 职场文书
监察建议书范文
2014/03/12 职场文书
Python find()、rfind()方法及作用
2022/12/24 Python
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS