jQuery中的DOM操作

一、DOM操作的分类

(一).DOM Core

DOM Core（核心）并不只属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它
它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML
JavaScript中的getElementById()、getElementByTagName()、getAttribute()和setAttribute()等方法，都是DOM Core的组成部分

	//使用DOM Core来获取表单对象的方法
	document.getElementByTagName("form");

	//使用DOM Core来获取某元素的src属性的方法
	element.getAttribute("src");

(二).HTML-DOM

在使用javaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性
HTML-DOM的出现甚至比DOM Core好要早，它提供了一些更简明的记号来描述各种HTML元素的属性
HTML-DOM可以获取某些对象、属性，也可以用DOM Core实现。相较而言HTML-DOM的代码通常比较简短，不过它只能用来处理Web文档

	//使用HTML-DOM来获取表单对象的方法
	doucment.forms  //HTML-DOM提供了一个forms是对象

	//使用HTML-DOM来获取某元素的src属性的方法
	element.src;

(三).CSS-DOM

CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是用来获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果
jQuery作为JavaScript库，继承并发扬了JavaScript对DOM对象操作的特性，使开发人员能方便的操作DOM对象

	//设置某元素style对象字体颜色的方法
	element.style.color="red";

二、jQuery中的DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> </style>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p title="选择你最喜欢的水果.">你最喜欢的水果是？</p>
<ul>
    <li title="苹果">苹果</li>
    <li title="橘子">橘子</li>
    <li title="菠萝">菠萝</li>
</ul>
</body>
</html>

jQuery中的DOM操作

(一).查找节点

1. 查找元素节点

使用jQuery选择器在文档树上查找节点

	//获取元素节点并打印出它的文本内容
	var $li=$("ul li:eq(1)");
	var li_txt=$li.text();
	 alert(li_txt);
	 /*以上代码获取了<ul>元素里第二个<li>节点，并将它的文本内容弹出来*/

jQuery中的DOM操作

2. 查找属性节点

利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性大的值。attr()方法的参数可以是一个，也可以是两个

	//当参数是一个时，则是要查询的属性和名字
	var $para=$("p");
    var p_txt=$para.attr("title");
    alert(p_txt);
    /*以上代码获取了<p>节点，并将它的title属性的值弹出来*/

jQuery中的DOM操作

(二).创建节点

1. 创建元素节点

在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互的目的
$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回
动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入到文档中
当创建单个元素时，要注意闭合标签和使用用标准的XHTML格式(例如，可以用$("")或者$("")，但不要使用$("")或者大写的$(""))

	//例如，要创建两个<li>元素，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上
	//1. 创建两个<li>新元素（使用jQuery的工厂函数$()来完成）  2. 将这两个新元素插入到文档中（可以使用jQuery中的append()方法）
	var $li_1=$("<li></li>");
    var $li_2=$("<li></li>");
    $("ul").append($li_1);
    $("ul").append($li_2);
    /*运行代码后，新创建的<li>元素将被添加到网页中，因为它们暂时没有在它们内部添加任何文本，所以只能看到<li>元素默认的"·"*/

jQuery中的DOM操作

2. 创建文本节点

创建文本节点就是在创建元素节点时，直接把文本内容写出来，然后使用append()等方法将它们添加到文档中就可以
无论$(html)中的HTML代码多么复杂，都可以使用相同的方法来创建

	var $li_1=$("<li>香蕉</li>");
    var $li_2=$("<li>雪梨</li>");
    $("ul").append($li_1);
    $("ul").append($li_2);
</script>

jQuery中的DOM操作

3. 创建属性节点

创建属性节点也是直接在创建元素节点时一起创建的
jQuery动态创建HTML元素是非常简单、方便和灵活的

	var $li_1=$("<li title='香蕉'>香蕉</li>");
    var $li_2=$("<li title='雪梨'>雪梨</li>");
    $("ul").append($li_1);
    $("ul").append($li_2);

jQuery中的DOM操作

(三).插入节点

动态创建HTML元素没有实际用处，还需要将新创建的元素插入到文档中
将新创建的节点插入到文档最简单的办法是，让它成为这个文档的某个节点的子节点

