JQuery学习笔记(3)JQuery中的DOM操作

墨蓝 2021-11-05 12:20 348阅读 0赞

**JQuery****中的****DOM****操作**

**引子**

**       DOM: Document Object Model****，文档对象模型，一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。**

**1****．****DOM****操作的分类**

1.1 DOM Core（核心）

适用任何适用标记语言编写出来的文档，如HTML、XML。

JavaScript中的getElementId(), getElementsByTabName(),getAttribute()和setAttribute()等都是DOM Core的组成部分

1.2 HTML-DOM

提供简明的记号来描述各种HTML元素的属性。    如：

document.forms//

element.src;//获取元素的src属性

1.3 CSS-DOM

CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是用来获取和设置style对象的各种属性。

**2. JQuery****中的DOM操作**

2.1 查找节点

-1. 查找元素节点

$(“ul li:eq(1)”);//获取ul下第2个li节点

-2.  查找属性节点

$(“p”).attr(“title”);//获取p节点的title属性

2.2 创建节点

-1. 创建元素节点

//$(html)创建一个DOM对象，并包装成一个JQuery对象返回

var $liTag=$(“<li></li>”);

$(“ul”).append($liTag);//用append方法将新元素插入文档中

-2. 创建文本节点

var $liText=$(“<li>apple</li>”);

$(“ul”).append($liText);

-3. 创建属性节点—同文本节点一样，随元素节点一起创建

$(“<li title=’fruit’>apple</li>”)//

2.3 插入节点

<table> 
 <tbody> 
 <tr> 
 <td> 方法 </td> 
 <td> 描述 </td> 
 <td> 示例 </td> 
 </tr> 
 <tr> 
 <td> A.append(B) </td> 
 <td> A的内部追加内容B (追加到内容后部) </td> 
 <td> HTML：&lt;p&gt;Hello &lt;/p&gt; JQuery: $(“p”).append(“&lt;b&gt;World&lt;/b&gt;”) Result: &lt;p&gt;Hello &lt;b&gt;World&lt;/b&gt;&lt;/p&gt; </td> 
 </tr> 
 <tr> 
 <td> A.appendTo(B) </td> 
 <td> 将A追加到B的内容后面 </td> 
 <td> HTML:&lt;p&gt;Hello &lt;/p&gt; JQuery: $(“&lt;b&gt;World&lt;/b&gt;”).appendTo(“p”) Result: &lt;p&gt;Hello &lt;b&gt;World&lt;/b&gt;&lt;/p&gt; </td> 
 </tr> 
 <tr> 
 <td> A.prepend(B) </td> 
 <td> 在A的内容前面追加B </td> 
 <td> HTML：&lt;p&gt;World&lt;/p&gt; JQuery: $(“p”).prepend(“&lt;b&gt;Hello &lt;/b&gt;”) Result: &lt;p&gt;&lt;/b&gt;Hello &lt;/b&gt;World&lt;/p&gt; </td> 
 </tr> 
 <tr> 
 <td> A.prependTo(B) </td> 
 <td> 将A追加到B内容的前面 </td> 
 <td> HTML：&lt;p&gt;World&lt;/p&gt; JQuery: $(“&lt;b&gt;Hello &lt;/b&gt;”).prependTo(“p”) Result: &lt;p&gt;&lt;/b&gt;Hello &lt;/b&gt;World&lt;/p&gt; </td> 
 </tr> 
 <tr> 
 <td> A.after(B) </td> 
 <td> 在A元素后面插入B </td> 
 <td> HTML：&lt;p&gt;Hello &lt;/p&gt; JQuery: $(“p”).after(“&lt;b&gt;World&lt;/b&gt;”) Result: &lt;p&gt;Hello&lt;/p&gt;&lt;b&gt;World&gt;&lt;/b&gt; </td> 
 </tr> 
 <tr> 
 <td> A.insertAfter(B) </td> 
 <td> 将A插入到B元素的后面 </td> 
 <td> HTML：&lt;p&gt;Hello &lt;/p&gt; JQuery: $(“&lt;b&gt;World&lt;/b&gt;”).insertAfter(“p”) Result: &lt;p&gt;Hello&lt;/p&gt;&lt;b&gt;World&gt;&lt;/b&gt; </td> 
 </tr> 
 <tr> 
 <td> A.before(B) </td> 
 <td> 在A元素的前面插入B </td> 
 <td> HTML：&lt;b&gt;World&lt;/b&gt; JQuery: $(“b”).before(“&lt;p&gt;Hello &lt;/p&gt;”) Result: &lt;p&gt;Hello&lt;/p&gt;&lt;b&gt;World&gt;&lt;/b&gt; </td> 
 </tr> 
 <tr> 
 <td> A.insertBefore(B) </td> 
 <td> 将A插入到B元素的前面 </td> 
 <td> HTML：&lt;b&gt;World&lt;/b&gt; JQuery: $(“&lt;p&gt;Hello &lt;/p&gt;”).insertBefore(“b”) Result: &lt;p&gt;Hello&lt;/p&gt;&lt;b&gt;World&gt;&lt;/b&gt; </td> 
 </tr> 
 </tbody> 
</table>

2.4 删除节点

-1. remove()方法

$(“ul li:eq(1)”).remove();//删除ul下的第2个li元素

当某个节点用remove()方法删除后，该节点所包含的所有后代节点都将被删除。这个方法的返回值是被删除节点的一个引用，因此，可以在后面再使用这些元素。

$(“ul li”).remove(“li\[title=apple\]”);//传递参数选择性删除元素

-2. empty()方法

empty采用的是清空节点，它能清空元素内容及其所有的后代节点。元素本身的标签依据存在，不是严格的删除节点。

