JQUERY与DOM 添加复制移除替换包裹遍历子元素

最新推荐文章于 2022-06-08 21:51:20 发布

B1gF4ceC4t

最新推荐文章于 2022-06-08 21:51:20 发布

阅读量1.6k

点赞数

分类专栏： jQuery 文章标签： jquery

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1 获取与设置属性

[javascript]view plaincopy 
   
 <span style="font-size:24px;">$(function()  
     {  
   
         var $v = $("p");  
         var $li = $("ul li:eq(1)");  
         //获取属性及获取页面值  
         var pTitle = $v.attr("title");  
           
         alert("before:"+pTitle);  
         var title2 = $li.attr("title");  
   
         var text = $li.text();  
         //设置属性  
         var $vA= $("p");  
         $vA.attr("title","445");      
         alert("after:"+$vA.attr("title"));  
         alert(title2);  
         alert(text);  
   
     });</span>  

2 利用JS新建结点

[javascript]view plaincopy 
   
 $("#button").click(  
         function(){  
           
         var num= document.getElementById("text").value;  
         alert(num);  
         for(var i=0;i<num;i++ )  
         {  
             var input=document.createElement("input");  
               
             input.setAttribute("type", "text");  
               
             document.getElementById("div").appendChild(input);  
               
         }  
         }  
         );  

3 利用jquery操作DOM

（1）附加在后面

[javascript]view plaincopy 
   
 //在后面添加  
   
 var div=$("#div");  
 div.html="";  
 //添加第一种方式  
 div.append("<input type='text' value='123'>")  
 .append("<input type='text' value='123'>");  
 //添加第二种方式  
 $("<input type='text' value='123'>").appendTo(div)  
 alert('22');  
           

（2）附加在前面

[javascript]view plaincopy 
   
 //在前面添加  
         div.prepend("<input type='text' value='before'>");  

（3）结点的移动

[javascript]view plaincopy 
   
 //插入在XX的后面 让0在3的后面  
 $("ul li:eq(0)").insertAfter($("ul li:eq(3)"));  
   
 //让3在0后面的后面  
 $("ul li:eq(0)").after($("ul li:eq(3)"));  

（4）结点的移除

[javascript]view plaincopy 
   
 //移除  
           
         //（1）第一种方式  
         //删除 并返回被删除的结点对象  （可以间接实现移除）  
         var removed=$("ul li:eq(2)").remove();  
           
         $("ul li:eq(0)").append(removed);  
           
         //（2）第二种方式 按照属性删除  
           
         $("ul li").remove("li[title=1]");  
           
         // 清空元素内容  
           
         $("ul li:eq(0)").empty();

示例动态添加文件上传窗口，动态删除

[javascript]view plaincopy 
   
 <script type="text/javascript">  
     $(function()  
     {  
         var div = $("#div")  
         $("#button").click(function()  
   
         {  
   
             var br = $("<br>");  
             var file = $("<input type='file' />");  
             var btn = $("<input type='button' value='remove'/>");  
             $("#div").append(br).append(file).append(btn);  
   
             btn.click(  
   
             function()  
             {  
                 br.remove();  
                 file.remove();  
                 btn.remove();  
   
             }  
   
             )  
   
           
         }  
   
         )  
   
     })  
 </script>  
   
   
   
   
   
 </head>  
   
 <body>  
     <input type="file" id="file" />  
     <input type="button" value="more" id="button">  
     <div id="div"></div>  
 </body>  

（5）结点的复制

[javascript]view plaincopy 
   
 <script type="text/javascript">  
     $(function()  
     {  
         $("ul li").click(function()  
         {  
 //参数true表示克隆出来的对象与原对象拥有相同的属性 方法  
             $(this).clone(true).appendTo($("ul"));  
         });  
     });  
 </script>  
 </head>  
   
 <body>  
     <p title="123">option</p>  
     <ul>  
         <li>0</li>  
         <li title="1">1</li>  
         <li>2</li>  
         <li>3</li>  
     </ul>  
 </body>  

