2. 程式人生 > >JQuery學習筆記（四）——建立、插入和刪除節點

JQuery學習筆記（四）——建立、插入和刪除節點

阿新 • • 發佈：2019-01-17

一個小練習：

需求1: 點選 submit 按鈕時,　檢查是否選擇 type, 若沒有選擇給出提示: "請選擇型別"; 
檢查文字框中是否有輸入(可以去除前後空格), 若沒有輸入,則給出提示: "請輸入內容";
若檢查都通過, 則在相應的 ul 節點中新增對應的 li 節點 
需求2: 使包括新增的 li 都能響應 onclick 事件: 彈出 li 的文字值. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		
		//需求: 點選 submit 按鈕時,　檢查是否選擇 type, 若沒有選擇給出提示: "請選擇型別"; 
		//     檢查文字框中是否有輸入(可以去除前後空格), 若沒有輸入,則給出提示: "請輸入內容";
		//若檢查都通過, 則在相應的 ul 節點中新增對應的 li 節點 
	
		//需求2: 使包括新增的 li 都能響應 onclick 事件: 彈出 li 的文字值. 

		$(function() {
			$("#submit").click(function() {
				var val = $.trim($("input[name='name']").val());
				if (val == "") {
					alert("請輸入內容！");
				} else {
					if ($("input[name='type']:checked").val() == "city") {
						// 新增城市
						$("<li>" + val + "</li>").appendTo($("#city")).click(function(){
							alert($(this).text());
						});
					} else if ($("input[name='type']:checked").val() == "game"){
						// 新增遊戲
						$("<li>" + val + "</li>").appendTo($("#game")).click(function(){
							alert($(this).text());
						});						
					} else {
						alert("請選擇型別！");
					}
				}
				return false;
			});
			$("ul li").click(function(){
				alert($(this).text());
			});
		})
	</script>
</head>
<body>

	<p>你喜歡哪個城市?</p>
	
		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>東京</li>
			<li>首爾</li>
		</ul>
		
		<br><br>
		<p>你喜歡哪款單機遊戲?</p>
		<ul id="game">
			<li id="rl">紅警</li>
			<li>實況</li>
			<li>極品飛車</li>
			<li>魔獸</li>
		</ul>
		
		<br><br>
		
		<form action="dom-7.html" name="myform">
			
			<input type="radio" name="type" value="city">城市
			<input type="radio" name="type" value="game">遊戲
		
			name: <input type="text" name="name"/>
		
			<input type="submit" value="Submit" id="submit"/>
			
		</form>


</body>
</html>

DOM

DOM：一種與瀏覽器，平臺，語言無關的介面，使用該介面可以輕鬆地訪問頁面中所有的標準組件
DOM分類：
DOM Core：DOM Core不專屬於JavaScript，任何一種支援DOM的程式設計語言都可以使用。
用途並非僅限於處理網頁，也可以用來處理任何一種是用標記語言編寫出來的文件，如：XML
HTML DOM：使用JavaScript和DOM為HTML檔案編寫指令碼是，有許多專屬於HTML-DOM的屬性。
CSS  DOM：針對於CSS操作，在JavaScript中，CSS DOM主要用於獲取和設定style物件的各種屬性。

查詢節點

查詢屬性節點：通過JQuery選擇器完成
操作屬性節點：查詢到所需的元素之後，可以呼叫JQuery物件的attr()方法來獲取它的各種屬性值。
操作文字節點：通過text()方法。
<!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="scripts/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
			//測試使用 jQuery 操作文字節點, 屬性節點. 
			//及查詢元素節點
			
			$(function(){
				//1. 操作文字節點: 通過 jQuery 物件的 text() 方法
				alert($("#bj").text());
				//2. 操作屬性節點: 通過 jQuery 物件的 attr() 方法. 
				//注: 直接操作 value 屬性值可以使用更便捷的 val() 方法. 
				alert($(":text[name='username']").attr("value"));
				$(":text[name='username']").val("測試")
				alert("2");
				$("input[name='username']").val("測試2");
			})
			
		
		</script>
		
	</head>
	<body>
		<p>你喜歡哪個城市?</p>
		<ul id="city"><li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li id="dj">東京</li>
			<li id="se">首爾</li>
		</ul>
		
		<br><br>
		<p>你喜歡哪款單機遊戲?</p>
		<ul id="game">
			<li id="rl">紅警</li>
			<li>實況</li>
			<li>極品飛車</li>
			<li>魔獸</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	
		<br><br>
		name: <input type="text" name="username" value="atguigu"/>
		
	</body>
