jQuery 中的 DOM 操作


Posted in Javascript onApril 26, 2016

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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 Javascript
详解AngularJS controller调用factory
May 19 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 #Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 #Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 #Javascript
第一章之初识Bootstrap
Apr 25 #Javascript
第二章之Bootstrap 页面排版样式
Apr 25 #Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 #Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 #Javascript
You might like
PHP+DBM的同学录程序(3)
2006/10/09 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
php 设计模式之 单例模式
2008/12/19 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python如何查看微信消息撤回
2018/11/27 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
教师求职推荐信范文
2013/11/20 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
留学推荐信怎么写
2014/01/25 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
高中同学会活动方案
2014/08/14 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
冰峪沟导游词
2015/02/09 职场文书
小学教育见习总结
2015/06/23 职场文书
Java设计模式之代理模式
2022/04/22 Java/Android
使用Python开发冰球小游戏
2022/04/30 Python
Hive HQL支持2种查询语句风格
2022/06/25 数据库