JQuery學習筆記-JQuery的DOM操作

發布時間：2020-08-01 23:09:07 來源：網絡閱讀：359 作者：umgsai 欄目：web開發

DOM（Document Object Model 文檔對象模型）：一種與瀏覽器、平臺、語言無關的接口，使用該接口可以輕松地訪問頁面中所有的標準組建

DOM操作的分類

-DOM Core : DOM Core并不專屬于JavaScript，任何一種支持DOM的程序設計語言都可以使用。它的用途并非僅限于處理網頁，也可以用來處理任何一種是用標記語言編寫出來的文檔，如XML

-HTML DOM：使用JavaScript和DOM為HTML文檔編寫腳本時，有許多專屬于HTML-DOM的屬性

-CSS-DOM：針對于CSS操作，在JavaScript中，CSS-DOM主要用于獲取和設置style對象的各種屬性

參考 http://shamrock.blog.51cto.com/2079212/1564560

http://shamrock.blog.51cto.com/2079212/1564688

查找節點

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//測試JQuery操作文本節點 屬性節點
	$(function() {
		//操作文本節點，通過JQuery對象的text()方法
		alert($("#bj").text());
		$("#bj").text("北京天安門");
		
		//操作屬性節點 通過JQuery對象的attr()方法
		alert($(":text[name='username']").attr("value"));
		$(":text[name='username']").attr("value", "syd");
	});
</script>
</head>
<body>
	<p>你喜歡哪個城市？</p>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="sz2">深圳2</li>
    </ul>
    <p>你喜歡哪本書？</p>
    <ul id="book">
        <li id="xyj" name="xyj">西游記</li>
        <li>三國演義</li>
        <li>水滸傳</li>
        <li>水滸傳2</li>
    </ul>
    <br/>
    gender:
    <input type="radio" name="gender" value="male"/>Male
    <input type="radio" name="gender" value="female"/>Female
    <br/>
    <input type="text" name="username" value="umgsai"/>
</body>
</html>

創建節點并且添加到指定的位置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//測試JQuery創建節點并且插入節點到指定位置
	$(function() {
		//創建一個p節點,并添加到city下
		//$("<li id='atguigu'>尚硅谷</li>").appendTo("#city");
		//$("#city").append("<li id='atguigu'>【尚硅谷】</li>");
		//alert($("#atguigu").text());
		
		//接到第一個節點的 前面
		$("<li id='atguigu'>尚硅谷1</li>").prependTo($("#city"));
		//$("#city").prepend("<li id='atguigu'>【尚硅谷】</li>");
		
		//插入到指定位置的后面
		//$("<li id='atguigu'>尚硅谷2</li>").insertAfter($("#bj"));
		$("#bj").after($("<li id='atguigu'>尚硅谷2</li>"));
		
		//插入到指定位置的前面
		//$("<li id='atguigu'>尚硅谷3</li>").insertBefore($("#bj"));
		$("#bj").before($("<li id='atguigu'>尚硅谷4</li>"));
	});
</script>
</head>
<body>
	<p>你喜歡哪個城市？</p>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="sz2">深圳2</li>
    </ul>
    <p>你喜歡哪本書？</p>
    <ul id="book">
        <li id="xyj" name="xyj">西游記</li>
        <li>三國演義</li>
        <li>水滸傳</li>
        <li>水滸傳2</li>
    </ul>
    <br/>
    gender:
    <input type="radio" name="gender" value="male"/>Male
    <input type="radio" name="gender" value="female"/>Female
    <br/>
    <input type="text" name="username" value="umgsai"/>
</body>
</html>

克隆節點

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//復制節點
	$(function() {
		$("li").click(function(){
			alert($(this).text());
		});
		//克隆節點，重新設置id屬性。true表示克隆節點的同時克隆節點的事件
		$("#bj").attr("id", "bj2").clone(true).insertAfter($("#xyj"));
	})
</script>
</head>
<body>
	<p>你喜歡哪個城市？</p>
	<ul id="city">
		<li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>武漢</li>
		<li>深圳</li>
	</ul>
	<p>你喜歡哪本書？</p>
	<ul id="book">
		<li id="xyj" name="xyj">西游記</li>
		<li>三國演義</li>
		<li>水滸傳</li>
	</ul>

	<br />
	<form action="#" name="myForm">
		<input type="radio" name="type" value="city" />城市 <input type="radio"
			name="type" value="book" />BOOK <input type="text" name="myName" /> <input
			type="submit" value="submit" id="submit" />
	</form>
</body>
</html>

克隆和替換

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//替換節點
	$(function() {
		//創建一個<li></li>節點，替換#city最后的一個子節點
		$("<li>wuhan</li>").replaceAll($("#city li:last"));
		
		//創建一個<li></li>節點，替換#city的第二個li子節點
		$("#city li:eq(1)").replaceWith($("<li>yichang</li>"));
		
		//replaceAll  replaceWith 替換的時候會移動節點
		
		//互換#xyj和#bj.需要先克隆節點。
		var $bj2 = $("#bj").clone(true);
		var $xyj = $("#xyj").replaceWith($bj2);//返回被替換的節點。
		$("#bj").replaceWith($xyj);
	})
</script>
</head>
<body>
	<p>你喜歡哪個城市？</p>
	<ul id="city">
		<li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>武漢</li>
		<li>深圳</li>
	</ul>
	<p>你喜歡哪本書？</p>
	<ul id="book">
		<li id="xyj" name="xyj">西游記</li>
		<li>三國演義</li>
		<li>水滸傳</li>
	</ul>

	<br />
	<form action="#" name="myForm">
		<input type="radio" name="type" value="city" />城市 <input type="radio"
			name="type" value="book" />BOOK <input type="text" name="myName" /> <input
			type="submit" value="submit" id="submit" />
	</form>
</body>
</html>

包裹節點

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//測試JQuery的wrap wrapAll wrapInner
	$(function() {
		//包裝li本身
		//$("li").wrap("<font color='red'></font>");
		
		//包裝所有的li。將所有匹配元素進行單獨包裹。
		$("#city li").wrapAll("<font color='red'></font>");
		
		//包裝li里面的文字
		$("#language li").wrapInner("<font color='red'></font>");;
	})
</script>
</head>
<body>
	<p>你喜歡哪個城市？</p>
	<ul id="city">
		<li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>武漢</li>
		<li>深圳</li>
	</ul>
	<p>你喜歡哪本書？</p>
	<ul id="book">
		<li id="xyj" name="xyj">西游記</li>
		<li>三國演義</li>
		<li>水滸傳</li>
	</ul>
	<p>你喜歡哪種語言？</p>
	<ul id="language">
		<li id="c" name="c">c</li>
		<li>Java</li>
		<li>PHP</li>
	</ul>

	<br />
	<form action="#" name="myForm">
		<input type="radio" name="type" value="city" />城市 <input type="radio"
			name="type" value="book" />BOOK <input type="text" name="myName" /> <input
			type="submit" value="submit" id="submit" />
	</form>
</body>
</html>

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

JQuery學習筆記-JQuery的DOM操作

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

JQuery學習筆記-JQuery的DOM操作

猜你喜歡

最新資訊

相關推薦

相關標簽