</html>

建立節點

使用JQuery的工廠函式$():$(html),會根據傳入的HTML標記字串建立一個DOM物件，
並把這個DOM物件包裝成一個JQuery物件返回
<!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="scripts/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
			//測試使用 jQuery 建立節點並插入節點到指定的節點中
			/*
			1. 建立節點: 使用 $(html) 方式即可, 元素節點, 文字節點, 屬性節點可以一網打盡
			返回對應節點的 jQuery 物件:
			$("<li id='atguigu'>尚矽谷</li>")
			
			2. 新增節點:
			1). appendTo 和 append: 主語和賓語的位置不同:  
			$("<li id='atguigu'>尚矽谷</li>").appendTo($("#city"));	
			$("#city").append("<li id='atguigu'>[尚矽谷]</li>");
			
			2). prependTo 和  prepend: 主語和賓語的位置不同: 
			$("<li id='atguigu'>尚矽谷</li>").prependTo($("#city"));
			$("#city").prepend("<li id='atguigu'>[尚矽谷]</li>");	
			*/
			$(function(){
				//1. 建立一個 <li id="atguigu">尚矽谷</li>
				//2. 並把其加入到 #city 的子節點
				//$("<li id='atguigu'>尚矽谷</li>").appendTo($("#city"));
				//$("#city").append("<li id='atguigu'>[尚矽谷]</li>");

				//$("<li id='atguigu'>尚矽谷</li>").prependTo($("#city"));
				
				//$("<li id='test'>測試</li>").appendTo($("#city"));
				
				$("#city").prepend("<li id='test'>測試</li>");
				alert($("#test").text());
			})
			
		
		</script>
		
	</head>
	<body>
		<p>你喜歡哪個城市?</p>
		<ul id="city"><li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li id="dj">東京</li>
			<li id="se">首爾</li>
		</ul>
		
		<br><br>
		<p>你喜歡哪款單機遊戲?</p>
		<ul id="game">
			<li id="rl">紅警</li>
			<li>實況</li>
			<li>極品飛車</li>
			<li>魔獸</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	
		<br><br>
		name: <input type="text" name="username" value="atguigu"/>
		
	</body>
</html>

插入節點

1)成為文件中某個節點的子節點

append() 向每個匹配的元素的內部的結尾處追加內容
appendTo() 將每個匹配的元素追加到指定的元素中的內部的結尾處
prepend() 向每個匹配元素的內部的開始出插入內容
prepend() 將每個匹配的元素插入到指定的元素內部的開始處

2)對原有DOM元素進行移動

after() 向每個匹配的元素的之後插入內容ep:A.after(B),將B插入A後面
insertAfter() 向每個匹配的元素插入到指定元素之後ep:B.insertAfter(A),將B插入A後面
before() 向每個匹配的元素的之前插入內容
insertBefore()向每個匹配的元素插入到指定的元素之前
<!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="scripts/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
			//測試使用 jQuery 插入節點
			$(function(){
				//1. 建立一個 <li id="atguigu">尚矽谷</li>
				//2. 並把其加入到 #bj 的後面
				//$("<li id='atguigu'>尚矽谷</li>").insertAfter($("#bj"));
				//$("#bj").after("<li id='atguigu'>[尚矽谷]</li>");

				//$("<li id='atguigu'>尚矽谷</li>").insertBefore($("#bj"));
				//$("#bj").before("<li id='atguigu'>[尚矽谷]</li>");
				$("<li>測試</li>").insertAfter($("#bj"));
				//$("#bj").after($("<li>測試</li>"));
				
			})
			
		
		</script>
		
	</head>
	<body>
		<p>你喜歡哪個城市?</p>
		<ul id="city"><li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li id="dj">東京</li>
			<li id="se">首爾</li>
		</ul>
		
		<br><br>
		<p>你喜歡哪款單機遊戲?</p>
		<ul id="game">
			<li id="rl">紅警</li>
			<li>實況</li>
			<li>極品飛車</li>
			<li>魔獸</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	
		<br><br>
		name: <input type="text" name="username" value="atguigu"/>
		
	</body>
</html>

注*： 1.同 JS 的響應函式一樣, jQuery 物件的響應函式若返回 false, 
可以取消指定元素的預設行為. 比如 submit, a 等
2.val() 方法, 相當於 attr("value"), 獲取表單元素的 value 屬性值. 
3.$.trim(str): 可以去除 str 的前後空格.
4.jQuery 物件的方法的連綴: 呼叫一個方法的返回值還是呼叫的物件, 於是可以
在呼叫方法的後面依然呼叫先前的那個物件的其他方法.

