第8章 jQuery中的DOM操作-任务3 制作电子邮件删除效果

jQuery笔记——DOM操作在 JavaScript 中，DOM 不但内容庞⼤繁杂，⽽且我们开发的过程中需要考虑更多的兼容性、扩展性。

在 jQuery 中，已经将最常⽤的 DOM 操作⽅法进⾏了有效封装，并且不需要考虑浏览器的兼容性对元素内容的获取和修改可以使⽤ html()和 text()⽅法获取内部的数据。

html()⽅法可以获取或设置 html 内容，text()可以获取或设置⽂本内容$('#box').html(); //获取 html 内容$('#box').text(); //获取⽂本内容，会⾃动清理 html 标签$('#box').html('<em>jQuery</em>'); //设置 html 内容$('#box').text('<em>jQuery</em>'); //设置⽂本内容，会⾃动转义 html 标签注意：当我们使⽤ html()或 text()设置元素⾥的内容时，会清空原来的数据。

⽽我们期望能够追加数据的话，需要先获取原本的数据$('#box').html($('#box').html() + '<em>jQuery</em>'); //追加数据如果元素是表单的话，jQuery 提供了 val()⽅法进⾏获取或设置内部的⽂本数据$('input').val(); //获取表单内容$('input').val('jQuery'); //设置表单内容元素属性操作jQuery 可以对元素本⾝的属性进⾏操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性$('div').attr('title'); //获取属性的属性值$('div').attr('title', 'Hello jQuery'); //设置属性及属性值$('div').attr('title', function () { //通过匿名函数返回属性值return 'Hello jQuery';});$('div').attr('title', function (index, value) { //可以接受两个参数return value + (index+1) + '，Hello jQuery';});注意：attr()⽅法⾥的 function() {}，可以不传参数。

简述jquery中插入节点修改节点删除节点复制节点的方法jQuery中提供了一些方法用于操作DOM节点，包括插入节点、修改节点、删除节点、复制节点等。

下面将对这些方法进行简述。

