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 Plupload上传插件的使用
Apr 19 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
无限级别菜单的实现
2006/10/09 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
python字典序问题实例
2014/09/26 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python打开windows应用程序的实例
2019/06/28 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
2015年事业单位工作总结
2015/04/27 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书