test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>test.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="xx"/> <input type="text" value="yy"/> <input type="text" value="zz"/> <script type="text/Javascript"> alert( $("input").val() );//xx默認首項 </script> </body></html>each.html<!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> <script type="text/javascript"> /*用JS語法創建一個一維數組，存入string類型的姓名，再迭代 var nameArray = new Array("哈哈","呵呵","嘻嘻"); for(var i=0;i<nameArray.length;i++){ document.write(nameArray[i]+"<br/>"); }*/ /*用JSON語法創建一個一維數組，存入string類型的姓名，再迭代 var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js對象 var $nameArray = $(nameArray);//jquery對象 $nameArray.each(function(){ this表示數組中每一個元素，this屬性js對象，this代表string類型 alert(this); });*/ //用JSON語法創建一個一維數組，存入object類型的姓名和薪水，再迭代 var nameArray = [ { name : "哈哈", sal : 6000 }, { name : "嘿嘿", sal : 7000 }, { name : "笨笨", sal : 8000 } ]; var $nameArray = $(nameArray); $nameArray.each(function(){ //this代表object類型 alert(this.name + ":"+this.sal); }); </script> </body></html>append_PRepend.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>method_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> <ul> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul> <hr/> <div>這是子元素，要插入到父元素內</div> <script type="text/javascript"> //DIV標簽插入到UL標簽之后(父子關系) //$("ul").append( $("div") ); //DIV標簽插入到UL標簽之前(父子關系) $("ul").prepend( $("div") ); </script> </body></html>attr.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>method_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> <form> <table> <tr> <td> <input type="text" name="username" value="張三"/> </td> <td> <input type="passWord" name="password" value="123456"/> </td> </tr> </table> </form> <script type="text/javascript"> //取得form里第一個input元素的type屬性 //alert( $("form input:first").attr("type") );//text //設置form里最后個input元素的為只讀文本框 //$("form input:last").attr("readonly","readonly") //$(":password").attr("readonly","readonly") </script> </body></html>create_element_text_attr.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>method_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> <script type="text/javascript"> //創建div元素，添加"哈哈"文本，ID屬性，并添加到文檔中 //<body><div id="2015">哈哈</div></body> /*js方式 var divElement = document.createElement("div"); divElement.innerHTML = "哈哈哈"; divElement.setAttribute("id","2015"); divElement.id = "2015"; document.body.appendChild(divElement);*/ //jquery方式 var $div = $("<div id='2015'>哈哈哈哈哈</div>"); //$("body").append( $div ); $(document.body).append( $div ); </script> </body></html>remove_element.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>method_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> <ul id="a"> <li>第一項</li> <li id="secondID">第二項</li> <li>第三項</li> </ul> <ul id="b"> <li>第一條</li> <li id="secondID">第二條</li> <li>第三條</li> </ul> <div>這是div元素</div> <script type="text/javascript"> //刪除ID為secondID的LI元素 //$("#secondID").remove(); //刪除所有LI元素 //$("#a li").remove(); //刪除UL元素 $("#b").remove(); </script> </body></html>clone_true.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>method_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> <input type="button" value="原按鈕" onclick="alert('靜態事件')"/> <script type="text/javascript"> //復制原input元素，添加到原input元素后，與其同級 /* var $old = $(":button"); var $new = $old.clone(); $new.val("新按鈕"); $old.after( $new ); */ //為原input元素動態添加單擊事件，且復制原input元素， var $old = $(":button"); $old.click(function(){ alert("動態事件"); }); //添加到原input元素后，與其同級，且和原按鈕有一樣的行為 var $new = $old.clone(true); $new.val("新按鈕"); $old.after( $new ); </script> </body></html>replaceWith.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>method_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> <table border="1" align="center"> <tr> <td> <div style="width:165px;height:23px"> 雙擊會被替換成文本框 </div> </td> <td> 不會變 </td> </tr> </table> <script type="text/javascript"> //雙擊<div>中的文本，用文本框替換文本 $("div").dblclick( function(){ var $text = $("<input type='text' style='width:165px;height:23px'/>"); //文本框替代div標簽 $(this).replaceWith( $text ); } ); </script> </body></html>removeAttr.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>method_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> <table> <tr> <td> 添加屬性border/align/width </td> <td> 刪除屬性align </td> </tr> </table> <script type="text/javascript"> //為<table>元素添加屬性border/align/width var $table = $("table").attr("border","2").attr("align","right").attr("width","60%") //將<table>元素的align屬性刪除 $table.removeAttr("align"); </script> </body></html>addClass_removeClass_toggleClass_hasClass.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>method_1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/CSS"> .myClass{ font-size:30px; color:red } </style> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <div>無樣式</div> <div class="myClass">有樣式</div> <script type="text/javascript"> //為無樣式的DIV添加樣式 $("div:first").addClass("myClass"); //為有樣式的DIV刪除樣式 $("div:last").removeClass("myClass"); //切換樣式，即有樣式的變成無樣式，無樣式的變成有樣式 $("div").toggleClass("myClass"); //最后一個DIV是否有樣式 var flag = $("div:last").hasClass("myClass"); alert(flag?"有樣式":"無樣式"); </script> </body></html>offset_width_height.html<!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> <img src="../images/zgl.jpg"/> <script type="text/javascript"> //獲取圖片的坐標 var offset = $("img").offset(); var x = offset.left; var y = offset.top; alert(x+":"+y); //設置圖片的坐標 $("img").offset({ top:100, left:200 }); //獲取圖片的寬高 var w = $("img").width(); var h = $("img").height(); alert(w+":"+h); //設置圖片的寬高 $("img").width(500); $("img").height(600); </script> </body></html>children_next_prev_siblings.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>method_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>Hello</p> <div> <span> Hello Again <b> Bold </b> </span> </div> <p>And Again</p> <span>And Span</span> <script type="text/javascript"> //取得div元素的直接子元素內容，不含后代元素 var $span = $("div").children(); var content = $span.html();//包含子標簽 var content = $span.text();//不包含子標簽 alert(content); //取得div元素的下一個同級的兄弟元素內容 var $p = $("div").next(); alert( $p.text() ); //取得div元素的上一個同級的兄弟元素內容 alert( $("div").prev().text() ); //依次取得div元素的上下一個同級的所有兄弟元素的內容 var $all = $("div").siblings("p"); $all.each(function(){ alert( $(this).html() ); }); </script> </body></html>動畫效果show_hide.html
<!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> <p> <img src="../images/zgl.jpg"/> </p> <script type="text/javascript"> //圖片隱蔽 $("img").hide(5000); //休息3秒 window.setTimeout(function(){ //圖片顯示 $("img").show(5000); },3000); </script> </body></html>fadeIn_fadeOut.html
<!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> <p> <img src="../images/zgl.jpg" style="display:none"/> </p> <script type="text/javascript"> //淡入顯示圖片 $("img").fadeIn(3000); //淡出隱蔽圖片 $("img").fadeOut(3000); </script> </body></html>slideUp_slideDown.html
<!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> 中國0<br/> 中國1<br/> 中國2<br/> 中國3<br/> 中國4<br/> 中國5<br/> 中國6<br/> 中國7<br/> 中國8<br/> 中國9<br/> </div> <input type="button" value="我的好友"/> <script type="text/javascript"> //向上下滑動 $(":button").click(function(){ //div標標上下移動 $("div").slideToggle(1000); }); </script> </body></html>
新聞熱點
疑難解答
