JQuery的學習：DOM操作

回顧：

input可以匹配哪些元素？
所有 input, textarea, select 和 button 元素

修改元素樣式有幾種方法？
css(“樣式名”,”樣式值”)
attr(“style”,”樣式值”)
addClass(“css類”)/removeClass(“css類”);
attr(“class”,” css類”)

JQuery：DOM指的是Document

使用jQuery操作DOM
-添加新元素
-刪除元素
-替換元素
-複製元素

創建新元素:
語法：$(“HTML代碼”)

例：
$(“<div></div>”) 或者 $(“<div />”)
$(“<div><p>新元素</p></div>”)
注意：
HTML代碼中標籤必須完整
HTML代碼中標籤不要使用大寫字母

添加兒子：

追加方式：

append: A.append(B) : A+B

appendTo: A.appendTo(B) : B+A :從最後開始插入

prependTo: A.prependTo(B) : B+A :跟appendTo操作一樣，只是插入位置是從開頭插入

body:

	<input type="button" id="but1" value="添加小兒子"/>
	<input type="button" id="but2" value="添加大兒子"/>
	<table>
		<tr id="tr1"><td>原始數據</td></tr>
	</table>

script:

<script src="js/jquery-1.4.1.js"></script>

<script>

	$(function()
	{
		$("#but1").click(function(){
			//$("<tr><td>新元素</td></tr>").appendTo("table");
			$("table").append("<tr><td><p>小兒子<p></td></tr>");
		});
		
		$("#but2").click(function(){
			$("<tr><td><p>大兒子</p></td></tr>").prependTo("table");
			//$("table").append("<tr><td>新元素</td></tr>");
		});
		
		$("table").css({"border":"1px solid red","width":"80%"});

添加兄弟：

-after ：添加弟弟

-before ：添加哥哥

-insertAfter 類似於 AppendTo ：它比after插入的位置還要靠前

-insertBefore 類似於 AppendTo ：它比before插入的位置還要靠前

body：

	<input type="button" id="but3" value="添加弟弟"/>
	<input type="button" id="but4" value="添加哥哥"/>

script：

		$("#but3").click(function()
		{
			$("table").after("<p>弟弟</p>");
			
			$("<p>小弟</p>").insertAfter("table");
		});	
		
		$("#but4").click(function()
		{
			$("table").before("<p>哥哥</p>");
			$("<p>大哥</p>").insertBefore("table");
		});

輸出結果：

小弟

弟弟

.......

大哥

哥哥

刪除元素：
-empty()
刪除匹配的元素集合中所有的子節點。

-remove()

-detach()

說明：remove / detach所有綁定的事件、附加的數據等不會/都會保留下來。

body:

	<input type="button" id="but5" value="刪除Table數據"/>
	<input type="button" id="but6" value="刪除第一條數據"/>

script:

		$("#but5").click(function()
		{
			$("table").empty();
		});	
		
		$("#but6").click(function()
		{
			$("table tr:first").remove();
			$("table tr:last").detach();
		});

替換元素：
-replaceWith(content)
將所有匹配的元素替換成指定的HTML或DOM元素。
-replaceAll(selector)
用匹配的元素替換掉所有 selector匹配到的元素。

body:

	<input type="button" id="but7" value="替換元素"/>
	<input type="button" id="but8" value="替換Table p下所有元素"/>

	<table>
		<tr id="tr1"><td>原始數據</td></tr>
		<tr id="tr1"><td><p>模板數據</p></td></tr>
	</table>
	
	<input type="text" id="usName">

style:

<style>
	.imgType{
		width:100%;
		height:200px;
	}
</style>

scritpt:

		$("#but7").click(function()
		{
			// 把 id="tr1" 標籤下內容替換成一張圖片，並給圖片css樣式
			$("#tr1").replaceWith("<tr><td><img src='001.jpg' Class='imgType'/></td></tr>");

		});	
		
		$("#but8").click(function()
		{
			$("#usName").replaceAll("table p");

		});

複製元素：
-clone()
克隆匹配的DOM元素並且選中這些克隆的副本。
-clone(true)
克隆匹配的DOM元素以及其所有的事件處理並且選中這些克隆的副本。

body:

	<input type="button" id="but11" value="複製"/>

script:

		$("#but11").click(function()
		{
			var $but = $("#but4").clone(true);
			
			$("#but11").after($but);

		});

上移、下移：

上移：A.prev().before(A) //A.prev() 把A節點移動到上一個節點

下移：A.next().after(A) //A.next() 把A節點移動到下一個節點

body：

	<input type="button" id="but9" value="上移"/>
	
	<input type="button" id="but10" value="下移"/>

script：

		//把<tr id="tr1"><td>原始數據</td></tr>做上下移動操作
		$("#but9").click(function()
		{
			$("#tr1").prev().before($("#tr1"));

		});	

		$("#but10").click(function()
		{
			$("#tr1").next().after($("#tr1"));
		});

hide() 隱藏

show() 顯示

		//點擊<input type="text" id="usName">後，給text value賦值
		$("#usName").click(function()
		{
			$(this).val('請輸入');
		});

事件處理：
-bind(type, [data], fn)
爲每個匹配元素的特定事件綁定事件處理函數。

參數類型說明
type String 含有一個或多個事件類型的字符串，比如"click"或"submit"
data (可選) Object 作爲event.data屬性值傳遞給事件對象的額外數據對象
fn Function 綁定到每個匹配元素的事件上面的處理函數

script：

$("body").bind('mousemove','TTTTTT',function(event){$("#usName").val('X:'+event.pageX+" Y:"+event.pageY)});
		
$("body").bind('click','TTTTTT',function(event){alert(event.srcElement)});

事件對象：
fn這個參數的回調函數還可以接受一個參數。當這個函數被調用時，一個JavaScript事件對象會作爲一個參數傳進來。

屬性/方法說明
pageX /pageY 鼠標點擊時相對於頁面的座標
keyCode /*對於keyup和keydown事件返回被按下的鍵. 不區分大小寫, a和A都返回65.

*/ 對於keypress事件請使用which屬性, 因爲which屬性跨瀏覽時依然可靠.
which 對於鍵盤事件, 返回觸發事件的鍵的數字編碼. 對於鼠標事件, 返回鼠標按鍵號(1左,2中,3右).

事件處理：
-one(type, [data], fn)
爲每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。
-unbind([type], [fn])
bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。
如果沒有參數，則刪除所有綁定的事件。

body：

	<input type="button" id="but12" value="一次性事件"/>
	<input type="button" id="but13" value="刪除事件"/>

scritpt：

		$("#but12").one('click','TTTTTT',function(event){alert(event.data);});
		
		
		$("#but13").click(function(){
			$("body").unbind('click');
		});

事件委託：
-live(type, [data], fn)
給所有匹配的元素附加一個事件處理函數，即使這個元素是以後再添加進來的也有效。
這個方法是基本是的 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函數，而以後再添加的元素則不會有。爲此需要再使用一次 .bind() 纔行。

script：

	$("table td>p").live('click',function(){$(this).css({'color':'red'});});

以下是演示代碼整合：

<html>
<style>
	.imgType{
		width:100%;
		height:200px;
	}
</style>
<script src="js/jquery-1.4.1.js"></script>

<script>

	$(function()
	{
		$("#but1").click(function(){
			//$("<tr><td>新元素</td></tr>").appendTo("table");
			$("table").append("<tr><td><p>小兒子<p></td></tr>");
		});
		
		$("#but2").click(function(){
			$("<tr><td><p>大兒子</p></td></tr>").prependTo("table");
			//$("table").append("<tr><td>新元素</td></tr>");
		});
		
		$("table").css({"border":"1px solid red","width":"80%"});
		
		$("#but3").click(function()
		{
			$("table").after("<p>弟弟</p>");
			
			$("<p>小弟</p>").insertAfter("table");
		});	
		
		$("#but4").click(function()
		{
			$("table").before("<p>哥哥</p>");
			$("<p>大哥</p>").insertBefore("table");
		});	
		
		$("#but5").click(function()
		{
			$("table").empty();
		});	
		
		$("#but6").click(function()
		{
			$("table tr:first").remove();
			$("table tr:last").detach();
		});	
		
		$("#but7").click(function()
		{
			$("#tr1").replaceWith("<tr><td><img src='001.jpg' Class='imgType'/></td></tr>");

		});	
		
		$("#but8").click(function()
		{
			$("#usName").replaceAll("table p");

		});	
		
		$("#but10").click(function()
		{
			$("#tr1").next().after($("#tr1"));

		});	
		
		$("#but9").click(function()
		{
			$("#tr1").prev().before($("#tr1"));

		});	
		
		$("#but11").click(function()
		{
			var $but = $("#but4").clone(true);
			
			$("#but11").after($but);

		});	

		$("table td>p").live('click',function(){$(this).css({'color':'red'});});
		
		
		//$("#usName").click(function()
		//{
		//	$(this).val('請輸入');
		//});
		
		//$("#usName").bind('click','TTTTTT',function(event){$(this).val('清輸入..........');alert(event.data);});
		
		$("body").bind('mousemove','TTTTTT',function(event){$("#usName").val('X:'+event.pageX+" Y:"+event.pageY)});
		
		$("body").bind('click','TTTTTT',function(event){alert(event.srcElement)});
		
		
		$("#but12").one('click','TTTTTT',function(event){alert(event.data);});
		
		
		$("#but13").click(function(){
			$("body").unbind('click');
		});
	});

</script>
<body>
	<input type="button" id="but1" value="添加小兒子"/>
	<input type="button" id="but2" value="添加大兒子"/>
	<input type="button" id="but3" value="添加弟弟"/>
	<input type="button" id="but4" value="添加哥哥"/>
	
	<input type="button" id="but5" value="刪除Table數據"/>
	<input type="button" id="but6" value="刪除第一條數據"/>
	
	<input type="button" id="but7" value="替換元素"/>
	
	<input type="button" id="but8" value="替換元素1"/>
	
	<input type="button" id="but9" value="上移"/>
	
	<input type="button" id="but10" value="下移"/>
	
	<input type="button" id="but11" value="複製"/>
	
	<input type="button" id="but12" value="一次性事件"/>
	
	<input type="button" id="but13" value="刪除事件"/>
	<table>
		
		<tr id="tr1"><td>原始數據</td></tr>
		<tr id="tr1"><td><p>模板數據</p></td></tr>
	</table>
	
	<input type="text" id="usName">
	
</body>
</html>

JQuery的學習：DOM操作

word使用：word中插入橫線

JQuery的學習：DOM操作

jQuery選擇器舉例

JQuery的學習：對錶單進行驗證（較原始）

PS 在PS中如何等比例放大縮小圖片

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結