方法	描述	示例
`append()`	向每个匹配的元素内部追加内容	HTML代码：`<p>我想说：</p>` jQuery代码：`$("p").append("<b>你好</b>")`结果：`<p>我想说：<b>你好</b></p>`
`appendTo()`	将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的`$(A).append(B)`的操作，既不是将B追加到A中，而是将A追加到B中	HTML代码：`<p>我想说：</p>` jQuery代码：`$("<b>你好</b>").appendTo("p")`结果：`<p>我想说：<b>你好</b></p>`
`prepend()`	向每个匹配的元素内部前置内容	HTML代码：`<p>我想说：</p>` jQuery代码：`$("p").prepend("<b>你好</b>")`结果：`<p><b>你好</b>我想说：</p>`
`prependTo()`	将所有匹配元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的`$(A).prepend(B)`的操作，即不是将B前置到A中，而是将A前置到B中	HTML代码：`<p>我想说：</p>` jQuery代码：`$("<b>你好</b>").prependTo("p")`结果：`<p><b>你好</b>我想说：</p>`
`after()`	在每个匹配的元素之后插入内容	HTML代码：`<p>我想说：</p>` jQuery代码：`$("p").after("<b>你好</b>")`结果：`<p>我想说：</p><b>你好</b>`
`insertAfter()`	将所有匹配的元素插入到指定的元素后面。实际上，使用该方法是颠倒了常规的`$(A).after(B)`的操作，即不是将B插入到A的后面，而是将A插入到B的后面	HTML代码：`<p>我想说：</p>` jQuery代码：`$("<b>你好</b>").insertAfter("p")`结果：`<p>我想说：</p><b>你好</b>`
`before()`	在每个匹配的元素之前插入内容	HTML代码：`<p>我想说：</p>` jQuery代码：`$("p").before("<b>你好</b>")`结果：`<b>你好</b><p>我想说：</p>`
`insertBefore()`	将所有匹配的元素插入到指定的元素的前面。实际上，使用该方法是颠倒了常规的`$(A).before(B)`的操作，即不是将B插入到A的前面，而是将A插入到B的前面	HTML代码：`<p>我想说：</p>` jQuery代码：`$("<b>你好</b>").insertBefore("p")`结果：`<b>你好</b><p>我想说：</p>`

	var $li_1=$("<li title='香蕉'>香蕉</li>");
    var $li_2=$("<li title='雪梨'>雪梨</li>");
    var $li_3=$("<li title='其它'>其它</li>");
    var $parent=$("ul");
    var $two_li=$("ul li:eq(1)");
    $parent.append($li_1);
    $parent.prepend($li_2);
    $li_3.insertAfter($two_li);

jQuery中的DOM操作

    var $one_li=$("ul li:eq(1)");
    var $two_li=$("ul li:eq(2)");
    $two_li.insertBefore($one_li);

jQuery中的DOM操作

(四).删除节点

1. remove()方法

remove()作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素
当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除
这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素
remove()方法也可以通过传递参数来选择性地删除元素

	$("ul li:eq(1)").remove();

jQuery中的DOM操作

	var $li=$("ul li:eq(1)").remove();
    $li.appendTo("ul");
    
    //apendTo()方法可以用来移动元素
    //移动元素时首先从文档上删除元素，然后将该元素插入到文档中指定的节点
    $("ul li:eq(1)").appendTo("ul");

jQuery中的DOM操作

	$("ul li").remove("li[title!='菠萝']");

jQuery中的DOM操作

2. detach()方法

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

	$("ul li").click(function(){
        alert($(this).html());
    });
    var $li=$("ul li:eq(1)").detach();
    $li.appendTo("ul");
    /*重新追加此元素，发现它之前绑定的事件还在，如果使用remove()方法删除元素的话，之前绑定的事件将会失效*/

jQuery中的DOM操作

3. empty()方法

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

	$("ul li:eq(1)").empty();

jQuery中的DOM操作

(五).复制节点

复制节点后，被复制的新元素并不具有任何行为
在clone()方法中传递一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件

	$("ul li").click(function(){
        $(this).clone().appendTo("ul");
    });

jQuery中的DOM操作

(六).替换节点

1. replaceWith()

replaceWith()方法的作用是将所有匹配的元素都替换成成指定的HTML或者DOM元素
如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件

	$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");

jQuery中的DOM操作

2. replaceAll()

replaceAll()与replaceWith()方法的作用相同，只是颠倒了replaceWith()的顺序
如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件

	$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");

jQuery中的DOM操作

(七).包裹节点

1. wrap()方法

如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()
该方法对于要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义

	$("p").wrap("<b></b>");//用<b>标签把<p>元素包裹起来

jQuery中的DOM操作

2. wrapAll()方法

该方法会将所有匹配的元素用一个元素来包裹
不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹
如果被包裹的多个元素间有其它元素，其它元素会被放到包裹元素之后

	$("p").wrap("<b></b>");

jQuery中的DOM操作

	$("p").wrapAll("<b></b>");

jQuery中的DOM操作

3. wrapInner()方法

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

	$("p").wrapInner("<b></b>");

jQuery中的DOM操作

(八).属性操作

1. 获取属性和设置属性

