jQuery 使用jQuery操作DOM

使用jQuery操作DOM

DOM操作的分类

DOM操作分为三个方面：DOM Core、HTML-DOM和CSS-DOM。
1、DOM Core(核心DOM)：它不专属于任何语言，它是一组标准的接口，任何一种支持DOM的程序语言都可以使用它。
2、在js中，有很多专属于HTML-DOM的属性。
3、CSS-DOM是针对CSS的操作。

对元素内容和值进行操作

对元素内容操作

对文本内容操作

text() 用于获取全部匹配元素的文本内容

text(val) 用于设置全部匹配元素的文本内容

		<div>
			<span id="clock">当前时间：2019-10-29 星期二 9：09：10</span>
		</div>
		<script>
			$(document).ready(function(){
				$("div").text();
			});

得到的结果：当前时间：2019-10-29 星期二 9：09：10
【例】设置div元素的文本内容

		<div></div>
		<script>
			$(document).ready(function(){
				$("div").text("我是通过text()方法设置的文本内容");
			});
		</script>

对HTML内容操作

html() 用于获取第一个匹配元素的HTML内容

html(val) 用于设置全部匹配元素的HTML内容。

		<div>
			<span id="clock">当前时间：2019-10-29 星期二 9：09：10</span>
		</div>
		<script>
			$(document).ready(function(){
				alert($("div").html());
				});
		</script>

要重新设置div元素的HTML内容

$("div").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");

对元素值操作

方法	说明
val()	用于获取第一个匹配元素的当前值，返回值可能是一个字符串，也可能是一个数组。例如，当select元素有两个选中值时，则返回结果是一个数组。
val(val)	用于设置所有匹配元素的值
val(arrVal)	用于为check、select和radio等元素设置值，参数为字符串数组

【例】为多行列表框设置并获取值

		<select name="like" size="3" multiple="multiple" id="like">
			<option>列表一</option>
			<option selected="selected">列表二</option>
			<option selected="selected">列表三</option>
		</select>
		<script>
			$(document).ready(function(){
				$("select").val(['列表一','列表二']);
				alert($("select").val());
			});
		</script>

对DOM节点进行操作

插入节点

在元素内部插入

方法	说明
append(content)	为所有匹配的元素的内部追加内容
appendTo(content)	将所有匹配元素添加到另一个元素的元素集合中
prepend(content)	为所有匹配的元素的内部前置内容
prependTo(content)	将所有匹配元素前置到另一个元素的元素集合中

【例】向<div>元素插入节点

	<div></div>
			<script>
			$(document).ready(function(){
				 var $p_1=$("<p>明日图书</p>");		//创建第一个p元素
				 var $p_2=$("<p>编程词典</p>");		//创建第二个p元素
				 $div=$("div");						//获取div元素对象
				 $div.append($p_1);					//将第一个p元素添加到div中
				 $p_2.appendTo($div);				//将第二个p元素添加到div中
			});
		</script> 

四种在元素内部插入的方法

				 $("#B").append("<p>A</p>");	
				 $("#B").appendTo("#A");
				 $("#B").prepend("<p>A</p>");
				 $("#B").prependTo("#A");

在元素外部插入

在元素外部插入就是将要添加的内容添加到元素之前或元素之后。

方法	说明
after(content)	在每个匹配的元素之后插入内容
insert(content)	将所有匹配的元素插入到另一个指定元素的元素集合的后面
before(content)	在每个匹配的元素之前插入内容
insertBefore(content)	把所有匹配的元素插入到另一个指定元素的元素集合的前面

		<p id="A">明日图书</p>
		<p id="B">编程词典</p>
		<script>
			$(document).ready(function(){
				$("#B").after("<p>A</p>");
				$("<p>test</p>").insertAfter("#B");
				$("#B").before("<p>aa</p>");
				$("#B").insertBefore("#A");
				});
		</script>-->

删除、复制与替换节点

1、删除节点

