使用jQuery操作DOM

一.jQuery操作样式

/* 单个样式 */
        $("li:first").css("color","#009933");
        /* 多个样式 */
        $("li:eq(1)").css({"color":"#FFFF00","background":"#FFCCCC"});
        /* 添加样式，引用style的.xxxxx */
        $("li:eq(2)").addClass("lis");
        /* 判断有没有样式 */
        if($("li:eq(2)").hasClass("lis")){
            /* 删除样式 */
            $("li:eq(2)").removeClass("lis");
        }
        $("input").click(function(){
            /* 样式切换 */
            $("li:last").toggleClass("chx");
        });

二.jQuery操作html

/*获取标签中的html代码*/
        $("ul").html()
        /*指定标签中的html代码*/
        $("ul").html("<li>大哥，我不做大哥好多年，我依旧这么Diao</li>");

三.jQuery操作text文本

/*获取标签中的text代码*/
        $("li:first").text();
        /*指定标签中的text文本*/
        $("li:first").text("大哥，我不做大哥好多年，我依旧这么Diao");

四.jQuery操作value属性值

/*获取标签中的value属性值*/
        $("input").val();
        /*指定标签中的value属性值*/
        $("input").val("王洪涛，呵呵，呵呵");

五.jQuery拼接元素

$("ul").append("<li>大哥，我不做大哥好多年，我依旧这么Diao</li>");

六.jQuery操作节点

/* 创建节点 */
        var $element=$("<li style='color:Fuchsia'>大哥</li>");
        
        /* 父子级后置追加节点 */
        /* $("ul").append($element);
        $element.appendTo($("ul"));
         */
        
        /* 父子级前置追加节点 */
        /* $("ul").prepend($element);
        $element.prependTo($("ul")); */
        
        /* 同辈追加节点 */
        /* $("li:eq(2)").after($element); */
        /* $("li:eq(2)").before($element); */
        /* $element.insertBefore($("li:eq(2)")); */
        
        /* 删除 */
        /* $("li:first").remove(); */
        /* $("li:first").empty(); */
        /* $("li:first").detach(); */
        
        /* 替换 */
        /* $("li:first").replaceWith($element); */
        /* $element.replaceAll($("li:first")); */
        
        
        
        $("li:first").toggle(function(){
            $(this).css("color","green");
        },function(){
            $(this).css("color","red");
        }
        
        );
        /* 克隆 */
        var $wht=$("li:first").clone(false);
        $("ul").append($wht);

七.获取属性

/*设置单个属性*/
        $("li:first").attr("style","color:red");
        /*设置多个属性*/
        $("li:first").attr({"style":"color:red","id":"wht2"});
        /*设置删除属性*/
        $("li:first").removeAttr("style");

八.遍历节点

/* 子元素 */
        var lis=$("ul").children("li:eq(2)");
        
        /*同辈元素*/
        alert($("li:first").next().text());
        alert($("li:eq(3)").prev().text());
        alert($("li:eq(3)").prevAll().text())
        
        $("li:eq(2)").siblings().css("color","blue");
        /*祖先元素*/
        $("li:first").parents().css("background","red")
        /*父级元素*/
        $("li:first").parent().css("background","yellow");