This article will summarize and share with you some DOM operations implemented using jQuery, including node creation, node insertion, deletion, copy and replacement, traversal and filtering, etc. I hope it will be helpful to everyone!
1. Create element node
There are several ways, which will be discussed later. It is common to directly describe the structure of this node through an HTML markup string and process it through the $() function, $("html structure")[Related recommendations: jQuery video tutorial】
$('<div></div>')
2. Create text nodes
Similar to creating element nodes, you can directly describe the text content
$('<div>我是文本节点</div>')
3. Create attribute nodes
The same way as creating element nodes
$("<div id='test' class='box'>我是文本节点</div>")1, .append(), .appendTo() *
| Description | |
|---|---|
| |
| to another, specified element collection |
.after()、.before() *
| Description | |
|---|---|
Specifies the element Add content after | |
Add content before the specified element |
、.prependTo() *
| prependTo( ) |
| 4, |
##Selector
| ##insertAfter() | |
|---|---|
| Insert content in front of the specified element |
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$(A).insertAfter(B); // 将A插入到B的后面
$(A).insertBefore(B); // 将A插入到B的前面</pre><div class="contentsignin">Copy after login</div></div><h2><strong>第03回：节点删除</strong></h2><p><strong>1、<code>.empty()该方法主要是用于清空指定元素的所有子节点，如： <div class="box"> <p>耀哥</p> </div> Copy after login 如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中。 // 通过empty处理 $('.hello').empty(); // 结果：<div class="box"></div> Copy after login 2、 移除元素自身，包括子节点、事件等信息。 // 通过remove处理 $('.btn').remove(); // 结果：节点不存在了,同时事件也会被销毁 Copy after login 3、 如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理。 detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。
当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据。 var li = $(".list li:eq(2)").detach();
setTimeout(() => {
$(".list").append(li);
}, 3000);Copy after login 第04回：节点复制与替换1、 克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆。 clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。 clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过 $("div").on('click', function() {//执行操作})
//clone处理一
$("div").clone() // 只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) // 结构、事件与数据都克隆Copy after login 2、 $(A).replaceWith(B); // 把A替换为B $(A).replaceAll(B); // 把B替换为A Copy after login 3、 如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个 wrap 方法。 <p>Hello, world!</p> Copy after login $('p').wrap('')
// 结果为：
/*
Copy after login 4、 该方法与wrap方法相反，unwrap方法将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。 5、 wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法，比如，页面上有两个p元素，如果要为两个p元素添加共有的一个父类div，则通过如下代码实现： $('p').wrapAll('<div></div>'); Copy after login 6、 如果要将集合中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，JQuery提供了一个wrapInner方法。我们来看例子： <div>Hello, world!</div> <div>Hello, world!</div> Copy after login $('div').wrapInner('');
// 结果为：
/*
Copy after login 第05回：节点遍历1、 jQuery是一个集合对象，如果想快速查找集合里面的第一级子元素，此时可以用 <div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>Copy after login Copy after login Copy after login Copy after login 代码如果是 $(".div").children() ，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。
该方法可以接受参数，用于筛选子元素，如 "$('.parent').children(.active)"，匹配子元素中类名为 2、.find() * find 与 children 类似，区别在于 children是父子关系查找，find是后代关系查找（包含父子关系）。 <div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>Copy after login Copy after login Copy after login Copy after login 代码如果是
3、 如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用 parent() 方法。因为是父元素，这个方法只会向上查找一级。 <div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>Copy after login Copy after login Copy after login Copy after login 查找ul的父元素 div, $(ul).parent() ，就是这样简单的表达 4、 jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用 parents() 方法。其实也类似 find 与 children 的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点。 <div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>Copy after login Copy after login Copy after login Copy after login 在li节点上找到祖辈元素div， 这里可以用 $("li").parents() 方法 5、 以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest() 方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法。 closest() 方法接受一个匹配元素的选择器字符串。从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。例如：在a元素中，往上查找所有的li元素，可以这样表达：$("a").closet("li')。
粗看 .parents() 和 .closest() 是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了
6、
7、.prev()、.prevAll() *
8、 该方法用于匹配当前元素的所有兄弟元素。 第 06 回：筛选1、 获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。 2、
3、 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。 4、 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'。 注意：、在jQuery 1.3中才对所有表达式提供了支持。在先前版本中，如果提供了复杂的表达式，比如层级选择器（比如 + , ~ 和 > ），始终会返回true 5、 从匹配元素的集合中删除与指定表达式匹配的元素 6、 通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象。 7、 Filter the set of matched elements to those elements that have matching selectors or descendant elements of the DOM element. (Learning video sharing: web front-end tutorial) The above is the detailed content of Summarize and share some DOM operations implemented using jQuery (collection). For more information, please follow other related articles on the PHP Chinese website!
Related labels：
source：juejin.cn
Previous article：Completely master the JavaScript precompilation process
Next article：What is Express middleware? How to use it in Node?
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Unable to send form data on Safari/Firefox iOS
This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...
From 2024-04-04 12:53:48
0
1
303
Related Topics
More>
|
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