remove()方法 用于从DOM中删除所有匹配的元素
当删除某个节点之后，该节点所包含的所有后代节点将同时被删除。
该方法的返回值是一个指向已被删除的节点的引用，以后也可以继续使用这些元素。
【例】使用remove()方法删除节点

		<div>
			<p title="明日科技">明日科技</p>
			<p title="明日图书">明日图书</p>
		</div>
				<script>
			$(document).ready(function(){
				$("div p").remove("p[title!=明日科技]");//删除<p>元素中属性不等于"明日科技"的元素				

detach()方法用于从DOM中删除所有匹配的元素
该方法不会把匹配的元素从jQuery对象中删除，所以仍然可以使用这些匹配元素。
与remove()方法不同的是：所有绑定的事件或附加的数据都会保留下来

		 $("div p").click(function(){
				 	alert($(this).text());
				 });
				 var $p_2=$("div p:eq(1)").detach();		//删除元素
				 $p_2.appendTo("div");

empty()方法
严格来讲，empty()方法并不是删除元素节点，而是将元素节点清空，该方法可以清空元素中所有的后代节点。

	$("div p:eq(1)").empty();	//获取第2个p元素后，清空该元素中的内容

1、复制节点

clone()方法复制节点有两种形式，一种是不带参数，用于克隆匹配的DOM元素并且选中这些克隆的副本；另一种是带一个布尔型的参数，当参数为true时，表示克隆匹配的元素以及其所有的事件处理并且选中这些克隆的副本，当参数为false时，表示不复制元素的事件处理。
【例】复制节点

		<div>
			<p title="明日科技">明日科技</p>
			<p title="明日图书">明日图书</p>
		</div>
		<script>
			$(document).ready(function(){
				$("div p:eq(1)").bind("click",function(){	//为按钮绑定单击事件
					$(this).clone().insertAfter(this);		//复制自己但不复制事件处理
				});
			});
		</script>

替换节点

两种替换节点的方法：replaceAll(selector) 和replaceWith(content)
replaceAll(selector)方法用于使用匹配的元素替换掉所有的selector匹配到的元素；replaceWith(content)方法用于将所有的匹配的元素替换成指定的HTML或DOM元素。这两种方法的功能相同，只是二者的表现形式不同
【例】替换节点

		div1
		<div id="div1"></div>
		div2
		<div id="div2"></div>
		<script type="text/javascript">
			$(document).ready(function(){
				//替换id为div1的<div>元素
				$("#div1").replaceWith("<div>replaceWith()方法的替换结果</div>");
				//替换id为div2的<div>元素
				$("<div>replaceAll()方法的替换结果</div>").replaceAll("#div2");
			});			
		</script>

遍历节点

可以直接使用each()方法来遍历元素

	each(callback)

callback是一个函数，该函数可以接受一个形参index，这个形参是遍历元素的序号，序号从0开始。
【例】使用each()方法img遍历元素

		<img height="60" src="../images/01.jpg" width="80" />
		<img height="60" src="../images/02.jpg" width="80" />
		<img height="60" src="../images/03.jpg" width="80" />
		<img height="60" src="../images/04.jpg" width="80" />
		<img height="60" src="../images/05.jpg" width="80" />
		<script>
			$(document).ready(function(){
				$("img").each(function(index){
					$(this).attr("title","第"+(index+1)+"张照片");
				});
			});
		</script>

对元素属性进行操作

方法	说明
attr(name)	获取匹配的第1个元素的属性值(无值时返回undefined)
attr(key,value)	为所有匹配的元素设置一个属性值(value是设置的值)
attr(key,fn)	为所有匹配的元素设置一个函数返回的属性值(fn代表函数)
attr(properties)	为所有匹配元素以集合({名：值，名：值})形式同时设置多个属性
removeAttr(name)	为所有匹配元素删除一个属性

		$("img").attr("src");	//获取页面中第一个img元素的src属性的值
		$("img").attr("title","草莓正在生长");	//为图片添加一标题属性
		//将元素的名称作为其value属性值
		$("#fn").attr("value",function(){		
			return this.name;			//返回元素名称
		});
		$("img").attr({src:"test.jpg",title:"图片示例"});	//为图片同时添加两个属性
		$("img").removeAttr("width");		//移除所有图片的一个属性

对元素的CSS样式操作

通过修改CSS类实现

方法	说明
addClass(class)	为所有匹配的元素添加指定的CSS类名
removeClass(class)	从所有匹配的元素中删除全部或者指定的css类
toggleClass(class)	如果存在(不存在)就删除(添加)一个css类
toggleClass(class,switch)	如果switch参数为true则加上对应的css类，否则就删除，通常switch参数为一个布尔型的变量

				$("div").addClass("blue line");		//为全部div添加blue和line两个CSS类
				$("div").removeClass("line");		//删除全部div元素中添加的lineCSS类
				$("div").toggleClass("yellow");		//当匹配的div元素中存在yellow类,则删除;若不存在yellow类,则添加
				$("input").toggleClass("show",true);	//为input添加CSS类
				$("input").toggleClass("show",false);	//为input删除CSS类

通过修改CSS属性实现

方法	说明
css(name)	返回第一个匹配元素的样式属性
css(name,value)	为所有匹配元素的指定样式设置值
css(properties)	以(属性：值，属性：值，…) 的形式为所有匹配的元素设置样式属性

		$("div").css("color");		//获取第1个匹配的div元素的color属性值
		$("img").css("border","1px solid red");	//为全部的img元素设置边框样式
		$("p").css({
				"background-color":"red",		//设置背景颜色
				"font-size":"14px",				//设置字体大小
				"color":"#blue"
			});