首页 > 代码库 > jquery api 常见api 元素操作例子

jquery api 常见api 元素操作例子

2024-07-09 17:44:27   221人阅读

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>

 


联系
我们