S2-JavaScript-08-使用JQuery操作DOM

本章简介：

DOM为文档提供了一种结构化的表现形式，通过操作DOM可以改变文档的内容和展现形式。

在实际的运用运用中，DOM更像是一座桥梁，通过它可以实现扩平台、跨语言的标准访问

本章将认识如何使用JQuery操作DOM中的各种元素和对象。

 

本章单词：

Text：        文本

Append      附加

Prepend            预先

After           后来

Before         在..之前

Remover           移除

Replace       取代，代替

Siblings       兄弟姐妹

 

8、1     DOM操作

在JQuery中，DOM操作是一个非常重要的组成部分。

JQuery中提供的操作DOM的方法，不仅简化了传统的繁冗代码，更加解决了跨平台的浏览器兼容性。

 

JQuery中的操作和JavaScript中的一样，分为三类

DOM-Core 核心、HTM-DOM、CSS-DOM

 

JQuery中的DOM操作主要分为样式操作、文本和value属性值操作、节点操作、

节点操作中又包含了属性操作、节点遍历、CSS-DOM操作

 

8、2     样式操作

在JQuery中，对元素的样式操作主要有直接设置样式值、获取样式值、追加样式、移除样式和切换样式。

 

1、 设置和获取样式

在JQuery中，使用 CSS() 方法为指定的元素设置样式值或 获取样式值。

//设置单个属性
$("h1").css("background","red");

//设置多个属性
$("h1").css({"background":"red","height":"250px","width":"250px"});

//获取属性
$("h1").css("background");

 

 

2、 追加和移除样式

使用addClass（）方法仅是追加样式，即它原有的样式不会消失。

使用 removeClass() 方法能移除样式，它的语法和 addClass（）很相似。

//追加单个样式
$("h1").addClass("类名");
//追加多个样式，中间用空格隔开
$("h1").addClass("类名1 类名2 类名3");

//移除单个样式
$("h1").removeClass("类名");
//移除多个样式，中间用空格隔开
$("h1").removeClass("类名1 类名2 类名3");

 

 

3、 切换样式

之前学习的 toggle() 方法可以切换元素的可见状态，

使用 toggleClass() 方法 可以切换不同元素的类样式。

ToggleClass() 方法模拟了addClass() 方法和 removeClass() 方法实现样式切换的过程。

$("h1").toggleClass("类名");

 

4、 判断是否包含指定的样式

在实际的应用中，会经常用到追加和移除样式，如果不知道是否已经应用了样式，可以使用

HasClass() 方法进行判断，返回值为 布尔值。

$("h1").hasClass("类名");

 

 

8、3     内容操作

除了样式操作外，JQuery还提供了对元素内容操作的方法，即对HTML代码、标签内容和属性值内容三者的操作。

 

1、 HTML代码操作

在JQuery中，可以使用html()方法对HTML代码进行操作，此方法类似于传统Javscript中的 innerHTML，通常用于动态的新增页面内容。

$("div").html("添加的内容。");

无参数时，表示获取被选元素的文本内容包括HTML标签。

支持（X）HTML文档，不能用于XML文档。

 

2、 标签内容操作

在JQuery中，可以使用 text()方法获取和设置元素的文本内容，不会保括HTML标签。

$("div").text("添加的文本内容。");

支持HTML文档，也支持XML文档。

 

3、 属性值操作

获取元素 value 属性值的方法 val（），该方法非常常用，多用于操作表单的 input 元素。

此方法也分带参数和不带参数。

$("input").val();                   获取
$("input").val("设置的 value 值");   设置

 

 

8、4     节点与属性操作

JQuery中对节点的操作主要分为两种类型，一种是对节点本身的操作，另一种是对节点中属性节点的操作。

DOM模型中的节点类型分为元素节点，文本节点，属性节点。

文本节点与属性节点都包含在元素节点之中，它都是DOM中的节点类型。

 

节点操作

1、 查找节点

想要对象节点进行操作之前，需要先要找到此节点。

//找到 h2节点
$("h2").css();

 

2、 创建节点

$() 函数，该函数是用于将匹配的DOM元素转换为JQuery对象的，它被比喻成工厂函数。

