jquery 事件小結

2019-11-14 12:18:05
字體：大中小
來源：轉載
供稿：網友
1.定位標簽
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>exe_1.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  	<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>    	<p>段落1</p>  	<p>段落2</p>  	<p>段落3</p>  	  	<script type="text/Javascript">  		//定位3個p標簽  		$("p").click( function(){  			alert( $(this).text() );  		} )  	</script>  	  </body></html>
2.表格各行變色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>exe_2.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  	<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>  	<form>		<table border="1" align="center" width="70%">			<tr>				<th>用戶名</th>				<th>密碼</th>				<th>0</th>			</tr>			<tr>				<td>張三</td>				<td>123456</td>				<th>1</th>			</tr>			<tr>				<td>李四</td>				<td>654321</td>				<th>2</th>			</tr>			<tr>				<td>王五</td>				<td>162534</td>				<th>3</th>			</tr>		</table> 	</form>			<script type="text/javascript">		//NO1)將索引號為奇數的行背景色設為藍色		$("table tr:odd").CSS("background-color","blue");						//NO2)將索引號為偶數的行背景色設為黃色		$("table tr:even").css("background-color","yellow");		//NO3)將第一行背景色設為粉色		$("table tr:first").css("background-color","pink");			</script> 	    </body></html> 
3.復選框的事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>exe_3.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  	<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>		<input type="checkbox" value="籃球"/>籃球	<input type="checkbox" value="排球"/>排球		<input type="checkbox" value="羽毛球"/>羽毛球		<input type="checkbox" value="乒乓球"/>乒乓球		<input type="button" value="選中的個數"/>	<input type="button" value="依次顯示選中的value"/>		<script type="text/javascript">		//定位"選中的個數"按鈕，同時添加單擊事件		$(":button:first").click( function(){			//獲取選中的復選框個數			var size = $(":checkbox:checked").size();				//判斷			if(size == 0){				alert("這家伙太賴了");			}else{				alert("你選中了"+size+"個項目");			}		} );		//定位"依次顯示選中的value"按鈕，同時添加單擊事件		$(":button:last").click( function(){			//獲取選中的復選框			var $checkbox = $(":checkbox:checked");			//迭代所有選中的復選框的value屬性值			$checkbox.each(function(){				//alert( $(this).val() );//提倡				alert( this.value );//不提倡			});		} );	</script>	  </body></html>
4.下拉框的批量右移操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>	<meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>		  	<div>		  	<select style="width:60px" multiple size="10" id="leftID">	  		<option>選項A</option>	  		<option>選項B</option>	  		<option>選項C</option>	  		<option>選項D</option>	  		<option>選項E</option>	  		<option>選項F</option>	  		<option>選項G</option>	  		<option>選項H</option>	  		<option>選項I</option>	  		<option>選項J</option>	  	</select>  	</div>  	<div style="position:absolute;left:100px;top:60px">  		<input type="button" value="批量右移" id="rightMoveID"/>  	</div>  	<div style="position:absolute;left:100px;top:90px">  		<input type="button" value="全部右移" id="rightMoveAllID"/>  	</div>  	<div style="position:absolute;left:220px;top:20px">		  	<select multiple size="10" style="width:60px" id="rightID">	  	</select>  	</div>  </body>    <script type="text/javascript">  		  		//雙擊右移  		//定位左邊的下拉框，同時添加雙擊事件  		$("#leftID").dblclick(function(){  			//獲取雙擊時選中的option標簽  			var $option = $("#leftID option:selected");  			//將選中的option標簽移動到右邊的下拉框中  			$("#rightID").append( $option );  		});  			  	//批量右移	  	//定位批量右移按鈕，同時添加單擊事件		$("#rightMoveID").click(function(){			//獲取左邊下拉框中選中的option標簽			var $option = $("#leftID option:selected");			//將選中的option標簽移動到右邊的下拉框中  			$("#rightID").append( $option );		});	  	  		//全部右移  		//定位全部右移按鈕，同時添加單擊事件  		$("#rightMoveAllID").click(function(){  			//獲取左邊下拉框中所有的option標簽  			var $option = $("#leftID option");  			//將選中的option標簽移動到右邊的下拉框中  			$("#rightID").append( $option );  		});  		  </script>  </html>5.動態增加表格行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>	<meta http-equiv="content-type" content="text/html; charset=UTF-8">	<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>   </head>  <body>  	<table id="tableID" border="1" align="center" width="60%">  		<thead>	  		<tr>		  			<th>用戶名</th>	  			<th>密碼</th>	  			<th>操作</th>	  		</tr>  		</thead>  		<tbody id="tbodyID">  			<!-- 動態增加行   			<tr>  				<td>哈哈</td>  				<td>123</td>  				<td><input type="button" value="刪除" onclick=""/></td>  			</tr>  			-->  		</tbody>  	</table>  	  	<hr/>  	用戶名：<input type="text" id="usernameID"/>  	密碼：  <input type="text" id="passWordID"/>  			<input type="button" value="增加" id="addID"/>  			  </body>    <script type="text/javascript">  		//定位"增加"按鈕，同時添加單擊事件  		$("#addID").click(function(){  			//獲取用戶名和密碼的值  			var username = $("#usernameID").val();  			var password = $("#passwordID").val();  			//去掉二邊的空格  			username = $.trim(username);  			password = $.trim(password);  			//如果用戶名或密碼沒有填  			if(username.length == 0 || password.length == 0){				//提示用戶  				  				alert("用戶名或密碼沒有填");  			}else{  				//創建1個tr標簽  				var $tr = $("<tr></tr>");  				//創建3個td標簽  				var $td1 = $("<td>"+username+"</td>");  				var $td2 = $("<td>"+password+"</td>");  				var $td3 = $("<td></td>");  				//創建input標簽，設置為刪除按鈕  				var $del = $("<input type='button' value='刪除'>");  				//為刪除按鈕動態添加單擊事件  				$del.click(function(){  					//刪除按鈕所有的行，即$tr對象  					$tr.remove();  				});  				//將刪除按鈕添加到td3標簽中  				$td3.append($del);  				//將3個td標簽依次添加到tr標簽中  				$tr.append($td1);  				$tr.append($td2);  				$tr.append($td3);  				//將tr標簽添加到tbody標簽中  				$("#tbodyID").append($tr);  				//清空用戶名和密碼文本框中的內容  				$("#usernameID").val("");  				$("#passwordID").val("");  			}  		});  </script>  </html>6.復選框的表格內全選，取消，和反選
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>	<head>		<meta http-equiv="content-type" content="text/html; charset=UTF-8">		<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>	</head>	<body>		<table border="1" align="center">			<thead>				<tr>					<th>狀態</th>					<th>用戶名</th>				</tr>			</thead>			<tbody>				<tr>					<td><input type="checkbox" /></td>					<td>趙</td>				</tr>				<tr>					<td><input type="checkbox" /></td>					<td>錢</td>				</tr>				<tr>					<td><input type="checkbox" /></td>					<td>孫</td>				</tr>				<tr>					<td><input type="checkbox" /></td>					<td>李</td>				</tr>				<tr>					<td><input type="checkbox" /></td>					<td>周</td>				</tr>			</tbody>			<tfoot>				<tr>					<td>						<input type="checkbox" />						全選					</td>					<td>						<input type="button" value="全反選" />					</td>				</tr>			</tfoot>		</table>				<script type="text/javascript">			//全選中和全取消			//定位tfoot中的全選復選框，同時添加單擊事件			$("tfoot input:checkbox").click(function(){				//獲取該全選復選框的狀態				var flag = this.checked; 				//如果選中				if(flag){					//將tbody中的所有復選框選中					$("tbody input:checkbox").attr("checked","checked");				//如果未選中				}else{					//將tbody中的所有復選框取消					$("tbody input:checkbox").removeAttr("checked");				}			});					</script>				<script type="text/javascript">			//全反選			//定位tfoot標簽中的全反選按鈕，同時添加單擊事件			$("tfoot input:button").click(function(){				//將tbody標簽中的所有選中的復選框失效				$("tbody input:checkbox:checked").attr("disabled","disabled");				//將tbody標簽中的所有生效的復選框選中				$("tbody input:checkbox:enabled").attr("checked","checked");				//將tbody標簽中的所有失效的復選框生效且設置為未選中				$("tbody input:checkbox:disabled").removeAttr("disabled").removeAttr("checked");			});					</script>			</body></html>========================================================================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>ready.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>  	<script type="text/javascript">		window.onload = function(){			alert("傳統");		}		$(function(){			alert("現代");		});			</script>		  	  </body></html>====================================================================================select框change事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>ready.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>		<select id="city">		<option value="bj">北京</option>			<option value="sh">上海</option>			<option value="gz">廣州</option>	</select>		<script type="text/javascript">		//當<select>標簽觸發onchange事件,顯示選中<option>的value和innerHTML屬性的值		$("#city").change( function(){ 			var $option = $("#city option:selected");			var value = $option.val();			var text = $option.text();			alert(value+":"+text);		} );	</script>		  </body></html>
========================================================================================================
文本框焦點
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>focus.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>		<input type="text" value="加載頁面時獲取光標并選中所有文字" size="50"/>			<script type="text/javascript">		//加載頁面時獲取光標并選中所有文字		$(function(){			//光標定位文本框			$(":text").focus();			//選中文本框的所有文本			$(":text").select();		});	</script>    </body></html>========================================================================================================
按鍵事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>keyup.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>	<script type="text/javascript">		//當按鍵彈起時，顯示所按鍵的unicode碼		$(function(){			//IE瀏覽器會自動創建event這個事件對象，那么程序員可以根據需要來使用該event對象			$(document).keyup(function(){				//獲取按鈕的unicode編碼				var code = event.keyCode; 				alert(code);			});		});	</script>  </body></html>===============================================================================================
鼠標滾動事件顯示坐標
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>focus.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>	X=<input type="text" id="xID"/>	<br/>	Y=<input type="text" id="yID"/>	<script type="text/javascript">		//顯示鼠標移動時的X和Y座標		$(function(){			$(document).mousemove(function(){				var x = event.clientX;				var y = event.clientY;				$("#xID").val(x);				$("#yID").val(y);			});				});	</script>	  </body></html>=========================================================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>06_mouSEOver_mouseout.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>	<table border="2" align="center" width="80%" id="tableID">		<tr>			<td>張三</td>			<td>男</td>			<td>22</td>		</tr>		<tr>			<td>李四</td>			<td>男</td>			<td>24</td>		</tr>		<tr>			<td>王五</td>			<td>男</td>			<td>26</td>		</tr>		<tr>			<td>周六</td>			<td>男</td>			<td>28</td>		</tr>	</table>		<hr/>		<img height="120px" src="../images/zgl.jpg" style="position:absolute;left:30%;border-style:dashed;border-color:white"/>	<img height="120px" src="../images/lb.jpg" style="position:absolute;left:60%;border-style:dashed;border-color:white"/>		<script type="text/javascript">			//鼠標移到某行上，某行背景變色		$("table tr").mouseover(function(){			$(this).css("background-color","inactivecaption");		});					//鼠標移出某行，某行還原		$("table tr").mouseout(function(){			$(this).css("background-color","white");		});				//鼠標移到某圖片上，為圖片加邊框		$("img").mouseover(function(){			$(this).css("border-color","red");		});				//鼠標移出圖片，圖片還原		$("img").mouseout(function(){			$(this).css("border-color","white");		});			</script>	  </body></html>===============================================================================================================
表單提交簡單驗證：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>submit.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>  	  	<form action="06_mouseover_mouseout.html" method="post">		用戶名：<input type="text"/>		<input type="submit" value="表單提交"/>	</form>	<script type="text/javascript">		//瀏覽器加載web頁面時觸發		$(function(){			//將光標定位于文本框中			$(":text").focus();		});			</script>	<script type="text/javascript">		//檢測是否為中文，true表示是中文，false表示非中文		function isChinese(str){			if(/^[/u3220-/uFA29]+$/.test(str)){				return true;			}else{				return false;			}		}	</script>	<script type="text/javascript">		//當表單提交前檢測		$("form").submit(function(){			var flag = false;			//獲取文本框的中內容			var name = $(":text").val();			//去二邊的空格			name = $.trim(name);			//如果沒有填內容			if(name.length == 0){				alert("用戶名必填");				//將光標定位于文本框中				$(":text").focus();				//清空文本框中的內容				$(":text").val("");			}else{				//調用方法				flag = isChinese(name);				//如果不是中文				if(!flag){					alert("用戶名必須填中文");					//將光標定位于文本框中					$(":text").focus();					//清空文本框中的內容					$(":text").val("");				}			}			return flag;		});	</script>	  </body></html>