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>
新闻热点
疑难解答
