jQuery 基础教程（四）之jQuery中的DOM操作

一、jQuery 中的 DOM 操作

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

（2）DOM 操作的分类:

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

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

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

二、查找节点

（1）查找元素节点:

通过 jQuery 选择器完成.

（2）查找属性节点:

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

四、创建节点

（1）创建节点:

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

（2）注意:

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

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

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

五、插入节点

（1）动态创建了 HTML 元素之后, 还需要将新创建的节点插入到文档中, 即成为文档中某个节点的子节点

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

（2）创建节点和插入节点示例

var newP =$("<p>武广高速铁路即将通车！</p>");
newP.insertAfter(“#chapter”); //将创建的newP元素插入到ID为#chapter的元素之后//或者
newP.appendTo(“body”); //插入到body元素里

六、删除节点

（1）remove()

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

（2）empty()

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

七、复制节点

（1）clone()

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

（2）clone(true)

复制元素的同时也复制元素中的的事件

八、替换节点

（1）replaceWith()

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

（2）replaceAll()

颠倒了的 replaceWith() 方法.

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

九、包裹节点

（1）wrap()

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

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

（3）wrapInner()

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

十、属性操作

（1）attr(): 获取html属性和设置属性

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

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

（2）jQuery 中有很多方法都是一个函数实现获取和设置.

如: attr(), html(), text(), val(), height(), width(), css() 等.

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

十一、样式操作

（1）获取 class 和设置 class

class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.

（2）追加样式

addClass()

（3）移除样式

removeClass() --- 从匹配的元素中删除全部或指定的 class

（4）切换样式

toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.

（5）判断是否含有某个样式

hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

十二、设置和获取 HTML, 文本和值

（1）读取和设置某个元素中的 HTML 内容

html() . 该方法可以用于 XHTML, 但不能用于 XML 文档

（2）读取和设置某个元素中的文本内容

text(). 该方法既可以用于 XHTML 也可以用于 XML 文档.

（3）读取和设置某个元素中的值

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

（4）val() 方法的两个练习

十三、常用的遍历节点方法

（1）取得匹配元素的所有子元素组成的集合

children(). 该方法只考虑子元素而不考虑任何后代元素.

（2）取得匹配元素后面紧邻的同辈元素的集合 (但集合中只有一个元素)

next()

（3）取得匹配元素前面紧邻的同辈元素的集合 (但集合中只有一个元素)

prev()

（4）取得匹配元素前后所有的同辈元素

siblings()

十四、CSS-DOM 操作

（1）获取和设置元素的样式属性

css()

获取和设置元素透明度 opacity 属性

（2）获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”);

（3）获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效

十五、jQuery 中的事件 -- 加载 DOM

在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用 $(document).ready() 方法.

十六、事件绑定

（1）对匹配的元素进行特定的事件绑定

bind()

（2）实例

十七、合成事件

（1）hover()

模拟光标悬停时间. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数.

（2）toggle()

用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个.

toggle() 的另一个作用: 切换元素的可见状态

十八、事件冒泡

（1）事件会按照 DOM 层次结构像水泡一样不断向上只止顶端

（2）解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.

十九、事件对象的属性

（1）事件对象

当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象就被销毁了.

（2）event.pageX, event.pageY

获取到光标相对于页面的 x, y 坐标.

二十、移除事件

（1）移除某按钮上的所有 click 事件

$(“btn”).unbind(“click”)

（2）移除某按钮上的所有事件:

$(“btn”).unbind();

（3）one()

该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次.

$('a').one("click",function(){alert('just one click and remove");return false;
});

jQuery 基础教程（四）之jQuery中的DOM操作相关推荐

【QT 基础教程四】QT中的控件与事件
概要:这期主要讲解Qt中的控件和事件的概念.然后,我还会简单介绍一些常见的控件以及事件. Qt控件是什么? Qt 控件又称组件或者部件,指用户看到的所有可视化界面以及界面中的各个元素.比如按钮.文本框 ...
python 游戏辅助lol_绝地助手_（Python基础教程之八）Python中的list操作
服务器软件大扫盲彩虹六号辅助有序索引(索引从0最先) 易变的异构的(列表中的项目不必是统一类型) 写为方括号之间的逗号分开值列表 listOfSubjects = ['physics', 'che ...
（转）jquery基础教程八 load方法及小技巧
首先我们看看手册上的描述 load(url, params, callback) 装入一个远程HTML内容到一个DOM结点. 注意:避免用装入的scripts脚本,装入脚本改用$.getScript. ...
jQuery 3教程(三)：jQuery集合
原文地址:jQuery 3教程(三):jQuery集合 Introduction jQuery选择器选择出来的结果很多时候是一个DOM元素集而非单个元素,jQuery可以灵活的访问和修改DOM元素集, ...
Spring Cloud Alibaba基础教程：Sentinel Dashboard中修改规则同步到Nacos
上一篇我们介绍了如何通过改造Sentinel Dashboard来实现修改规则之后自动同步到Apollo.下面通过这篇,详细介绍当使用Nacos作为配置中心之后,如何实现Sentinel Dashbo ...
jQuery——入门（四）JQuery 事件
jQuery--入门(四)JQuery 事件一.事件初探加载文档完成触发: window.onload = function(){} //js $(window).load(function( ...
jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...
jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
三、jQuery 中的 DOM 操作（超详细）
文章目录前言一. DOM 介绍二. 查找节点 2.1查找元素节点 2.2查找属性节点三. 创建节点 3.1.创建元素节点 3.2.创建文本节点 3.3.创建属性节点四.插入节点 4.1 DO ...

jQuery 基础教程（四）之jQuery中的DOM操作

jQuery 基础教程（四）之jQuery中的DOM操作相关推荐

最新文章

热门文章

jQuery 基础教程 （四）之jQuery中的DOM操作

jQuery 基础教程 （四）之jQuery中的DOM操作相关推荐

最新文章

热门文章

jQuery 基础教程（四）之jQuery中的DOM操作

jQuery 基础教程（四）之jQuery中的DOM操作相关推荐