在jQuery中，用attr()方法来获取和设置元素属性
如果要获取元素的属性，那么值需要给attr()方法传递一个参数，即属性名称
如果要给元素属性的值，也可以使用同一方法，不同的是，需要传递两个参数及属性的名称和对应值
可以一次性为同一个元素设置多个属性
jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的。例如上面的attr()方法，即能设置元素属性的值，也能获取元素属性的值。类似的还有html()、text()、height()、width()、val()和css()等方法

	var $para=$("p");
    var p_txt=$para.attr("title");
    console.log(p_txt);

jQuery中的DOM操作

	$("p").attr("title","your title");

jQuery中的DOM操作

	$("p").attr({"title":"your title","name":"test"});

jQuery中的DOM操作

2. 删除属性

在某些情况下，需要删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成该任务
jQuery 1.6中新增了prop()和removeProp()，分别用来获取在匹配的元素集中的第一个元素的属性值和为匹配的元素删除设置的属性

	$("p").removeAttr("title");

jQuery中的DOM操作

(九).样式操作

1. 获取样式和设置样式

使用attr()来获取元素的class

	<p title="选择你最喜欢的水果." class="myClass">你最喜欢的水果是？</p>

jQuery中的DOM操作

	var p_class=$("p").attr("class");
	console.log(p_class);

jQuery中的DOM操作

	$("p").attr("class","high");
	/*上面的代码是将原来的class(myClass)替换成新的class(high)。*/

jQuery中的DOM操作

2. 追加样式

jQuery提供了专门的addClass()方法来追加样式

	<style>
        .high{
            font-weight: bold;
            color: red;
        }
        .another{
            font-style: italic;
            color: blue;
        }
    </style>

	$("p").addClass("another");
	/*在CSS中有以下规定：*/
	/*1. 如果给一个元素添加了多个class值，那么就相当于合并了它们的样式*/
	/*2. 如果有不同的class设定了同一样式属性，则后者覆盖前者*/

jQuery中的DOM操作

jQuery中的DOM操作
attr()和addClass()的区别

方法	`addClass()`	`attr()`
用途	追加样式	设置样式
对同一个网页操作	`<p>test</p>`	`<p>test</p>`
第1次使用方法	`$("p").addClass("high");`	`$("p").attr("class","high");`
第1次结果	`<p class="high">test</p>`	`<p class="high">test</p>`
再次使用方法	`$("p").addClass("another");`	`$("p").attr("class","another");`
最终结果	`<p class="high another">test</p>`	`<p class="another">test</p>`

3. 移除样式

removeClass()方法的作用是从匹配的元素中删除全部或指定的class
jQuery提供了可以以空格的方式删除多个class名
removeClass()不带参数时，就会将class的值全部删除

	$("p").removeClass("high");

jQuery中的DOM操作

	$("p").removeClass("high").removeClass("another");
	//等价于
	$("p").removeClass("high another");
	//等价于
	$("p").removeClass();

jQuery中的DOM操作

4. 切换样式

toggleClass()方法控制样式上的重复切换。如果类名存在删除它，如果类名不存在则添加它

	$("button").click(function(){
        $("p").toggleClass("another");
    });
    /*当不断单击"切换样式"按钮时，<p>元素的class的值就会在"high"和"high another"之间重复切换*/

jQuery中的DOM操作

5. 判断是否含有某个样式

hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false
这个方法是为了增强代码可读性而产生的。在jQuery内部实际上是调用了is()方法来完成这个功能的。该方法等价于$("p").is(".another");

	    console.log($("p").hasClass("another"));

jQuery中的DOM操作

(十).设置和获取HTML、文本和值

1. html()方法

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

	<p title="选择你最喜欢的水果." class="high another"><strong>你最喜欢的水果是？</strong></p>

jQuery中的DOM操作

	var p_html=$("p").html();
    alert(p_html);

jQuery中的DOM操作

	<p title="选择你最喜欢的水果." class="high another"></p>

jQuery中的DOM操作

	<p title="选择你最喜欢的水果." class="high another"><strong>你最喜欢的水果是？</strong></p>

jQuery中的DOM操作

	$("p").html("<strong>你最喜欢的水果是?</strong>");

jQuery中的DOM操作

2. text()方法

此方法类似于JavasScript中的innerText属性，可以用来读取或者设置某个元素的文本内容
与html()方法一样，如果需要为某元素设置文本内容，需要传递一个参数
JavaScript中的innerText属性并不能再Firefox浏览器下运行，而jQuery的text()方法支持所有的浏览器
text()方法对HTML文档和XML文档都有效

	<p title="选择你最喜欢的水果." class="high another"><strong>你最喜欢的水果是？</strong></p>

jQuery中的DOM操作

	var p_text=$("p").text();
    alert(p_text);

jQuery中的DOM操作

	$("p").text("你最喜欢的水果是？");

jQuery中的DOM操作

3. val()方法

