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)將索引號為奇數(shù)的行背景色設為藍色 $("table tr:odd").CSS("background-color","blue"); //NO2)將索引號為偶數(shù)的行背景色設為黃色 $("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="選中的個數(shù)"/> <input type="button" value="依次顯示選中的value"/> <script type="text/javascript"> //定位"選中的個數(shù)"按鈕，同時添加單擊事件 $(":button:first").click( function(){ //獲取選中的復選框個數(shù) 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.動態(tài)增加表格行<!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"> <!-- 動態(tài)增加行 <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{ //創(chuàng)建1個tr標簽 var $tr = $("<tr></tr>"); //創(chuàng)建3個td標簽 var $td1 = $("<td>"+username+"</td>"); var $td2 = $("<td>"+password+"</td>"); var $td3 = $("<td></td>"); //創(chuàng)建input標簽，設置為刪除按鈕 var $del = $("<input type='button' value='刪除'>"); //為刪除按鈕動態(tài)添加單擊事件 $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); //清空用戶名和密碼文本框中的內(nèi)容 $("#usernameID").val(""); $("#passwordID").val(""); } }); </script> </html>6.復選框的表格內(nèi)全選，取消，和反選<!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>狀態(tài)</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(){ //獲取該全選復選框的狀態(tài) 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("傳統(tǒng)"); } $(function(){ alert("現(xiàn)代"); }); </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>標簽觸發(fā)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瀏覽器會自動創(chuàng)建event這個事件對象，那么程序員可以根據(jù)需要來使用該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頁面時觸發(fā) $(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; //獲取文本框的中內(nèi)容 var name = $(":text").val(); //去二邊的空格 name = $.trim(name); //如果沒有填內(nèi)容 if(name.length == 0){ alert("用戶名必填"); //將光標定位于文本框中 $(":text").focus(); //清空文本框中的內(nèi)容 $(":text").val(""); }else{ //調(diào)用方法 flag = isChinese(name); //如果不是中文 if(!flag){ alert("用戶名必須填中文"); //將光標定位于文本框中 $(":text").focus(); //清空文本框中的內(nèi)容 $(":text").val(""); } } return flag; }); </script> </body></html>
新聞熱點
疑難解答
