jquery api 常见api 元素操作例子
时间：2014-06-27 16:57:44
收藏：0
阅读：390
append_prepend.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>method_1.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 7 </head> 8 <body> 9 <ul> 10 <li>第一项</li> 11 <li>第二项</li> 12 <li>第三项</li> 13 </ul> 14 <hr/> 15 <div>这是子元素，要插入到父元素内</div> 16 <script type="text/javascript"> 17 //DIV标签插入到UL标签之后(父子关系) 18 //$("ul").append( $("div") ); 19 //DIV标签插入到UL标签之前(父子关系) 20 $("ul").prepend( $("div") ); 21 </script> 22 </body> 23 </html>
append_prepend2.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>method_1.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 7 </head> 8 <body> 9 <select id="provinceID" size="2" style="width:60px"> 10 <option>广东</option> 11 </select> 12 <hr/> 13 <select id="cityID" size="2" style="width:60px"> 14 <option>湖南</option> 15 </select> 16 <script type="text/javascript"> 17 //将"广东"添加到"湖南"之后，同时从省份下拉框中删除 18 //$("#cityID").append( $("#provinceID option") ) 19 20 //将"广东"添加到"湖南"之前，同时从省份下拉框中删除 21 $("#cityID").prepend( $("#provinceID option") ) 22 </script> 23 </body> 24 </html>
after_before.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>method_1.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 7 </head> 8 <body> 9 <ul> 10 <li>第一项</li> 11 <li>第二项</li> 12 <li>第三项</li> 13 </ul> 14 <hr/> 15 <div>这是子元素，要插入到父元素外</div> 16 <script type="text/javascript"> 17 //DIV标签插入到UL标签之后(兄弟关系) 18 //$("ul").after( $("div") ); 19 20 //DIV标签插入到UL标签之前(兄弟关系) 21 $("ul").before( $("div") ); 22 23 </script> 24 </body> 25 </html>
children_next_prev_siblings.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>method_1.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 7 </head> 8 <body> 9 <p>Hello</p> 10 <div> 11 <span> 12 Hello Again 13 <b> 14 Bold 15 </b> 16 </span> 17 </div> 18 <p>And Again</p> 19 <hr/> 20 <hr/> 21 <script type="text/javascript"> 22 /*取得div元素的直接子元素内容，不含后代元素 23 $span = $("div").children(); 24 var content = $span.html(); 25 alert(content); 26 */ 27 28 /*取得div元素的下一个同级的兄弟元素内容 29 var $p = $("div").next(); 30 var content = $p.html(); 31 alert(content); 32 */ 33 34 /*取得div元素的上一个同级的兄弟元素内容 35 var $p = $("div").prev(); 36 var content = $p.html(); 37 alert(content); 38 */ 39 40 //依次取得div元素的上下一个同级的所有兄弟元素的内容 41 var $all = $("div").siblings(); 42 $all.each(function(){ 43 alert( $(this).html() ); 44 }); 45 </script> 46 </body> 47 </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="原按钮"/> <script type="text/javascript"> //复制原input元素，添加到原input元素后，与其同级 //定位原按钮， var $oldButton = $(":button"); //为原按钮添加单击事件 $oldButton.click(function(){ alert("这是行为"); }); //同时复制一份，不复制行为 //var $newButton = $oldButton.clone(); //同时复制一份，也复制行为 var $newButton = $oldButton.clone(true); //修改新按钮的文字 $newButton.val("新按钮"); //将新按钮放在原按钮之后，形成兄弟关系 $oldButton.after( $newButton ); //为原input元素动态添加单击事件，且复制原input元素，添加到原input元素后，与其 同级，且和原按钮有一样的行为 </script> </body> </html>
create_element_text_attr.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>method_1.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 7 </head> 8 <body> 9 <hr/> 10 <script type="text/javascript"> 11 //创建div元素，添加"哈哈"文本，ID属性，并添加到文档中 12 13 /*dom方式 14 var divElement = document.createElement("div"); 15 divElement.innerHTML = "哥哥"; 16 divElement.id = "2013"; 17 document.body.appendChild(divElement); 18 */ 19 20 //jquery方式 21 var $div = $("<div id=‘2013‘><font size=‘44‘ color=‘blue‘>呵呵</font></div>"); 22 $(document.body).append( $div ); 23 24 </script> 25 </body> 26 </html>
removce_element.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>method_1.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 7 </head> 8 <body> 9 <ul> 10 <li>第一项</li> 11 <li id="secondID">第二项</li> 12 <li>第三项</li> 13 </ul> 14 <div>这是div元素</div> 15 <script type="text/javascript"> 16 //删除ID为secondID的LI元素 17 //$("#secondID").remove(); 18 19 //删除所有LI元素（方式一） 20 //$("ul li").remove(); 21 22 //删除UL元素（方式二） 23 $("ul").remove(); 24 25 </script> 26 </body> 27 </html>
removeAttr.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>method_1.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 7 </head> 8 <body> 9 <table> 10 <tr> 11 <td> 12 添加属性border/align/width 13 </td> 14 <td> 15 删除属性align 16 </td> 17 </tr> 18 </table> 19 <script type="text/javascript"> 20 //为<table>元素添加属性border/align/width 21 var $table = $("table").attr("border","2").attr("align","center").attr("width","70%"); 22 23 //将<table>元素的align属性删除 24 $table.removeAttr("align"); 25 </script> 26 </body> 27 </html>
replaceWith.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>method_1.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../../js/jquery-1.8.2.js"></script> 7 </head> 8 <body> 9 <table border="1" align="center"> 10 <tr> 11 <td> 12 <div style="width:165px;height:23px"> 13 双击会被替换成文本框 14 </div> 15 </td> 16 <td> 17 不会变 18 </td> 19 </tr> 20 </table> 21 <script type="text/javascript"> 22 //双击<div>中的文本，用文本框替换文本 23 $("div").dblclick(function(){ 24 //创建文本框 25 var $input = $("<input type=‘text‘ style=‘width:165px‘/>"); 26 27 //文本框替换div标签 28 $(this).replaceWith( $input ); 29 30 //为文本框添加焦点失去事件 31 $input.blur(function(){ 32 33 //获取用户在文本框中填入的内容 34 var content = $(this).val(); 35 36 //用户div标签替换文本框 37 var $newDiv = $("<div style=‘width:165px‘>" + content + "</div>"); 38 39 $(this).replaceWith($newDiv); 40 41 42 }); 43 44 }); 45 46 47 //div标签.replaceWith(文本框); 48 49 </script> 50 </body> 51 </html>
find_attr.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>method_1.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 7 </head> 8 <body> 9 <form> 10 <table> 11 <tr> 12 <td> 13 <input type="text" name="username" value="张三"/> 14 </td> 15 <td> 16 <input type="password" name="password" value="123456"/> 17 </td> 18 </tr> 19 </table> 20 </form> 21 <script type="text/javascript"> 22 /*取得form下第一个input元素的type属性 23 var typeAttrValue = $("form input:first").attr("type"); 24 alert(typeAttrValue); 25 */ 26 27 //设置form下最后个input元素的为只读文本框 28 $("form input:last").attr("readonly","readonly"); 29 </script> 30 </body> 31 </html>
评论（0）