刪除節點

remove()從DOM中刪除所有匹配的元素，傳入的引數用於根據JQuery表示式來篩選元素。當某個節點
用remove()方法刪除後，該節點所包含的所有後代節點將被同時刪除。
這個方法的返回值是一個指向已被刪除的節點的引用。
empty() 清空節點-清空元素中的所有後代節點（不包含屬性節點）
<!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="scripts/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
			//測試使用 jQuery 刪除節點
			$(function(){
				//1. 為 #city 的每一個 li 新增 click 響應函式: 點選時, li 被刪除
				//$("#city li").click(function(){
				//	$(this).remove();
				//});
				$("li").click(function(){
					$(this).remove();
				});
				//jQuery 物件的 remove() 方法: 將把 jQuery 物件對應的
				//DOM 節點直接刪除. 
				$("#bj").remove();
				
				//2. 清空 #game 節點
				//jQuery 物件的 empty() 方法: 清空 jQuery 物件對應的 
				//DOM 物件的所有的子節點. 
				alert("要清空了!");
				$("#game").empty();
			})
			
		
		</script>
		
	</head>
	<body>
		<p>你喜歡哪個城市?</p>
		<ul id="city"><li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li id="dj">東京</li>
			<li id="se">首爾</li>
		</ul>
		
		<br><br>
		<p>你喜歡哪款單機遊戲?</p>
		<ul id="game">
			<li id="rl">紅警</li>
			<li>實況</li>
			<li>極品飛車</li>
			<li>魔獸</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	
		<br><br>
		name: <input type="text" name="username" value="atguigu"/>
		
	</body>
</html>


相關推薦

JQuery學習筆記（四）——建立、插入和刪除節點

一個小練習： 需求1: 點選 submit 按鈕時,　檢查是否選擇 type, 若沒有選擇給出提示: "請選擇型別";  檢查文字框中是否有輸入(可以去除前後空格), 若沒有輸入,則給出提示: "請輸入內容"; 若檢查都通過, 則在相應的 ul 節點中新增對應的 li 節點

jQuery學習筆記（四）jQuery遍歷、DOM操作

一、DOM操作（增刪改查） 1、新增節點 $(selector).append(content) 在匹配元素內部最後面新增一個節點 $(content).appendTo(selector) 把新節點追加到匹配元素內部最後面（效果同append，只是書寫上前後位置

Emgu學習筆記（四）---Canny、線檢測、圓檢測

