4 Jquery中的dom操作

作者: 流光已至 | 来源:发表于2018-08-04 17:34 被阅读0次

会jquery 就能快速快速上手 vue？你仿佛在说笑
JQuery 17
jQuery中的DOM操作
4 Jquery中的dom操作
jQuery中的DOM操作
Jquery之基础知识开篇（三）--DOM操作
03-老马jQuery教程-DOM操作(上）
jQuery操作DOM演示
2019-02-01
JQuery学习——（3）JQueryHTML

1 append追加

    function myclick(){
       
        var len = $("li").length;
        //在ul内追加jQuery的li对象
        var liObj = $("<li>列表项"+(len+1)+"</li>")
       
        $("ul").append(liObj);
    }

prepend 在前面追加

2 菜单项移动小练习

<script type="text/javascript">
   
    $(function(){
        
    })
    //右移
    function rightMove(){
        
        //获得左面被选中的option
        $("#perm option").each(function(){
            var opt = $(this).attr("selected");
            
            if(opt=="selected"){
                
                $("#selPerm").append($(this));
            }
        })
        
    
    }
    
    
  //右移全部
    function rightMoveAll(){
        
   
        $("#perm option").each(function(){
            
                $("#selPerm").append($(this));
      
       })
    }
  
  //左移
    //获得左面被选中的option
    function leftMove(){
        $("#selPerm option").each(function(){
            var opt = $(this).attr("selected");
            
            if(opt=="selected"){
                
                $("#perm").append($(this));
            }
        })
    
    }
    function leftMoveAll(){
        $("#selPerm option").each(function(){
            
                
                $("#perm").append($(this));
        
        })
    }
    
 </script>
 <style type="text/css">
     select{
         width:200px;
         
         height: 200px;
       
     }
 
 </style>
</head>
<body>
  <table>
      <tr>
          <td>
              <select id="perm"  multiple="multiple">
              
                  <option>登陆</option>
                  <option>员工管理</option>
                  <option>部门管理</option>
                 <option>订单管理</option>
               
              
              </select>
          
          </td>
          <td>
                <input type="button" value=">" onclick="rightMove()"/><br>
                <input type="button" value=">>" onclick="rightMoveAll()"/><br>
                <input type="button" value="&lt" onclick="leftMove()"/><br>
                <input type="button" value="&lt&lt" onclick="leftMoveAll()"/>
          </td>
          <td>
               <select id="selPerm"  multiple="multiple">
                  
              
              </select>
            
          
          
          </td>
      
      </tr>
  
  
  
  </table>
        
</body>

效果如下：

此移动效果为剪切，[$(this).clone()]效果为复制。

3 外部节点追加

4 节点删除

小练习

  function add(){
         
     var username= $("#username").val();
     var age= $("#age").val();
     var address= $("#address").val();  
      //创建一行
     var trObj = $("<tr><td><input type=\"checkbox\"></td><td>"+username+"</td><td>"+age+"</td><td>"+address+"</td><td><a href=\"javascript:void(0)\" onclick=\"del(this)\">删除</a></td></tr>")
     $("#mytb").append(trObj);
      
      
      
    }
    // 删除
    function del(obj){
        //找父节点
        $(obj).parent().parent().remove();
        
    }
    
    // 全选删除
    function checkAll(obj){
        
        var checkAllStatus = $(obj).attr("checked");
        if(checkAllStatus == 'checked'){
            $("tbody input").attr("checked","checked");
        }else{
            $("tbody input").removeAttr("checked");
        }
    }
    
   function delBatch(){
       
       $("tbody input:checked").parent().parent().remove();
       
       
   }
    
 </script>
 <style type="text/css">
     table{
         width:800px;
         border-collapse: collapse;
       
     }
 
 </style>
</head>
<body>
   <table>
        <tr>
           <td>姓名：  <input id="username" type="text" ></td>
            <td>年龄：  <input id="age" type="text" ></td>  
             <td>地址：  <input id="address" type="text" ></td>
            <td>
                <input value="添加" type="button" onclick="add()" >
                <input value="批量删除" type="button" onclick="delBatch()" >
            </td>
        </tr>
        
   
   </table>

    <table border="1">
        <thead>
            <tr>
                <td><input id="checkAll" type="checkbox" onchange="checkAll(this)"></td>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody id="mytb">
            <tr>
             <td><input type="checkbox"></td>
                <td>大德</td>
                <td>20</td>
                <td>长春</td>
                <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
            </tr>
        </tbody>


    </table>


</body>

效果如下：