jQuery学习笔记——jQuery中DOM操作（1）-CFANZ编程社区


  描述：jQuery中的DOM操作方法1
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery中的DOM操作</title>
    <style type="text/css">
      .anthor{
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <p title="选择你喜欢的水果">选择你喜欢的水果</p>
    <ul>
      <li title="苹果">苹果</li>
      <li title="橘子">橘子</li>
      <li title="菠萝">菠萝</li>
    </ul>
  </body>
  <script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    /*
     * 查找节点
     */
    
    //查找元素节点
    /*
    var $li = $("ul li:eq(1)");   //获取ul里面的第2个li节点
    var li_txt = $li.text();    //获取文本内容
    alert(li_txt);      //橘子
    */
    
    //查找属性节点    .attr()
    /*
    var $para = $("p");
    var p_txt = $para.attr("title");
    alert(p_txt);   //选择你喜欢的水果
    */
    
    /*
     * 创建节点      $(html)
     */
    
    /*
    var $li_1 = $("<li title='香蕉'>香蕉</li>");
    var $li_2 = $("<li title='雪梨'>雪梨</li>");
    //添加到文档中
    $('ul').append($li_1);
    //$('ul').append($li_2);
    $li_2.appendTo('ul');
    */
    
    /*
     * 插入节点
     *  方法： append()  appendTo()
     *      prepend()  prependTo()
     *      after() insertAfter()
     *      before()  insertBefort()
     *        
     */
    /*
    var $li_1 = $("<li title='香蕉'>香蕉</li>");
    var $li_2 = $("<li title='雪梨'>雪梨</li>");
    var $li_3 = $("<li title='其他'>其他</li>");
    
    var $ul = $("ul");
    var $two_li = $("ul li:eq(1)");
    $ul.append($li_1);
    $ul.append($li_2);
    $li_3.insertBefore($two_li);*/
    
    //对DOM元素进行移动
    /*var $li_1 = $("ul li:eq(1)");//获取ul节点中第二个li元素节点
    var $li_2 = $("ul li:eq(2)");
    $li_2.insertBefore($li_1);*/
    
    /*
     * 删除节点
     *  方法：1、remove()
     *     2、detach()
     *     3、empty()
     */
    
    //remove()方法
        //同时删除所有后代节点，返回一个指向已被删除节点的引用
    /*    
    var $li_1 = $("ul li:eq(1)").remove();
    $li_1.appendTo("ul");   //把删除的节点重新添加到ul元素里
    */
    //可以直接用appendTo()方法的特性来简化以上代码，appendTo()方法也可以用来移动元素
    //移动时首先从文档中删除此元素，然后将该元素插入到文档中的指定节点
    /*
    $("ul li:eq(1)").appendTo("ul");
    */
    
    //detach()方法不会把匹配的元素从jQuery对象中删除，因而所有绑定的事件、附加的数据都会保留下来
    //empty()方法只是把元素的所有后代节点内容清空
    
    /*
     * 复制节点     clone()方法
     */
    /*
    $("ul li").click(function(){
      $(this).clone(true).appendTo('ul');//复制当前单击的节点，并将它追加到ul元素中
      //clone()方法中参数true，表示复制得到的元素同样具有复制功能
    })*/
    
    /*
     * 替换节点
     * 
     *    方法1、replaceWith()
     *      $('p').replaceWith("<strong>你最不喜欢的水果是：</strong>")
     *    方法2、replaceAll()
     *      $("<strong>你最不喜欢的水果是</strong>").replaceAll('p');
     * 
     * 如果被替换的元素已经绑定事件，则替换后的元素需要重新绑定事件
     */
    
    /*
     * 包裹节点   
     *    warp()方法    即在一个标签外面再加一个标签
     * 
     *    $("strong").wrap("<p></p>"); //用p标签把strong标签包裹起来
     * 其他方法：
     *    wrapAll()方法   wrapInner()方法
     */
    
    
    
    
    
  </script>
</html>