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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
JS定时关闭窗口的实例
May 22 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
js弹出对话框方式小结
Nov 17 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 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
ThinkPHP控制器详解
2015/07/27 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
python读取和保存视频文件
2018/04/16 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
python实现在一个画布上画多个子图
2020/01/19 Python
如何定义TensorFlow输入节点
2020/01/23 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
大二法学专业职业生涯规划范文
2014/02/12 职场文书
西式婚礼主持词
2014/03/13 职场文书
股东合作协议书
2014/04/14 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
详解Python中的for循环
2022/04/30 Python