Canny邊緣檢測： 用法和opencv中的一致， Image<Gray,Byte> Image<Gray,Byte>.Canny(double thresh,double t

TypeScript學習筆記（四）——物件、陣列、函式型別

一、物件型別 1. 使用介面定義物件型別：介面類似java中的介面，可用於對類的一部分進行抽象以及對物件形狀的描述。 物件定義的變數應與介面數量相同。不可多不可少。 interface Animal { land: boolean; sound: string;

Java NIO 學習筆記（五）----路徑、檔案和管道 Path/Files/Pipe

目錄： Java NIO 學習筆記（一）----概述，Channel/Buffer Java NIO 學習筆記（二）----聚集和分散，通道到通道 Java NIO 學習筆記（三）----Selector Java NIO 學習筆記（四）----檔案通道和網路通道 Java NIO 學習筆記（五）----路徑

Opengl es2.0 學習筆記（十）VBO、IBO和FBO

VBO：頂點緩衝,也就是說把頂點的儲存在 顯示卡中開闢記憶體，提高傳遞的效率。也可以說叫頂點座標的 緩衝區。 //建立vbo glGenBuffers(1,&_vbo); //繫結vbo glBindBuffer(GL_ARRAY_BUFFER,_vbo

flask學習筆記（四）：渲染模板和引數

1、渲染模板 需要先匯入render_templatem模組，然後先在檔案所在目錄建立一資料夾，命名為templates，然後在資料夾中新建一個html網頁檔案。（渲染時框架會自動尋找網頁檔案，不必新增"templates"這個路徑，這是由flask框架決定的） &l

C語言學習筆記（五）—— 運算子、表示式和語句

一、運算子1、賦值運算子：=        賦值表示式的目的是把值儲存到記憶體位置上，用於儲存值的資料區域統稱為資料物件，使用變數名是標識物件的一種方法。物件指的是實際的資料儲存，左值是用於標識和定位儲存位置的標籤，右值指的是能賦值給可修改左值的量。void example1

Unity3D學習筆記（四）分別使用IMGUI和UGUI實現血條的預製設計

分別使用IMGUI和UGUI實現血條的預製設計 血條（Health Bar）的預製設計。具體要求如下： 分別使用 IMGUI 和 UGUI 實現 使用 UGUI，血條是遊戲物件的一個子元素，任何時候需要面對主攝像機 分析兩種實現的優缺點 給出預製的使用

C Primer Plus學習筆記（四）- 運算符、表達式和語句

post 函數表 浮點 ima 數據存儲 定義 數據對象 其他 符號整型 基本運算符 賦值運算符：= 在C語言中，=不是“相等”，而是賦值運算符，把左邊的值賦給右邊的變量 a = 2018; //把值2018賦給變量a 賦值表達式語句的目的是把值儲存到內存位置上，用

jQuery 學習筆記（3）（內容選擇器、attr方法、prop方法，類的操作）

節點 lec ddc 方法 pty 全部 如果 一個 所有 內容選擇器： 1、$("div:empty"): 空的div元素 2、$("div:parent"): 非空div元素 3、$("div:contains(text)"): 包含 text 文本（指定文本）的div

Python自動化學習筆記（四）——Python資料型別（集合set,元組tuple）、修改檔案、函式、random常用方法

1.修改檔案的兩種方式 1 #第一種 2 with open('users','a+') as fw: #用a+模式開啟檔案，使用with這種語法可以防止忘記close檔案 3 fw.seek(0) #移動檔案指標到最前面，然後才能讀到內容 4 result=fw.read()

Qt學習筆記（四）——新增動作、資原始檔

一、新增動作 Qt 使用QAction類作為動作。顧名思義，這個類就是代表了視窗的一個“動作”，這個動作可能顯示在選單，作為一個選單項，當用戶點選該選單項，對使用者的點選做出響應；也可能在工具欄，作為一個工具欄按鈕，使用者點選這個按鈕就可以執行相應的操作。有一點值得注意：無

前端學習筆記（四）--CSS控制UL LI 的樣式詳解(推薦)及純CSS製作各種各樣的網頁圖示（三角形、暫停按鈕、下載箭頭、加號等）

DIV+CSS裡，我們用得最多的就是ul li來顯示資料，如新聞按鈕等。下面給大家一個css ul li的例子供學習<div id="menu"> <ul> <li><a href="#">首頁</a></

Python3+OpenCV學習筆記（四）：影象濾波基礎（均值、高斯、中值、雙邊）

OpenCV中還可以在影象上進行繪圖操作，由於資料都比較完善，所以附上鍊接，自行參悟。 好了，進入正題。在一張影象，在資料儲存或傳輸的過程中，或多或少都會引入噪聲，常見的影象噪聲如高斯噪聲、瑞利噪聲、椒鹽噪聲等，可參加連結：數字影象噪聲 為了避免噪聲對影象資訊進行干擾或

Hibernate學習筆記（四）----核心開發介面、物件的三種狀態、session常用方法

a)       AnnotationConfiguration b)       進行配置資訊的管理 c)       用來產生SessionFactory d)       可以在configure方法中指定hibernate配置檔案 e)       只關注一個方

Linux學習筆記（四）------常見的dos命令建立目錄，連結等

pwd 當前路徑 mkdir建立目錄(make) rmdir 刪除目錄（remove） 遞迴刪除 rmdir –p a/b/c cp (copy)複製一個目錄到另一個目錄 cp –r a b(把a 檔案複製到b檔案) mv (move)移動，重新命名命令

C++ Primer Plus學習筆記（四）（輸入輸出錯誤處理、檔案輸入輸出）

1. 字元函式庫 cctype cctype是字元函式庫，用於判斷是否為大寫字母、標點符號、空格等 #include<cctype> char ch; isalpha(ch)//如果ch是字母，返回非零值，否則返回0 ispunct(ch)/

jQuery 學習筆記（一）——jQuery簡介、jQuery語法

 內容選自w3cschool教程 一句話描述JQuery：jQuery 是一個 JavaScript 庫。jQuery 極大地簡化了 JavaScript 程式設計。 一. jQuery簡介 jQuery 庫可以通過一行簡單的標記被新增到網頁中。 1. jQuery

《機器學習實戰》學習筆記（四）之Logistic（上）基礎理論及演算法推導、線性迴歸，梯度下降演算法

轉載請註明作者和出處：http://blog.csdn.net/john_bh/ 執行平臺： Windows Python版本： Python3.6 IDE： Sublime text3 一、概述 Logistic迴歸是統計學習中的經典