前端学习（十一）--- jQuery操作DOM

一、元素样式操作

使用css()为指定的元素设置样式值
css(name,value) 或 css({name:value, name:value,name:value…})
$(this).css("border","5px solid #f5f5f5");
或

$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});

二、追加和移除样式

添加CSS 类，可以添加单个或多个

addClass(class)或addClass(class1 class2 … classN)
$("#d1").addClass("a1");
$("#d1").addClass("a1 a2 a3");

移除CSS 类，可以移除单个或多个

removeClass(“style2 ”)或removeClass("style1 style2 ")
$("#d1").removeClass("a1");
$("#d1").removeClass("a1 a2 a3");

三、切换样式

toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
toggleClass(class)
$("#d1").toggleClass(“a1”);

四、CSS-DOM操作

语法	功能
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	返回以像素为单位的top和left坐标。此方法仅对可见元素有效

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	    alert($("#div1").width());
	});        
	$("#btn2").click(function(){
	    $("#div1").width("500px");
	});        
	$("#btn3").click(function(){
	    alert($("#div1").height());
	});        
	$("#btn4").click(function(){
	    $("#div1").height("500px");
	});
	$("#btn5").click(function(){
	    alert($("#div1").offset().left);
		alert($("#div1").offset().top);
	});        
});

</script>
<input type="button" id="btn1" value="width()">
<input type="button" id="btn2" value="width(value)">
<input type="button" id="btn3" value="height()">
<input type="button" id="btn4" value="height(value)">
<input type="button" id="btn5" value="offset()">
<div id="div1"
 style="background-color:green;width:200px;height:200px;left:50px;top:50px">
 </div>

五、元素内容操作

• html()可以对HTML代码进行操作，类似于JS中的innerHTML

$(“div.left”).html();

或

 $("div.left").html("<div class='content'>…</div>");

• text()可以获取或设置元素的文本内容

  $("div.left").text();
  

或

$("div.left").text("<div class='content'>…</div>");

• val()可以获取或设置元素的value属性值

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	    alert($("#username").val());
	});        
	$("#btn2").click(function(){
	    $("#username").val("刘若英");
	});        
});

</script>
<input type="text" id="username">
<input type="button" id="btn1" value="val()">
<input type="button" id="btn2" value="val(value)">

六、DOM节点操作

1、创建节点元素
工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点

var $newNode2=$("<li title='大数据开发'>大数据开发工程师</li>");

2、插入子节点
(1)元素内部插入子节点

语法	功能	示例
append(content)	$(A).append(B)表示将B追加到A中	如：$(“ul”).append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中	如：$newNode1.appendTo(“ul”);
prepend(content)	$(A). prepend (B)表示将B前置插入到A中	如：$(“ul”). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中	如：$newNode1. prependTo (“ul”);

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	    $("#u1").append("<li>3小红</li>");
	});        
	$("#btn2").click(function(){
	    $("#u1").prepend("<li>0小绿</li>");
	});        
});

</script>

<input type="button" id="btn1" value="append()">
<input type="button" id="btn2" value="prepend()">
<ul id="u1">
<li>1小黑</li>
<li>2小白</li>
</ul>

(2)插入同辈节点

语法	功能	示例
after(content)	$(A).after (B)表示将B插入到A之后	如：$(“ul”).after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后	如：$newNode1.insertAfter(“ul”);
before(content)	$(A). before (B)表示将B插入至A之前	如：$(“ul”).before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前	如：$newNode1.insertBefore(“ul”);

3、替换节点
replaceWith()和replaceAll()用于替换某个节点

$("ul li:eq(1)").replaceWith($newNode1);

或

$newNode1.replaceAll("ul li:eq(1)");

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	    //$("#u1 li:eq(1)").replaceWith("<li>小绿</li>");
		$("<li>小绿</li>").replaceAll("#u1 li:eq(1)");
	});        
	        
});

</script>
<input type="button" id="btn1" value="replaceWith()">
<ul id="u1">
<li>1小黑</li>
<li>2小白</li>
</ul>

4、复制节点
clone()用于复制某个节点
clone(true)
参数true表示复制事件处理
示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("li").click(function(){
	    alert($(this).text());
	});        
	$("li:eq(1)").clone(true).appendTo("#u1");        
});

</script>
<ul id="u1">
<li>1小黑</li>
<li>2小白</li>
</ul>

5、删除节点

jQuery提供了三种删除节点的方法

• remove()：删除整个节点
• detach()：删除整个节点，保留元素的绑定事件、附加的数据
• empty()：清空节点内容，删除节点里的内容

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	    $("li:first").remove();
	});        
	$("#btn2").click(function(){
	    $("li:first").empty();
	});        
    $("#btn3").click(function(){
	    $("li:first").detach();
	});        
});

</script>

<input type="button" id="btn1" value="remove()">
<input type="button" id="btn2" value="empty()">
<input type="button" id="btn3" value="detach()">
<ul id="u1">
<li>1小黑</li>
<li>2小白</li>
<li>3小红</li>
</ul>

6、获取与设置节点属性

• attr()用来获取与设置元素属性
• removeAttr()用来删除元素的属性

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	    alert($("#img1").attr("width"));
	});        
	$("#btn2").click(function(){
	    $("#img1").attr("width","100px");
	});        
    $("#btn3").click(function(){
	    $("#img1").attr({"width":"300px","height":"300px"});
	});        
});

</script>

<input type="button" id="btn1" value="attr()">
<input type="button" id="btn2" value="attr()">
<input type="button" id="btn3" value="attr()">
<img id="img1" src="logo.png" width="50px" height="50px">

7、遍历子元素
children()方法可以用来获取元素的所有子元素
$(“body”).children();
示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	    //alert($("#u1").children().length);
		$("#u1").children().css("color","red");
	});        
	        
});

</script>
<ul id="u1">
<li>a1</li><li>a2</li><li>a3</li><li>a4</li>
</ul>
<input type="button" id="btn1" value="children()">

8、遍历同辈元素

语法	功能	示例
next([expr])	用于获取紧邻匹配元素之后的元素，	如：$(“li:eq(1)”).next().css(“background-color”,"#F06");
prev([expr])	用于获取紧邻匹配元素之前的元素，	如：$(“li:eq(1)”).prev().css(“background-color”,"#F06");
siblings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素，	如：$(“li:eq(1)”).siblings().css(“background-color”,"#F06");

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	    $("#a2").next().css("color","red");
	});        
	$("#btn2").click(function(){
	    $("#a2").prev().css("color","red");
	});              
	$("#btn3").click(function(){
	    $("#a2").siblings().css("color","red");
	});              
	
});

</script>
<ul id="u1">
<li>a1</li><li id="a2">a2</li><li>a3</li><li>a4</li>
</ul>
<input type="button" id="btn1" value="next()">
<input type="button" id="btn2" value="prev()">
<input type="button" id="btn3" value="siblings()">

9、遍历前辈元素
parent()：获取元素的父级元素
parents()：获取元素的祖先元素