jQuery操作DOM

结点操作：（DOM-core）

   <%--查找元素结点 --%>
    <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>

样式操作

 <%--样式设置 --%>
    <script type="text/javascript">
        //追加样式
        $("#button").click(function () {
            $("p").addClass("another"); //给<p>标签追加"another"类
            /*多个CSS样式规则
            (1)如果一个元素添加了多个class值，那么就相当于合并了他们的样式
            (2)如果不同的class设定了同一个样式属性，则后者覆盖前者
            */
        })

        //移除样式
        $("button1").click(function () {
            $("p").removeClass("another"); //移除<p>标签样式为"another"的class

            $("p").removeClass("class1").removeClass("class2"); //移除多个class
            $("p").removeClass("class1 class2"); //同上

            $("p").removeClass(); //移除所有
        })

        //交替执行代码类似if..else
        $("p").toggle(function () {
            //显示元素
        }, function () { 
            //隐藏元素
        })

        //切换样式
        $("#button2").click(function () {
            $("p").toggleClass("another"); //<p>上有类名"another"则删除，没有则添加
        })

        //判断是否存在样式
        $("#button3").click(function () {
            $("p").hasClass("another"); //<p>上是否有class为another的样式
        })
    </script>

遍历结点

  <%--遍历结点 --%>
    <script type="text/javascript">
        $("p").children().length();  //获取<p>元素的子元素个数
        $("p").next();  //获取<p>元素的下一个兄弟元素的HTML代码(包括子元素)
        $("p").prev(); //获取<p>元素的上一个兄弟元素的HTML代码(包括子元素)
        $("p").siblings(); //获取<p>前后所有的兄弟元素的HTML代码(包括子元素)
    </script>

获取或设置HTML、文本的值（HTML-DOM）

 <%--获取或设置HTML、文本的值 --%>
    <script type="text/javascript">
        var $p_html = $("p").html(); //获取<p>元素的html代码 类似JS的innerHtml
        alert($p_html); //打印<p>元素的HTML代码 输出<p></p>下的所有文本，包括子元素
        $("p").html("<strong>设置P标签的HTML代码</strong>");

        var $p_text = $("p").text(); //获取<p>元素的文本内容 类似JS的innerText
        alert($p_text); //打印<p>元素的文本内容
        $("p").text("设置P标签的文本值");

        //id为address的文本框获得焦点则将文本框的值赋给$txt_value
        $("#address").focus(function () {   //focus等价JS的onfocus
            var $txt_value = $(this).val(); 
        })

        //id为address的文本框失去焦点则【请输入地址】赋给id为address的文本框
        $("#address").blur(function () {   //blur等价JS的onblur
            $(this).val("请输入地址");
        })

        //val()设置下拉列表，单选，多选的默认选中选中
        $(":checkbox").val(["check2", "check3"]); //check2和check3被选中
        $("#single").val("选择2号"); //下拉列表的”选择2号“默认显示 从后往前遍历 text或value任何一个符合都将选中

    </script>

样式设置（CSS-DOM）

 <%--CSS-DOM操作 --%>
    <script type="text/javascript">
        $("p").css("color"); //获取<p>元素的样式颜色
        $("p").css("color", "red"); //设置<p>元素的颜色为红色
        $("p").css({ "fontSize": "30px", backgroundColor: "#888888" });  //不加引号采用双峰命名法(推荐加引号)

        var $p_offset = $("p").offset();  //获取偏移量
        var $p_position = $("p").position(); //获取位置
        $("p").scrollLeft(); //滚动条距离左边的距离
        $("p").scrollTop(); //滚动条距离顶端的距离
    </script>