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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
Python调用C++程序的方法详解
2017/01/24 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
销售总经理岗位职责
2014/03/15 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
校车司机安全责任书
2015/05/11 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python