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 ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery 移除事件的方法
Jun 20 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
PHP中动态HTML的输出技术
2006/10/09 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php实现监听事件
2013/11/06 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php for 循环使用的简单实例
2016/06/02 PHP
JavaScript创建对象的写法
2013/08/29 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python使用Tesseract库识别验证
2018/03/21 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
python 基于opencv操作摄像头
2020/12/24 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
公司门卫管理制度
2014/02/01 职场文书
党员承诺书怎么写
2014/05/20 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
初中信息技术教学计划
2015/01/22 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
春节随笔
2015/08/15 职场文书
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python