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 相关文章推荐
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
vue+iview实现手机号分段输入框
Mar 25 Vue.js
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生成静态页的实现方法
2013/05/10 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
详解Python3.1版本带来的核心变化
2015/04/07 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python基本语法练习实例
2017/09/19 Python
python 自动重连wifi windows的方法
2018/12/18 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
PyQt5实现登录页面
2020/05/30 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
flask框架中的cookie和session使用
2021/01/31 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
小学运动会通讯稿
2015/07/18 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
同乡会致辞
2015/07/30 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
亲情作文之母爱
2019/09/25 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
一文简单了解MySQL前缀索引
2022/04/03 MySQL
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python