JQuery复习之JQuery操作DOM

太过爱你忘了你带给我的痛 2022-05-23 06:37 218阅读 0赞

#### 今日目录： ####

1、Jquery 操作 DOM 节点

2、Jquery 操作 DOM 节点属性

3、Jquery 操作 DOM 节点样式

4、设置和获取 HTML，文本和值

5、遍历节点操作

6、Jquery 操作 DOM 节点 CSS

#### 一、Jquery 操作 DOM 节点 ####

![70][]

#### 二、Jquery 操作 DOM 节点属性 ####

![70 1][]

#### 三、Jquery 操作 DOM 节点样式 ####

![70 2][]

#### 四、设置和获取 HTML，文本和值 ####

![70 3][]

#### 五、遍历节点操作 ####

![70 4][]

#### 六、Jquery 操作 DOM 节点 CSS ####

![70 5][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){
    		// 操作DOM节点
    		// 1，查找节点
    		/* var li2=$("ul li:eq(1)");
    		var li2_txt=li2.text();
    		alert(li2_txt); */
    		
    		// 2，创建节点
    		/* var li1=$("<li title='这是马化腾'>马化腾</li>");
    		var li2=$("<li title='这是李彦宏'>李彦宏</li>");
    		var li22=$("ul li:eq(1)");
    		$("ul").append(li1);
    		li2.insertAfter(li22); */
    		
    		// 3，删除节点
    		// $("ul li:eq(1)").remove();
    		
    		// 操作DOM属性
    		// 获取属性
    		/* var li2=$("ul li:eq(1)");
    		var li2_attr=li2.attr("title");
    		alert(li2_attr); */
    		
    		// 设置属性
    		// $("ul li:eq(1)").attr("title","你懂的");
    		
    		// 删除属性
    		// $("ul li:eq(1)").removeAttr("title");
    		
    		// 操作DOM节点样式
    		// 获取样式
    		/* var li2=$("ul li:eq(1)");
    		var li2_class=li2.attr("class");
    		alert(li2_class); */
    		
    		// 设置样式
    		// $("ul li:eq(1)").attr("class","lc2");
    		
    		// 追加样式
    		// $("ul li:eq(1)").addClass("lc3");
    		
    		// 移除样式
    		// $("ul li:eq(1)").removeClass("lc");
    		
    		// 设置和获取HTML，文本和值
    		// 获取html
    		/* var l1_html=$("ul li:eq(0)").html();
    		alert(l1_html); */
    		
    		// 设置html
    		// $("ul li:eq(0)").html("<font color=red>哈哈</font>");
    		
    		// 获取文本
    		/* var l1_text=$("ul li:eq(0)").text();
    		alert(l1_text); */
    		
    		// 设置文本
    		// $("ul li:eq(0)").text("呵呵");
    		
    		// 遍历节点
    		// children()
    		/* var b=$("body").children();
    		alert(b.length);
    		var u=$("ul").children();
    		alert(u.length);
    		for(var i=0;i<u.length;i++){
    			// alert(u[i].innerHTML);
    			alert($(u[i]).html());
    		} */
    		
    		// next()
    		/* var l=$("ul li:eq(1)").next();
    		alert(l.html()); */
    		
    		// prev()
    		/* var l=$("ul li:eq(1)").prev();
    		alert(l.html()); */
    		
    		// CSS-DOM操作
    		// 获取css样式
    		/* var c=$("#jq").css("color");
    		alert(c); */
    		
    		// 设置css样式
    		$("#jq").css("color","blue");
    	});
    	
    	function getUserName(){
    		var userName=$("#userName").val();
    		alert(userName);
    	}
    	
    	function setUserName(){
    		$("#userName").val("你懂的");
    	}
    </script>
    </head>
    <style type="text/css">
    	.lc{
    		background-color: red;
    	}
    	
    	.lc2{
    		background-color: blue;
    	}
    	
    	.lc3{
    		font-weight: bold;
    	}
    </style>
    <body >
    <p>你最喜欢的名人是？</p>
    <ul>
    	<li title="这是乔布斯"><font color="green">乔布斯</font></li>
    	<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
    	<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
    </ul>
    <input type="text" id="userName"/>
    <input type="button" value="获取数据" οnclick="getUserName()"/>
    <input type="button" value="设置数据" οnclick="setUserName()"/>
    
    <p id="jq" style="color: red">Jquery掉渣天</p>
    </body>
    </html>

添加小编微信可以获取免费资源，二维码

![70 6][]

要用到的工具，关注 公众号直接免费获取：

![70 7][]

[70]: /images/20220523/53e3baa539154c98a11f6fdb85fb9b4b.png
[70 1]: /images/20220523/b1702dbd6e22402ea4917b8899ea18da.png
[70 2]: /images/20220523/5c70751a140641cf9b781d663b1ba393.png
[70 3]: /images/20220523/5c54dd7971d84aa7a7efdf5f44ae3c68.png
[70 4]: /images/20220523/ddbbb33c678b42869c940c40844f6407.png
[70 5]: /images/20220523/31b544755f99406182a3ff20d68624d2.png
[70 6]: /images/20220523/6f1574b62c2d4ba99884fa8fe5b740b6.png
[70 7]: /images/20220523/03a4f29f44a84391a72dd3d40d656f14.png