jquery——节点操作1

最新推荐文章于 2022-05-25 13:47:17 发布

幸运的左右

最新推荐文章于 2022-05-25 13:47:17 发布

阅读量600

点赞数

分类专栏： RIA

本文链接：https://blog.csdn.net/love_xxxooo/article/details/79362472

版权

RIA 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <link href="css/new_file.css" rel="stylesheet" type="text/css" />
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-1.11.0.js" ></script>
       <script>
          $(function(){
               //获得当前p标签下的含有class属性的所有标签，并给点击事件
               $("p[class]").click(function(){
                   if($(this).attr("class")=="clazz"){
                       //如果是，就把属性值重新赋值成claxx；
                       $(this).attr("class","claxx");
                   }else{
                       //否则，就把属性值重新赋值成clazz；
                       $(this).attr("class","clazz");
                   }
                })
               //添加按钮，点击添加时，把选中的p标签移入到addDiv中
               $("#but1").click(function(){
                   var p=$(".claxx").detach();
                   $("#addDiv").append(p);

               })
               //移除按钮，点击移除时，把选中的p标签移入到removeDiv中
               $("#but3").click(function(){
                   var p=$(".clazz").detach();
                   $("#removeDiv").append(p);

               })

               //添加全部按钮but2,把所有的p标签移入到addDiv中
               $("#but2").click(function(){
                   var pAll=$("p").detach();
                   $("#addDiv").append(pAll);

               })
               //移除全部按钮，点击移除全部时，把所有的p标签移入到removeDiv中
               $("#but4").click(function(){
                   var pAll=$("p").detach();
                   $("#removeDiv").append(pAll);

               })

           })




       </script>
   </head>
   <body>
       <div class="div_z" id="removeDiv">
       <p class="clazz">张三</p>
       <p class="clazz">李四</p>
       <p class="clazz">王五</p>
       <p class="clazz">赵六</p>
       <p class="clazz">田七</p>

       </div>

       <div class="div_y">
       <input type="button" value="添加" id="but1"/><br/>
       <input type="button" value="添加全部" id="but2"/><br/>
       <input type="button" value="移除" id="but3"/><br/>
       <input type="button" value="移除全部" id="but4"/><br/>
       </div>
       <div class="div_x" id="addDiv">

       </div>

   </body>
</html>