此方法类似于JavaScript中的value属性，可以用来设置和获取元素的值。
无论元素是文本框，下拉表单还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择值的数组
返回第一个匹配元素的 value 属性的值：$(selector).val();
设置 value 属性的值：$(selector).val(value);
使用函数设置 value 属性的值：$(selector).val(function(index,oldvalue));
- index （可选）：接受选择器的 index 位置。
- oldvalue （可选）：接受选择器的当前 Value 属性。

(十一).遍历节点

1. children()方法

该方法用于取得匹配元素的子元素集合
children()方法只考虑子元素而不考虑其他后代元素

	<p title="选择你最喜欢的水果.">你最喜欢的水果是？</p>
	<ul>
   		 <li title="苹果">苹果</li>
   		 <li title="橘子">橘子</li>
   		 <li title="菠萝">菠萝</li>
	</ul>

jQuery中的DOM操作

	var $body=$("body").children();
    var $p=$("p").children();
    var $ul=$("ul").children();
    console.log($body.length);
    console.log($p.length);
    console.log($ul.length);
    for(var i= 0,len=$ul.length;i<len;i++){
        console.log($ul[i].innerHTML);
    }

jQuery中的DOM操作

2. next()方法

该方法用于取得匹配元素后面紧邻的其他后代元素

	var $p1=$("p").next();
    console.log($p1);

jQuery中的DOM操作

3. prev()方法

该方法用于取得匹配元素前面紧邻的同辈元素

	var $ul=$("ul").prev();
    console.log($ul);

jQuery中的DOM操作

4. siblings()方法

该方法用于取得匹配元素前后所有的同辈元素

	var $p2=$("p").siblings();
    console.log($p2);

jQuery中的DOM操作

5. closest()

该方法用于取得最近的匹配元素
首先检查当前元素是否匹配，如果匹配直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象

	//给点击的目标元素的最近的li元素添加颜色
	$(document).bind("click",function(e){
        $(e.target).closest("li").css("color","red");
    });

jQuery中的DOM操作

6. parent()、parents()和closest()的区别

parent()、parents()与closest()的区别

方法	描述	示例
`parent()`	获得集合中每个匹配元素的父级元素	`parent()`方法从指定类型的直接父节点开始查找，`parent(）`返回一个元素节点
`parents()`	获得集合中每个匹配元素的祖先元素	`parents()`方法查找方式同`parent()`方法类似，不同的一点在于，当它找到第一个父节点时并没有停止查找，而是继续查找，最后返回多个父节点
`closest()`	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素	`closest(`)方法查找是从包含自身的节点找起，它同`parent()`方法类似，不同点就在于它只返回匹配的第一个元素节点

(十二).CSS-DOM操作

1. css()方法

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式信息
在jQuery中可以直接利用css()方法获取元素的样式信息
无论是属性是外部CSS导入，还是直接拼接在HTML元素里（内联），css()方法都可以获取到属性style里的其他属性值
可以直接利用css()方法设置某个元素的单个样式，也可以同时设置多个样式颜色
如果值是数字，将会被自动转化为像素值
在css()方法中，如果属性中带有"-"符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如：$("p").css({fontSize:"30px",backgroundColor:"#888888"});如果带上了双引号，既可以写成"font-size"
，也可以写成"fontSize"。建议带上引号

	$("p").css("color");

	$("p").css("color","red");

jQuery中的DOM操作

	$("p").css({"fontSize":"30px","backgroundColor":"#888888"});

jQuery中的DOM操作

2. height()方法

在jQuery中还有另一种方法也可以获取元素的高度，即height()。它的作用是取得匹配元素当前计算的高度值(px)
height()方法也能用来设置元素的高度。如果传递的值是一个数字，则默认的单位为px。如果要用其它单位（例如em），则必须传递一个字符串**
在jQuery 1.2版本以后的height()方法可以用来获取window和document的高度
css()方法获取的高度值与样式的设置有关，可能会得到"auto"，也可能得到"10px"之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，并且不带单位
与height()方法对应的还有一个width()方法，它可以取得匹配元素的宽度值(px)

	$("p").height();

	$("p").height(100);

jQuery中的DOM操作

	$("p").height("10em");

jQuery中的DOM操作

	$("p").width();

	$("p").width("400px");

jQuery中的DOM操作

3. offset()方法

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

	var offset=$("p").offset();
    console.log(offset.left);
    console.log(offset.top);

jQuery中的DOM操作

4. position()方法

它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left

	var position=$("p").position();
    console.log(position.left);
    console.log(position.top);

jQuery中的DOM操作

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

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离
另外，可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置

	var $p=$("p");
    console.log($p.scrollTop());
    console.log($p.scrollLeft());

jQuery中的DOM操作

	$("textarea").scrollTop(300);
    $("textarea").scrollLeft(300);

jQuery中的DOM操作
源于整理《锋利的 jQuery》

jQuery中的DOM操作