//创建一个 li 节点
var $node1 = $("
");
//创建一个 div 节点
var $node2 = $("
");

 

3、 插入节点

在JQuery中想要动态的新增节点，必须对创建的节点执行插入或追加操作。

JQuery提供的方法从插入方式主要分为两大类：

内部插入

//向所选择的元素内部插入节点
$("div").append("节点名称");

//把所选元素追加到另一个指定的元素中
$("div").appendTo("节点名称");

//向每个选择的元素内部前置内容
$("div").prepend("节点名称");

//将所匹配的元素前置到指定的元素中，此方法颠倒了 prepend()插入元素的操作。
$("div").prependTo("节点名称");

 

 

外部插入节点。

// 在匹配的元素之后插入元素，
$("div").after("节点名称");

//将所匹配的元素插入到指定元素后面
$("div").insertAfter("节点名称");

//向所选择的元素外部前面插入内容
$("div").before("节点名称");

//将匹配的元素插入指定元素前面
$("div").insertBefore("节点名称");

 

4、 删除节点

删除节点也是DOM操作中必不可少的操作之一。

JQuery提供了 remove（）、detach（）、empty（）、三种删除节点的方法。

//移除所有的 div 
$("div").remove();
$("div").detach();

Remove（） 方法和 detach（）方法，都能将匹配的元素从DOM文档中删除。

两者的相同之处是删除后该元素在JQuery对象中依然存在。

不同的之处在于，detach（）方法删除元素后，对象中仍素的绑定事件、附加的数据

而 remove（）有这种作用。

 

//清除所有 div 里的文本内容
$("div").empty();

Empty() 方法并不是删除节点，而是清空节点，它能清空元素中的内容。

 

5、 替换节点

在JQuery中，如果需要替换某个节点，可以使用 replaceWIth() 和 replaceAll（）方法。

//replaceWith()方法的作用是将所匹配的元素替换成指定HTML或者DOM元素。
$("div").replaceWith("节点");

//replaceAll() 方法与 replaceWith() 方法相同，只是颠倒了。
$("div").replaceAll("节点");

 

6、 复制节点

在JQuery中，想要对节点进行复制，可以使用 clone() 方法。

该方法能够生成被选元素的副本，包含子节点，文本、属性。

//值为 true 时，复制事件处理
$("body").clone(true);

//值为 false 时，不复制事件处理
$("body").clone(false);

 

属性操作

在JQuery中，属性操作的方法有两种，即获取与设置属性的 attr() 方法，和删除元素属性的 removeAttr() 方法。

1、 获取与设置元素属性

// 获取 div 的name 属性值
$("div").attr("name");

//给 div 设置 属性
$("div").attr({width:"200",height:"80px"});

 

2、 删除元素属性

//删除 div 的 name 属性
$("div").removeAttr("name");

 

8、5     节点遍历

1、遍历子元素

在JQuery中遍历子元素的方法只有一个，即 children（）方法。

var $child =  $("div").children();

 

2、遍历同辈元素

在JQuery中提供了三种遍历同辈元素的方法：

//获取紧邻的前一个元素
var prev = $("div").prev();

//获取紧邻的后一个元素
var next = $("div").next()
 
 //获取同辈的所有元素
var siblings =  $("div").siblings(); 

 

 

3、 遍历前辈元素

在JQuery中，用于遍历前辈元素的有：

//遍历 父辈
$("div").parent()

//遍历 父级，直到 html
$("div").parents()

 

4、其他的遍历方法

在JQuery中还有很多遍历方法：

// each() 方法为每个匹配元素规定运行的函数
$("div").each();

//end() 方法结束当前链条最近的筛选操作，并将匹配元素还原成之前的状态。

// 还有 find()、filter()、eq()、first()、last()等方法

 

8、6     CSS-DOM操作

JQuery支持 CSS-DOM 操作，除了之前的css()方法外，还有很多方法

// css() 设置或获取元素的样式属性
$("div").css();

//height() 设置或获取元素的高度
$("div").height();

//width() 设置或获取元素的宽度
$("div").width();

//offset() 返回以像素为单位的 top 和 left 坐标，此方法仅对可见元素有效
$("div").offset();

//offsetParent() 返回最近的已定位祖先元素，定位元素指的是 设置了 position 属性
$("div").offsetParent();

//position() 返回第一个匹配元素相对于父元素的位置
$("div").position();

//scrollLeft(); 设置或返回匹配元素相对滚动条左侧的偏移
$("div").scrollLeft();

//scrollTop(); 设置或返回匹配元素相对滚动条顶部的偏移
$("div").scrollTop();

 

本章总结：

1、DOM操作分为DOM-Core、HTML-DOM、CSS-DOM，三种操作类型。

 

2、使用 css（）方法可以为元素添加样式，使用addClass（）为元素追加样式，使用removeClass（）方法移除样式，使用toggleClass（）方法切换样式。

 

4、 使用html（）方法可以获取或设置元素的HTML代码，使用text（）方法可以获取获取或设置元素的文本内容，使用val（）方法可以获取元素value 属性值

 

5、 对DOM元素节点的操作包括查找、创建、替换、复制、遍历等

 

6、 在JQuery中，提供了append（）等一系列方法插入节点，使用remove（）等方法删除节点

 

7、 在JQuery中，使用attr（）方法可获取或设置元素属性，使用 removeAttr（）方法可删除元素属性

 

8、 在JQuery中，历操作包括遍历子元素，遍历同辈元素、遍历前辈元素等

 

9、在JQuery中，提供了获取和设置元素高度、宽度、相对位置等CSS-DOM方法。