jQuery操作DOM

   <%--查找元素结点 --%>
    <script type="text/javascript">
        var $li = $("ul li:eq(1)");  //获取<ul> 中的第2个<li>结点
        var $li_txt = $li.text(); //获取第二个<li>结点的文本内容
        alert($li_txt);  //打印文本内容
    </script>

    <%--查找、添加属性 --%>
    <script type="text/javascript">
        var $p = $("p");  //获取<p>结点
        var $p_txt = $p.attr("title"); //获取p结点的title属性
        alert($p_txt); //打印属性值

        $("p").attr("id", "p1"); //设置单一属性
        $("p").attr("id":"p1","name":"test"); //设置多个属性
    </script>

     <%--删除属性 --%>
    <script type="text/javascript">
        $("p").removeAttr("title"); //删除属性
    </script>

    <%--创建元素结点 --%>
    <script type="text/javascript" >
        var $li_1 = $("<li></li>"); //创建第1个<li>结点 
        var $li_2 = $("<li/>"); //创建第2个<li>结点
        //添加到<ul>中,添到最后
        $("ul").append($li_1);
        $("ul").append($li_2);
        //链式写法
        $("ul").append($li_1).append($li_2);
    </script>

    <%--创建文本节点 --%>
    <script type="text/javascript">
        var $li_1 = $("<li>香蕉</li>");
        var $li_2 = $("<li>雪梨</li>");

        $("ul").append($li_1).append($li_2);
    </script>

    <%--创建属性结点 --%>
      <script type="text/javascript">
          var $li_1 = $("<li title='香蕉'>香蕉</li>");
          var $li_2 = $("<li title='雪梨'>雪梨</li>");
          $("ul").append($li_1).append($li_2);
    </script>

    <%--插入节点 --%>
    <p>我想说：</p>
    <script type="text/javascript">
        $("p").append("<b>你好</b>"); //<p>我想说:<b>你好</b></p>
        $("<b>你好</b>").appendTo("p"); //<p>我想说:<b>你好</b></p>

        $("p").prepend("<b>你好</b>"); //<p><b>你好</b>我想说：</p>
        $("<b>你好</b>").prepend("p"); //<p><b>你好</b>我想说：</p>

        $("p").after("<b>你好</b>"); //<p>我想说</p><b>你好</b>
        $("<b>你好</b>").insertAfter("p"); //<p>我想说</p><b>你好</b>

        $("p").before("<b>你好</b>"); //<b>你好</b><p>我想说</p>
        $("<b>你好</b>").insertBefore("p"); //<b>你好</b><p>我想说</p>
    </script>

    <%--删除结点 --%>
    <script type="text/javascript">
        var $li = $("ul li:eq(1)").remove(); //删除<ul>下的第2个<li>元素结点（包括后代元素），删除返回引用的值
        $("ul").append($li);  //把上一步删除的添加回来

        $("ul li").remove("li[title ==菠萝]"); //条件删除结点

        $("ul li:eq(1)").empty(); //清空元素（包括后代元素） 只剩下一个黑点
    </script>

    <%--复制结点 --%>
    <script type="text/javascript">
        $("ul li").click(function () {
            $(this).clone().appendTo("ul");  //赋值当前结点，并将其追加到<ul>元素中，克隆的结点不具有复制功能
        })

        $("ul li").click(function () {
            $(this).clone(true).appendTo("ul");//赋值当前结点，并将其追加到<ul>元素中，克隆的结点具有复制功能
        })
    </script>

    <%--替换结点 --%>
    <script type="text/javascript">
        $("p").replaceWith("strong") //将<p>结点替换成<strong>结点,替换后绑定的事件不存在

        $("strong").replaceAll("p"); //将<p>结点替换成<strong>结点,替换后绑定的事件不存在
    </script>

    <%--包裹结点 --%>
    <script type="text/javascript">
        $("strong").wrap("<b></b>"); //用<b>将<strong>标签包裹起来 结果是<b><strong>1</strong></b>、<b><strong>2</strong></b> 
                                     //单独包装每一个<strong>标签

        $("strong").wrapAll("<b></b>"); //用<b>将<strong>标签包裹起来 统一包裹<b><strong>1</strong> <strong>2</strong></b>

        $("strong").wrapInner("<b></b>") //用<b>将<strong>子内容包裹起来<strong><b>1</b></strong>
    </script>