(6) 替换结点

[javascript]view plaincopy 
   
 $(function()  
 {  
   
   
 //后面替换前面的  
  //$("p").replaceWith("<a href='http://www.google.com'>Google.com</a>");  
 //前面替换后面的  
 $("<a href='http://www.google.com'>Google.com</a>").replaceAll("p");  
 });  

（7）元素的包裹

[javascript]view plaincopy 
   
 $(function()  
 {//会面包裹前面的  
  //$("p").wrap("<a href='http://www.google.com'><b></b></a>");  
 //前面包裹后面的  
     $("p").wrapInner("<a href='http://www.google.com'><b></b></a>");  
 });  

(8) 操作CSS

[javascript]view plaincopy 
   
 <style type="text/css">  
   
 .high{  
 font-weight: bold;  
 color:red  
 }  
   
 .another{  
 font-style:italic;  
 color:green  
 }  
   
   
   
 </style>  
   
  <script type="text/javascript" src="jquery-1.4.4.js"></script>  
   
 <script type="text/javascript">  
   
  $(function()  
  {  
     $("input:eq(0)").click(function()  
     {  
         alert($('p').attr("class"));  
     });  
   
     $("input:eq(1)").click(function()  
     {  
         $("p").attr("class", "high");  
     });  
   
     $("input:eq(2)").click(function()  
     {  
         $("p").addClass("high");  
     });  
   
     $("input:eq(3)").click(function()  
     {  
         $("p").removeClass("high");  
     });  
   
     $("input:eq(4)").click(function()  
     {  
         $("p").removeClass();  
     });  
   
     $("input:eq(5)").click(function()  
     {  
         //两种状态切换  添加与删除  
         $("p").toggleClass("another");  
     });  
   
     $("input:eq(6)").click(function()  
     {  
     //判断元素是否具有制定样式  
         //alert($('p').hasClass('another'));  
   
         alert($('p').is('.another'));  
     });  
   
   
   
  });  

（10）对按钮内容的修饰

[javascript]view plaincopy 
   
 $(function()  
  {  
     $("input:eq(0)").click(function()  
     {  
         alert($("p").html());  
     });  
   
     $("input:eq(1)").click(function()  
     {  
         alert($("p").text());  
     });  
   
     $("input:eq(2)").click(function()  
     {  
         $("p").html('<a href="http://www.google.com">hello world</a>');  
     });  
   
     $("input:eq(3)").click(function()  
     {  
         $("p").text('<a href="http://www.google.com">hello world</a>');  
     });  
   
     $("input:eq(4)").click(function()  
     {  
         alert($(this).val());  
     });  
   
     $("input:eq(5)").click(function()  
     {  
         $(this).val('hello world');  
     });  
  });  

利用 focus和blur事件实现输入框默认值显隐

[javascript]view plaincopy 
   
 $("#username").focus(function()  
 {  
     if($(this).val()=="username")  
     {  
     $(this).val("");  
     }  
 }).blur(function()  
 {  
   
     if($(this).val()=="")  
       
     {  
     $(this).val("username");  
     }  

11 对子元素进行遍历

[javascript]view plaincopy 
   
 $(function()  
 {  
     var v1 = $("body").children();  
     var v2 = $("p").children();  
     var v3 = $("ul").children();  
       
     alert(v1.length);  
     alert(v2.length);  
     alert(v3.length);  
   
     for(var i = 0; i < v3.length; i++)  
     {  
         alert(v3[i].innerHTML);  
     }  
   
 }  

B1gF4ceC4t

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQUERY与DOM 添加复制移除替换包裹遍历子元素

1 获取与设置属性[javascript] view plain copy"font-size:24px;">$(function() { var $v = $("p"); var $li = $("ul li:eq(1)"); //获取属性及
复制链接

扫一扫