2.5 复制节点

-1. clone()方法

$("ul li").click(function()\{

$(this).clone().appendTo("div ul");

\})//当点击ul下的li元素时，将其clone到div下的ul下。

-2. clone(true)方法

参数true表示复制该节点的同时也复制该节点绑定的事件。

2.6 替换节点

-1. replaceWith()

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

$(“ul li:eq(1)”).replaceWith(“<li>no fruit</li>”);

-2. replaceAll()

作用同replaceWith()，位置颠倒

$("<li>no fruit</li>").replaceAll("li");

2.7 包裹节点

即将某个节点用其他标记包裹起来

-1. wrap()每个节点单独包裹

$(“strong”).wrap(“”);//用把strong元素包裹起来

如果b元素有文本，则strong被包裹在文本后面

-2. wrapAll()所有节点一起包裹，如果要包裹的节点没有在一起，会被移动到一起

$("li").wrapAll("Bold")

-3. wrapInner()

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

$("ul li:odd").wrapInner("")

2.8 属性操作

-1. attr()方法获取和设置属性

$(“ul li:eq(1)”).attr(“title”);//获取属性

$(“ul li:eq(1)”).attr(“title”,”Your title”);//设置属性

$(“p”).attr(\{“title”:”your title”,”name”:”yourname”\});设置多个属性

-2. removeAttr()方法删除属性

$(“p”).removeAttr(“title”);

2.9 样式操作

-1. 获取样式和设置样式

class也是一种属性，因此获取和设置class都可以通过attr()来完成

$(“p”).attr(“class”);//获取p元素的class

$(“p”).attr(“class”,”myclass”);//设置p元素的class

-2. addClass()追加样式

$(“p”).addClass(“myClass”);//相当于上一步的两部操作

-3. removeClass()移除样式

$(“p”).removeClass(“myClass”);//移除myClass

$(“p”).removeClass();//移除所有class

-4. toggleClass()切换样式

如果类名存在则删除它，如果类名不存在则添加它。

$(“p”).toggleClass(“myClass”);

-5. hasClass()判断是否含有某个样式

if($(“p”).hasClass(“myClass”))//等价于$(“p”).is(“.myClass”)JQuery内部原理

2.10 设置和获取HTML、文本和值

-1. html()方法 类似于JavaScript中的innerHTML属性，用来读取或设置某个元素的HTML内容，可用于XHTML，但不能用于XML

$(“p”).html();//

$(“p”).html(“html content”);

-2. text()方法 ≈JavaScript.innerText，用来读取或设置某个元素的文本内容

$(“p”).text();//

$(“p”).text(“Hello world!”);

Note:1) JavaScript.innerText不支持FireFox；

2) text()对XHTML和XML文档都有效

-3. val()方法 ≈JavaScript.value，用来设置和获取元素的值

$(“\#address”).val();//获取value值

$(“\#address”).val(“tiangjingchen@gmail.com”);//设置value值

2.11 遍历节点

-1. children()方法，取得匹配元素的子元素集合。

$(“p”).children();//children只考虑子元素而不考虑后代元素

-2. next()方法，取得匹配元素后面紧邻的同辈元素

$(“p”).next();//取得的元素包括其后代元素

-3. prev()方法，取得匹配元素前面紧邻的同辈元素

$(“ul”).prev();

-4. siblings()方法，取得匹配元素前后的同辈元素

$(“ul”).siblings();

-5. closest()方法，取得最近的匹配元素

2.11 CSS-DOM操作

即读取和设置style的各种属性。style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式信息。通过JQuery却可以轻而易举的获取到。

-1. css()方法，获取和设置元素的属性

$(“p”).css();//获取p元素的属性

$(“p”).css(“color”,”red”);//设置p元素的样式颜色为红色

$(“p”).css(\{“fontSize”:”30px”,”backgroundColor”:”blue”\});//设置多个属性值

Note:1). 如果值是数字，则自动转为像素值；

2). css()方法中，如果属性中带有”-”符号，如font-size，background-color，如果设置这些属性值的时候不带引号，则要用驼峰式写法，如:

$(“p”).css(“fontSize”,”30px”);

如果带上引号，既可以写成”font-size”，也可以写成”fontSize”，建议带引号

$(“p”).css(“opacity”,”0.5”);//设置透明度

-2. height & width

//取得匹配元素的高度值(px)(类似$(“p”).css(“height”)，但css与样式有关)

$(“p”).height();

$(“p”).width();

$(“p”).height(100);//设置高度为100px

$(“p”).width(“10em”);//设置宽度为10em

-3. offset()方法

获取元素在当前视窗的相对偏移，返回对象包含top和left两个属性。只对可见元素有效

var offset = $(“p”).offset();

var top = offset.top;

var left = offset.left;

-4. position()方法

获取元素相对于最近一个position样式设置为relative或absolute的祖父节点的偏移，返回对象包含top和left属性。

-5. scrollTop()方法和scrollLeft()方法

获取元素的滚动条距顶端的距离和距左侧的距离。

转载于:https://www.cnblogs.com/tian2010/archive/2011/04/15/2016609.html

发表评论取消回复

表情：

评论列表（有 0 条评论，348人围观）

JQuery学习笔记(3)JQuery中的DOM操作

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JQuery中的DOM操作

相关 JQuery-学习笔记03【基础——DOM操作】

相关 jquery中的dom操作

相关 jQuery整理笔记四----jQuery操作DOM

相关 JQuery中的DOM操作

相关 jQuery中的DOM操作

相关 jQuery中的DOM操作

相关 Jquery 操作DOM元素（3）

相关 JQuery学习笔记(3)JQuery中的DOM操作

相关 jquery中的DOM操作