jQuery DOM基础操作

简介: jQuery DOM基础操作

前言

本文讲解了jQuery DOM 操作的基础,如果本文对你有所帮助请三连支持博主,你的支持是我更新的动力,先赞后看养成习惯。

DOM简介

文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。DOM 定义了访问 HTML 和 XML 文档的标准。DOM 可以把 HTML 看做是文档树,通过 DOM 提供的 API 可以对树上的节点进行操作。

一、查找节点

查找元素节点

var $li = $("ul li:eq(0)"); //获取<ul>里第一个<li>节点
var li_txt = $li.text(); //获取第一个<li>元素节点的文本内容

查找属性节点

使用 attr()方法来获取元素的各种属性的值。attr() 方法的参数可以是一个,也可以是两个。

var $pobj = $("p"); //获取<p>节点
var p_txt = $pobj.attr("title"); //获取<p>元素节点属性title
alert(p_txt); //打印title属性值

二、创建节点

创建元素节点

创建元素节点可以用 $(html)函数$(html) 方法会根据传入的 HTML 标记字符串,创建一个 DOM 对象,并将这个 DOM 对象包装成一个 jQuery 对象然后返回。

var $liobj = $("<li>创建一个新元素</li>"); //创建一个<li>元素

创建文本节点

创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用 append()等方法将它们添加到文档中。

var $liobj = $("<li>我是文本节点</li>");

创建属性节点

与创建文本节点大同小异,可以在创建元素节点时直接创建属性节点,然后使用 append()等方法将它们添加到文档中。

var $li = $("<li title='属性节点'></li>");

三、插入节点

常用的方法:

.append() 在每个匹配元素里面的末尾处插入参数内容。

$parent.append('<li>最后面</li>')

.appendTo() 将匹配的元素插入到目标元素的最后面。

删除后恢复
appendTo()
var $li=$('ul li:eq(2)').remove() 将它存放在变量中
$li.appendTo($('ul'))

.insertAfter() 在目标元素后面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。

$li_1$.insertAfter($li_2)// 内容.insertAfter(参考点) 元素集合的后面

.insertBefore() 在目标元素前面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。

$li_1$.insertBefore($li_2) // 内容.insertBefore(参考点) 元素集合的前面。

四、删除节点

如果文档中某一个元素多余,那么我们可以使用 jQuery 中的 remove() detach() 和empty() 方法删除节点。

.remove() 将匹配元素集合从 DOM 中删除,当我们想将元素自身移除时我们用.remove(),同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的 jQuery 数据。

$('ul').remove()// 删除ul

detach() 从 DOM 中去掉所有匹配的元素。.detach()方法和.remove()一样, 除了.detach() 保存所有 jQuery 数据而且和被移走的元素相关联。当需要移走一个元素,不久又将该元素插入 DOM 时,这种方法很有用。

var $li = $("ul").detach(); //删除元素

empty() 从 DOM 中移除集合中匹配元素的所有子节点。这个方法不接受任何参数。这个方法不仅移除子元素,同样移除元素里的文本。因为,元素里任何文本字符串都被看做是该元素的子节点。

$("ul li:eq(1)").empty(); //获取第2个li元素节点后,清除此元素里的内容,注意是元素里面

五、复制节点

复制节点可以通过 clone()方法来实现, 当 clone()中传递了参数 true 时,代表复制元素的同时复制其所绑定的元素。

$('ul  li').clone(true).appendTo('ul')   
true参数决定着你是否可以复制,复制出来的元素

六、替换节点

.replaceAll() 用集合的匹配元素替换每个目标元素。

.replaceWith() 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

.replaceAll() 和 .replaceWith() 功能一样,但是目标和源相反。

目录
相关文章
|
6月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
|
1月前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
46 0
|
2月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
1月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
17 0
|
4月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
33 0
|
5月前
|
JavaScript 前端开发 API
jQuery对象与DOM对象简介及相互转换
jQuery对象与DOM对象简介及相互转换
N..
|
6月前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
65 1
|
6月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
|
6月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例