首页 > 代码库 > jquery api 常见api 元素操作例子
jquery api 常见api 元素操作例子
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 Again13 <b>14 Bold15 </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/width13 </td>14 <td>15 删除属性align16 </td>17 </tr>18 </table>19 <script type="text/javascript">20 //为<table>元素添加属性border/align/width21 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 = http://www.mamicode.com/$("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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。