当前位置：首页 > 编程语言 > jquery api 常见api 元素操作例子

jquery api 常见api 元素操作例子

2020-12-13 03:30

阅读：421

标签：style   class   blog   code   http   java   

append_prepend.html

 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 html>
 3   head>
 4     title>method_1.htmltitle>
 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.htmltitle>
 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.htmltitle>
 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.htmltitle>
 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>Hellop>
10     div>
11         span>
12             Hello Again
13             b>
14                 Bold
15             b>
16         span>
17     div>
18     p>And Againp>
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.htmltitle>
    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.htmltitle>
 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 = $("
呵呵
");
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.htmltitle>
 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.htmltitle>
 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         //为元素添加属性border/align/width
21var $table = $("table").attr("border","2").attr("align","center").attr("width","70%");
2223//将
                  
         
元素的align属性删除
24        $table.removeAttr("align"); 
25script>26body>27html>
replaceWith.html


 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 html>
 3   head>
 4     title>method_1.htmltitle>
 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         //双击
中的文本，用文本框替换文本
23         $("div").dblclick(function(){
24             //创建文本框
25             var $input = $("");
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 = $("

" + content + "

");
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.htmltitle>
 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>




 


jquery api 常见api  元素操作例子,搜素材,soscw.com


jquery api 常见api  元素操作例子


标签：style   class   blog   code   http   java   


原文地址：http://www.cnblogs.com/friends-wf/p/3810019.html

上一篇：java web 项目启动

下一篇：python--用zmail发送邮件

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：jquery api 常见api 元素操作例子
文章链接：http://soscw.com/essay/27700.html

评论

亲，登录后才可以留言！

热门文章

推荐文章

最新文章

置顶文章

关于我们 | 版权声明 | 常见问题 | 素材投稿 | 联系我们 | 网站地图 |
搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。
特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：点击这里给我发消息
Copyright © 2025 soscw.com 搜素材网素材网版权所有 蜀ICP备18015633号-1