1. append(：向指定的元素内部的最后添加内容。

可以是HTML字符串、DOM元素、DOM元素数组、jQuery对象。

示例：```javascript$("body").append("<p>这是一个段落</p>");```2. prepend(：向指定的元素内部的最前添加内容，用法与`append(`类似。

示例：```javascript$("body").prepend("<p>这是一个段落</p>");```3. after(：在指定的元素后面添加内容。

示例：```javascript$("p").after("<p>这是一个新的段落</p>");```4. before(：在指定的元素前面添加内容。

示例：```javascript$("p").before("<p>这是一个新的段落</p>");```5. insertAfter(：将指定的元素插入到目标元素的后面。

示例：```javascript$("<p>这是一个新的段落</p>").insertAfter("p");```6. insertBefore(：将指定的元素插入到目标元素的前面。

示例：```javascript$("<p>这是一个新的段落</p>").insertBefore("p");```1. text(：设置或返回元素的文本内容。

jquery删除方法在 jQuery 中，删除操作通常通过使用 `.remove()` 方法来实现。

以下是一些常见的使用示例：1. 删除特定元素：```javascript$("element-id").remove();```这将删除具有特定 ID 的元素。

2. 删除特定类别的元素：```javascript$(".element-class").remove();```这将删除所有具有特定类别的元素。

3. 删除所有匹配的元素：```javascript$(selector).remove();```这将删除所有与给定选择器匹配的元素。

4. 删除元素及其子元素：如果你想删除一个元素以及其所有子元素，你可以使用 `.empty()` 方法，然后再使用 `.remove()` 方法：```javascript$("element-id").empty().remove();```5. 在删除操作后进行其他操作：你还可以在 `.remove()` 方法后面链式调用其他方法，例如 `.css()`：```javascript$("element-id").remove().css("display", "none");```这将首先删除具有特定 ID 的元素，然后将其隐藏。

6. 删除元素的某个属性：你可以使用 `.removeAttr()` 方法来删除元素的某个属性：```javascript$("element-id").removeAttr("attribute-name");```这将从具有特定 ID 的元素中删除指定的属性。

7. 删除表单元素的值：要删除表单元素的当前值，可以使用 `.val('')` 方法：```javascript$("element-id").val('');```这将清空具有特定 ID 的表单元素的值。

jQueryDOM操作DOM操作的分类：DOM CORE（核心）、HTML-DOM和CSS-DOM1. DOM CoreDOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。

它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML.Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法，都是dom core的组成部分。

2. HTML_DOM使用HTML_DOM来获取表单对象的方法Document.forms使用HTML_DOM来获取某元素的src属性的方法Element.src3. CSS_DOMCSS_DOM是针对CSS的操作。

在javascript中，CSS-DOM技术的主要作用是获取和设置style对象的各个属性。

通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。

Element.style.color = “red”;jQuery作为javascript库，继承并发扬了javascript对DOM对象的操作的特性，使开发人员能方便的操作DOM对象。

元素的操作可以按下列来分类：查找、创建、插入、删除、复制、包裹、属性操作、查找：利用上面的jQuery选择器创建：主要包括创建元素节点和创建文本节点、创建属性节点。

（1）创建元素节点 $(html)Var aa=$("<li></li>");（2）创建文本节点 Var aa=$("<li>你好</li>");（3）创建属性节点 Var aa=$("<li title='bbb'>你好</li>");插入：光动态的创建节点没上面用处，还要能够将创建的动态插入。

详解jQuery中的DOM操作⼤致介绍 jQuery作为JavaScript库，继承并发扬了JavaScript对DOM对象操作的特性，使开发⼈员能⽅便的操作DOM对象。

jQuery中的DOM操作看看DOM操作都有哪些逐⼀来看先写⼀份HTML代码，后⾯的代码将操作这份HTML代码<p title="选择你最喜欢的⽔果">你最喜欢的⽔果？</p><ul><li title="苹果">苹果</li><li title="橘⼦">橘⼦</li><li title="菠萝">菠萝</li></ul>查找节点1、查找元素节点查找节点可以⽤各种各样的选择器来查找$('ul li');2、查找属性节点可以⽤attr()⽅法，参数是⼀个的时候是查找属性，两个的时候是设置属性console.log($('li:eq(2)').attr('title'));//菠萝创建节点1、创建元素节点var $li_1 = $('<li></li>');2、创建⽂本节点var $li_1 = $('<li>⾹蕉</li>');3、创建属性节点var $li_1 = $('<li title="⾹蕉">⾹蕉</li>');插⼊节点1、向每个匹配的元素追加内容$('li:eq(1)').append('<p>⾹蕉</p>');2、将匹配的元素追加到指定元素中$('<p>⾹蕉</p>').appendTo('li:eq(1)');这两种⽅法都是进⾏同⼀个操作，prepend()和prependTo()与上述⽅法类似，不同之处就是在元素内部前插⼊内容3、在每个匹配的元素之后插⼊内容$('li:eq(1)').after('<p>⾹蕉</p>');4、将匹配的元素插⼊到指定的元素后⾯$('<p>⾹蕉</p>').insertAfter('li:eq(1)');这两种⽅法都是进⾏同⼀个操作，before()和insertBefore()与上述⽅法类似，不同之处就是在元素前插⼊内容删除节点1、remove()⽅法当某个节点⽤了remove()⽅法之后，该节点所包含的所有后代节点都将同时删除。

jQuery中DOM节点的删除⽅法总结（超全⾯）前⾔相信⼤家都知道，要移除页⾯上节点是开发者常见的操作，jQuery提供了⼏种不同的⽅法⽤来处理这个问题。

下⾯本⽂就进⾏⼀个详细的介绍，感兴趣的朋友们⼀起来看看吧。

⼀、emptyempty 顾名思义，清空⽅法，但是与删除⼜有点不⼀样，因为它只移除了指定元素中的所有⼦节点。

这个⽅法不仅移除⼦元素（和其他后代元素），同样移除元素⾥的⽂本。

因为，根据说明，元素⾥任何⽂本字符串都被看做是该元素的⼦节点。

如果我们通过empty⽅法移除⾥⾯div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM 中，通过empty移除了当前div元素下的所有p元素但是本⾝id=test的div元素没有被删除。

$("button").on('click', function() {//通过empty移除了当前div元素下的所有p元素//但是本⾝id=test的div元素没有被删除$("#test").empty()})⼆、removeremove与empty⼀样，都是移除元素的⽅法，但是remove会将元素⾃⾝移除，同时也会移除元素内部的⼀切，包括绑定的事件及与该元素相关的jQuery数据。

例如⼀段节点，绑定点击事件，如果不通过remove⽅法删除这个节点其实也很简单，但是同时需要把事件给销毁掉，这⾥是为了防⽌"内存泄漏"，所以前端开发者⼀定要注意，绑了多少事件，不⽤的时候⼀定要记得销毁。

通过remove⽅法移除div及其内部所有元素，remove内部会⾃动操作事件销毁⽅法，所以使⽤使⽤起来⾮常简单 remove表达式参数： remove⽐empty好⽤的地⽅就是可以传递⼀个选择器表达式⽤来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点，我们可以通过$()选择⼀组相同的元素，然后通过remove（）传递筛选的规则，如：$("p").filter(":contains('3')").remove()。

学习JQuery的DOM操作
今天为大家介绍的是JQuery的DOM操作，希望大家学业有成，工作顺利
 JQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。

下面的DOM操作将围绕上面的DOM树进行学习JQueryDOM操作。

 一、查--查找DOM节点
 查找节点非常容易，使用选择器就能轻松完成各种查找工作。

例：查找元素节点p返回p内的文本内容$(“p”).text();例：查找元素节点p的属性返回属性名称对应的属性值$(“p”).attr(“title”),返回p的属性title的值。

 二、建--新建DOM节点
 1、创建元素节点
 创建元素节点并且把节点作为
 元素的子节点添加到DOM节点树上。

先创建元素点，创建元素节点使用Jquery的工厂函数$()来完成，格式如下：$(html),该方法会根据传入的html 字符串返回一个DOM对象，并将DOM对象包装成一个JQuery对象后返。

jquery对dom的操作常用方法整理_Jquery对dom的操作也是很总要的。

1.三个简洁有用的用于 DOM 操作的 jQuery 方法：· text() - 设置或返回所选元素的文本内容· html() - 设置或返回所选元素的内容（包括 HTML 标记）· val() - 设置或返回表单字段的值2.attr()猎取属性。

当然这两也是可以自己设置值来修改的，3.对html内容的添加。

添加新的 HTML 内容我们将学习用于添加新内容的四个 jQuery 方法：· append() - 在被选元素的结尾插入内容· prepend() - 在被选元素的开头插入内容· after() - 在被选元素之后插入内容· before() - 在被选元素之前插入内容4.删除元素/内容如需删除元素和内容，一般可用法以下两个 jQuery 方法：· remove() - 删除被选元素（及其子元素）· empty() - 从被选元素中删除子元素5.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法。

我们将学习下面这些：· addClass() - 向被选元素添加一个或多个类· removeClass()- 从被选元素删除一个或多个类· toggleClass()- 对被选元素进行添加/删除类的切换操作· css() - 设置或返回样式属性例子$("h1,h2,p").addClass("blue");首先我们知道当对多种标签添加样式的时候我们用‘，'分开。

Blue肯定是一个设置好的.Blue{}类选择器$("h1,h2,p").removeClass("blue");$("h1,h2,p").toggleClass("blue");有样式就会移除，没样式就会添加6.设置多个 CSS 属性如需设置多个 CSS 属性，请用法如下语法：css({"propertyname":"value","propertyname":"value", ...});7.jQuery 尺寸方法jQuerywidth() 和height() 方法width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

jQuery中DOM节点操作⽅法⼤全例如：向所有段落中追加⼀些HTML标记。

<p>I would like to say: </p>$("p").append("<b>Hello</b>");[ <p>I would like to say: <b>Hello</b></p> ]appendTo()：这个⽅法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，⽽是把A追加到B中例如：把所有段落追加到ID值为foo的元素中。

<p>I would like to say: </p><div></div><div></div>$("p").appendTo("div");<div><p>I would like to say: </p></div><div><p>I would like to say: </p></div>prepend()：向每个匹配的元素内部前置内容例如：向所有段落中前置⼀些HTML标记代码。

<p>I would like to say: </p>$("p").prepend("<b>Hello</b>");[ <p><b>Hello</b>I would like to say: </p> ]prependTo(content)：把所有匹配的元素前置到另⼀个、指定的元素元素集合中。

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

jq操作dom节点的方法`jq` 是一个轻量级且灵活的命令行 JSON 处理器。

它主要用于处理和操作JSON 数据，而不是用于操作 DOM 节点。

`jq` 的语法和操作方式与JavaScript 的数组和对象操作类似，但并不直接支持 DOM 操作。

如果你想在命令行中处理 JSON 数据，可以使用 `jq` 来提取、过滤、排序和格式化 JSON 数据。

以下是一些常见的 `jq` 操作示例：1. 提取字段：```bashecho '{"name": "John", "age": 30}' jq '.name'```输出：```arduino"John"```2. 过滤数组：```bashecho '[{"name": "John"}, {"name": "Jane"}]' jq 'map(select(.name == "John"))'```输出：```arduino[{"name":"John"}]```3. 对数组进行排序：```bashecho '[{"name": "John"}, {"name": "Jane"}]' jq 'sort_by(.name)'```输出：```css[{"name":"Jane"},{"name":"John"}]```4. 格式化输出：```bashecho '{"name": "John", "age": 30}' jq --indent 2 '.name + ": " + .age' ```输出：```makefile"name":"John": 30```这些是 `jq` 的一些基本操作示例，可以帮助你处理 JSON 数据。

jQuery添加删除DOM元素⽅法详解本⽂实例分析了jQuery添加删除DOM元素的⽅法。

分享给⼤家供⼤家参考，具体如下：介绍DOM是Document Object Modeule的缩写，⼀般来说，DOM操作分成3个⽅⾯。

1、DOM CoreDOM Core并不专属于javascript，任何⼀种⽀持DOM的程序设计语⾔都可以使⽤它，⽤途也远不⽌仅限于⽹页，也可以⽤来处理任何⼀种使⽤标记语⾔编写出来的⽂档，如XML。

例如：document,getElementsByTagName("form");//使⽤DOM Core来获取表单对象的⽅法。

2、HTML-DOM在使⽤Javascript和DOM为HTML⽂件编写脚本时，有许多属于HTML-DOM的属性，HTML-DOM的出现甚⾄⽐DOM Core还要早，他提供了⼀些更简明的记号来描述各种HTML元素的属性。

例如：复制代码代码如下:document.forms //HTML-DOM提供了⼀个forms对象。

PS:可以看出，获取对象、属性即可以⽤DOM Core来实现民，也可以⽤HTML-DOM实现。

3、CSS-DOMCSS-DOM是针对CSS的操作,在javascript中，CSS-DOM主要的作⽤是获取和设置style对象的各种属性，由此达到⽹页呈现出各种不同的效果.例如：复制代码代码如下:element.style.color="red";//设置某元素的字体颜⾊的⽅法。

常⽤⽅法1.查找元素节点复制代码代码如下:var $li = $("ul li:eq(0)");//获取ul标记下的第⼀个li,也可以写成 $("#ulID li:eq(0)");2.查找元素属性利⽤jquery的attr()⽅法来获取元素的各种属性的值，attr()⽅法的参数可以是⼀个，也可以是两个。

jQuery删除替换DOM元素的⼏种⽅式删除删除操作⾮常简单，直接在结果集后链式调⽤remove()⽅法即可。

例如，要删除以下html脚本中所有的a元素，直接通过复制代码代码如下:$('a'.remove();就可以做到了。

复制代码代码如下:<h3>Anchors</h3><a href="#" class="remove">Anchor Element</a><a href="#">Anchor Element</a><a href="#" class="remove">Anchor Element</a>当然也可以通过向remove传参的形式来过滤选择结果，然后再执⾏remove操作。

复制代码代码如下:$('a').remove('.remove');需要注意的是remove操作并不会把符合条件的元素从结果集中删除，所以理论上可以继续操作被"删除"掉的元素remove操作不但会“删除”元素与所有元素相关的数据也会被删除(event handlers、internally cached data) 替换如果想要把class为remove的li元素替换为<li>removed</li>，可以使⽤以下两种等价的⽅法复制代码代码如下:$('li.remove').replaceWith('<li>removed</li>);$('<li>removed</li>;).replaceAll('li.remove');。

JavaScriptDOM元素常见操作详解【添加、删除、修改等】本⽂实例讲述了JavaScript DOM元素常见操作。

分享给⼤家供⼤家参考，具体如下：DOM概念DOM（Document Object Model）：⽂档对象模型。

通过开发者⼯具的Elements标签页可以查看通过开发者⼯具的Sources标签页也可以观察到整个⽂档是有⼀系列节点整个⽂档是由⼀系列节点对象组成的⼀棵树。

节点（Node）包括元素节点（1）、属性节点（2）、⽂本节点（3）(1..2..3..代表节点类型)_var th1= document.getElementById("th1");alert(th1.nodeType);alert(th1.nodeName);alert(th1.nodeValue);th1代表⼀个元素节点（nodeType=1），nodeName就是标签名（th），元素节点的nodeValue=null。

var attr1=th1.getAttributeNode("name");alert(attr1.nodeType);alert(attr1.nodeName);alert(attr1.nodeValue);getAttributeNode⽅法是获取元素的属性节点，此时输出的节点类型为属性节点（2），节点名称就是属性名（name），节点值就是属性值（sex）var txtl = th1.firstChild；alert(txtl.nodeType);alert(txtl.nodeName);alert(txtl.nodeValue)txt1是⼀个⽂本节点（3），节点名称固定就是#text，节点值就是⽂本内容。

获取元素（1）getElementByid根据元素的id属性来获取元素，获取到的是⼀个元素。

（2）getElementsByTagName根据标签名来获取元素，结果是⼀个元素集合。

JQueryDOM操作（属性操作样式操作⽂档过滤）jQuery——⼊门（三）JQuery DOM操作（属性操作/样式操作/⽂档过滤）⼀、DOM属性操作1、属性(1)、attr() ⽅法语法：$(selector).attr(name|property|key, value|fn)设置或获取被选元素的属性值，设置多个值时，与css()⽅法⽤法相似使⽤attr()函数来操作元素的属性，包含查询、赋值name：属性名称key，function（index,attr）：属性名称，函数赋值操作案例1：name描述：返回⽂档中所有图像的src属性值。

JQuery代码：$("img").attr("src");案例2：property描述：为所有图像设置src和alt属性JQuery代码：$("img").attr({scr："test.jpg"，alt："Test Image"});案例3：key,value 描述：为所有图像设置src属性JQuery代码：$("img").attr("src"，"test.jpg");案例4：key,回调函数描述：把src属性的值设置为title属性的值JQuery代码：$("img").attr("title",function(){return this.src});(2)、removeAttr() ⽅法语法：$(selector).removeAttr(name);删除匹配元素的name属性（从每⼀个匹配的元素中删除⼀个属性）name：要删除的属性名称案例：将⽂档中图像的src属性删除HTML代码：<img src = "test.jpg">JQuery：$("img").removeAttr("src");输出结果：<img />(3)、prop() ⽅法语法：$(selector).prop(name|property|key, value);获取或者设置匹配元素selector的属性值。