jQuery 中DOM 操作详解


Posted in Javascript onJanuary 13, 2015

jQuery 中的 DOM 操作

DOM(Document Object Model—文档对象模型):一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件

DOM 操作的分类:

DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML

HTML DOM: 使用 JavaScript和 DOM 为 HTML文件编写脚本时, 有许多专属于 HTML-DOM的属性

CSS-DOM:针对于 CSS操作, 在 JavaScript中, CSS-DOM 主要用于获取和设置 style对象的各种属性

查找节点

查找节点:

查找元素节点:通过 jQuery 选择器完成.

查找属性节点:查找到所需要的元素之后, 可以调用 jQuery对象的 attr() 方法来获取它的各种属性值

创建节点

创建节点: 使用 jQuery 的工厂函数 $(): $(html);会根据传入的 html 标记字符串创建一个 DOM对象, 并把这个 DOM对象包装成一个 jQuery 对象返回.

注意:

动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;

当创建单个元素时,需注意闭合标签和使用标准的 XHTML 格式.例如创建一个<p>元素,可以使用 $(“<p/>”) 或 $(“<p></p>”),但不能使用 $(“<p>”) 或 $(“<P>”)

创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建

插入节点(1)

动态创建 HTML元素并没有实际用处, 还需要将新创建的节点插入到文档中,即成为文档中某个节点的子节点

jQuery 中DOM 操作详解

插入节点(2)

jQuery 中DOM 操作详解

以上方法不但能将新创建的 DOM元素插入到文档中, 也能对原有的 DOM元素进行移动.

删除节点

remove(): 从 DOM中删除所有匹配的元素, 传入的参数用于根据 jQuery表达式来筛选元素. 当某个节点用 remove()方法删除后, 该节点所包含的所有后代节点将被同时删除.这个方法的返回值是一个指向已被删除的节点的引用.

empty(): 清空节点 ?清空元素中的所有后代节点(不包含属性节点).

复制节点

clone(): 克隆匹配的 DOM元素, 返回值为克隆后的副本.但此时复制的新节点不具有任何行为.

clone(true): 复制元素的同时也复制元素中的的事件

替换节点

replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM元素

replaceAll(): 颠倒了的 replaceWith() 方法.

注意: 若在替换之前, 已经在元素上绑定了事件,替换后原先绑定的事件会与原先的元素一起消失

包裹节点

wrap(): 将指定节点用其他标记包裹起来.该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义.

wrapAll(): 将所有匹配的元素用一个元素来包裹.而 wrap() 方法是将所有的元素进行单独包裹.

wrapInner(): 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来.

属性操作

attr(): 获取属性和设置属性

当为该方法传递一个参数时,即为某元素的获取指定属性

当为该方法传递两个参数时,即为某元素设置指定属性的值

jQuery 中有很多方法都是一个函数实现获取和设置.如: attr(), html(), text(), val(), height(), width(), css()等.

removeAttr(): 删除指定元素的指定属性

设置和获取 HTML, 文本和值

读取和设置某个元素中的 HTML内容: html() . 该方法可以用于 XHTML,但不能用于 XML 文档

读取和设置某个元素中的文本内容: text().该方法既可以用于 XHTML 也可以用于 XML文档.

读取和设置某个元素中的值: val() ---该方法类似 JavaScript 中的 value属性. 对于文本框,下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框,则返回一个包含所有选择值的数组

Javascript 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 #Javascript
jQuery过滤选择器详解
Jan 13 #Javascript
jQuery入门介绍之基础知识
Jan 13 #Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 #Javascript
Web表单提交之disabled问题js解决方法
Jan 13 #Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 #Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 #Javascript
You might like
php实现最简单的MVC框架实例教程
2014/09/08 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
pyqt5中动画的使用详解
2020/04/01 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
学校安全教育月活动总结
2014/07/07 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
领导视察通讯稿
2015/07/18 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL