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="60px">
10         <option>广东</option>
11     </select>    
12     <hr/>    
13     <select id="cityID" size="2" style="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="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='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='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>