jQuery中DOM操作原则实例分析


Posted in jQuery onAugust 01, 2019

本文实例讲述了jQuery中DOM操作原则。分享给大家供大家参考,具体如下:

一丶Get and Set in One(读写一体) 原则

为了更加易于使用,jQuery提供了简洁的DOM操作API,其方法往往是读写一体的。也就是说,某个方法既可用于读取操作,也可用于设置操作。如果没有为其传入表示值的参数,则表示获取操作,将返回获取到的数据;如果为其传入了表示值的参数,则表示设置操作,它将设置DOM元素指定属性的值。

示例代码

// 没有传入value参数,返回第一个匹配元素的value元素
var $a = $("a");
//只会取第一个匹配的
var $color = a.css("color");
//// 传入了value参数,设置所有匹配元素的color样式为"red"
$a.css("color", "red");

二丶Get first Set all(读取第一个,写操作所有) 原则

jQuery对象几乎所有的DOM操作方法都遵守”Get first Set all”原则。简而言之,假设当前jQuery对象匹配多个元素,如果使用jQuery对象的方法来获取数据(“读”数据),则只会获取第一个匹配元素的数据;如果使用jQuery对象的方法来设置元素数据(“写”数据),则会对所有匹配元素都进行设置操作

示例代码

var $lis = $("ul li"); // 匹配ul元素的所有后代li元素
var $className = $lis.attr("class"); // 只获取第一个匹配的li元素的class属性
$lis.attr("class", "left"); // 将所有匹配的li元素的class属性设为"left"

三丶链式编程风格

jQuery对象的所有实例方法,在没有特殊的返回需求的情况下,一般都会返回该jQuery对象本身(或者其它jQuery对象),因此我们可以继续调用返回的jQuery对象上的方法

示例代码

$("div") // 返回一个匹配所有div元素的jQuery对象
.find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象
.children() // 返回匹配这些ul元素中的所有子代元素的jQuery对象
.css("color", "red") // 为这些子代元素设置css样式"color: red,并返回当前对象本身
.hide(); // 隐藏这些子代元素,并返回当前对象本身

四丶智能DOM操作,静默容错

在JS原生DOM操作中,如果通过getElementById()getElementsByName()等方式获取不到对应的元素,那么将返回null,在null上访问属性或方法,将会抛出异常。

与此不同的是,jQuery在匹配不到对应元素时将返回一个空的jQuery对象,我们仍然可以调用jQuery对象的方法,而且并不会报错。因为jQuery会智能地处理这种情况。如果该方法用于获取数据,则返回nullundefined;如果该方法用于设置数据,则忽略设置操作,并返回该空对象本身;如果该方法用于筛选元素,则同样返回一个新的jQuery空对象

更多关于jQuery相关内容还可查看本站专题:《jQuery操作DOM节点方法总结》、《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jquery实现图片轮播器
May 23 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 #jQuery
jquery.pager.js分页实现详解
Jul 29 #jQuery
jquery.pager.js实现分页效果
Jul 29 #jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 #jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 #jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 #jQuery
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
Jul 22 #jQuery
You might like
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
python利用微信公众号实现报警功能
2018/06/10 Python
python实现图片插入文字
2019/11/26 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Python 如何批量更新已安装的库
2020/05/26 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
双拥工作宣传标语
2014/06/26 职场文书
同学聚会通知短信
2015/04/20 职场文书
重温入党誓词主持词
2015/06/29 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python