jQuery DOM节点操作总结

开发工具与关键技术：vs2015 C#

作者：萧氏萧然

撰写时间：2020年10月 8日

DOM节点的创建

DOM创建节点及节点属性

JavaScript

创建流程比较简单，大体如下：

创建节点(常见的：元素、属性和文本)

添加节点的一些属性

加入到文档中

流程中涉及的一点方法：

创建元素：document.createElement

设置属性：setAttribute

添加文本：innerHTML

加入文档：appendChild

querySelector()
方法返回文档中匹配指定 CSS 选择器的一个元素

var body =
document.querySelector(‘body’); 查找body元素

addEventListener() 方法用于向指定元素添加事件句柄

$(“body”).click(function () {

});

document.getElementById(“leftDiv”).addEventListener(‘click’,
function () {

var rightdiv =document.createElement(‘div’);

var rightaaron =
document.createElement(‘div’);

给2个div设置不同的属性

rightdiv.setAttribute(‘class’,
‘right’);

rightaaron.className =
“aaron”;

rightaaron.innerHTML = “动态创建DIV元素节点”;

2个div合并成包含关系

rightdiv.appendChild(rightaaron);

绘制到页面body

body.appendChild(rightdiv);

});

jQuery节点创建与属性的处理

上面通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程

创建元素节点：

可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$(“html结构”)

$("

")
建为本节点：

与创建元素节点类似，可以直接把文本内容一并描述

$(“

我是文本节点

”)

创建为属性节点：
创建元素节点同样的方式

$(“

我是文本节点

”)

我们通过jQuery把上一面的代码改造一下，如下

一条一句就搞定了，跟写HTML结构方式是一样的

$(“

动态创建DIV元素节点

”)

查看下面代码效果时，请注释上面JS的代码，取消下面代码的注释

var $body = $(“body”);

$("#leftDiv").on(‘click’,
function () {

通过jQuery生成div元素节点

var div = $(“

动态创建DIV元素节点

”);

将div添加到body内

$body.append(div);

});

$("#leftDiv").click(function () {

var $body =
$(“body”);

var div =
$(“

动态创建DIV元素节点

”);

var de = $(“

asdljfaskdlfs

”);

$body.append(div).append(de);

;

DOM节点的插入

DOM内部插入append()与appendTo()
ppend(content|fn):向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

appendTo(content):把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中

简单的总结就是：

.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同

append()前面是被插入的对象，后面是要在对象内插入的元素内容

appendTo()前面是要插入的元素内容，而后面是被插入的对象

DOM内部插入prepend()与prependTo()

在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo

prepend(content):向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式。

prependTo(content):把所有匹配的元素前置到另一个、指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

btnPrepend按钮的点击事件

$("#btnPrepend").click(function () {

.prepend()方法添加

$("#content").prepend(“

这是一个段落标签

”);

});

btnPrependTo按钮的点击事件

$("#btnPrependTo").click(function () {

.prependTo()方法添加
$("<pclass{=}^{\prime }setFon{t}^{\prime }>这是一个段落标签</p>").prependTo($("#content"));

});

DOM外部插入after()与before()

after(content|fn):在每个匹配的元素之后插入内容。

参数说明：content 插入到每个目标后的内容 function 函数必须返回一个html字符串。

before(content|fn):在每个匹配的元素之前插入内容。

参数说明：content 插入到每个目标后的内容 function 函数必须返回一个html字符串。

btnAfter按钮的点击事件

$("#btnAfter").click(function
() {

$(A).before(B)

$("#demo").after(“

DOM外部插入after()与before()

”);

});

btnBefore按钮的点击事件

$("#btnBefore").click(function ()
{

$(A).before(B)

$("#demo").before(“

DOM外部插入after()与before()

”);

});

DOM外部插入insertAfter()与insertBefore()

insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。

参数说明：content 用于匹配元素的jQuery表达式。

insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

参数说明：content 用于匹配元素的jQuery表达式。

DOM节点删除之empty和remove

empty()删除匹配的元素集合中所有的子节点。

remove([expr])从DOM中删除所有匹配的元素。

参数说明：expr 用于筛选元素的jQuery表达式

要用到移除指定元素的时候，jQuery提供了empty()与remove([expr])二个方法，两个都是删除元素，但是两者还是有区别

empty方法

严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

empty不能删除自己本身这个节点

remove方法

该节点与该节点所包含的所有后代节点将同时被删除

提供传递一个筛选的表达式，删除指定合集中的元素

btnEmpty按钮的点击事件

$("#btnEmpty").click(function () {

empty()

$("#leftDiv").empty();//移除左边div内的元素

});

btnEmpty按钮的点击事件

$("#btnRemove").click(function () {

empty()

$("#rightDiv").remove();//remove移除整个节点

});

btnTest按钮的点击事件

$("#btnTest").click(function () {

remove表达式参数

找到所有p元素中，包含了3的元素

这个也是一个过滤器的处理

$(“p”).remove(":contains(2)");

});

DOM节点删除之保留数据的删除操作detach()

detach([expr])

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

var p;

$("#bt1").click(function () {

if (!$("p").length)return;删除元素p的时候先判断$(“p”).length是否为0.(!0 非零即为真)

通过detach方法删除元素

只是页面不可见，但是这个节点还是保存在内存中

数据与事件都不会丢失

p = $(“p”).detach();

});

$("#bt2").click(function () {

把p元素在添加到页面中

事件还是存在

$(“body”).append§;

);

筛选—过滤

eq(index|-index):获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。

类似的有get(index),不过get(index)返回的是DOM对象。

参数说明：index 一个整数，指示元素基于0的位置,这个元素的位置是从0算起。

-index 一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(-1算起)

first() 获取第一个元素

last()获取最后个元素

hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true

这其实就是 is("." + class)。

filter(expr|obj|ele|fn) 筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

$("#myul
li").eq(1).css(‘color’, ‘red’);

• CSS
• 字体颜色红色

      $("#myul
  

  li").eq(-2).css(‘color’, ‘blue’);

• CSS
• 字体颜色蓝色

  $(“li”).first().css(‘font-size’, 20); 设置字体大小

  $(“li”).last().css(‘font-size’, 20); 设置字体大小