使用jQuery操作DOM

傷城~ 2021-11-18 00:54 327阅读 0赞

一.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>\*\*\*\*</li>");  
          
    三.jQuery操作text文本  
        /\*获取标签中的text代码\*/  
        $("li:first").text();  
        /\*指定标签中的text文本\*/  
        $("li:first").text("\*\*\*\*");  
          
    四.jQuery操作value属性值  
        /\*获取标签中的value属性值\*/  
        $("input").val();  
        /\*指定标签中的value属性值\*/  
        $("input").val("\*\*\*\*");  
          
    五.jQuery拼接元素  
        $("ul").append("<li>\*\*\*\*</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");

转载于:https://www.cnblogs.com/chx9832/p/11050581.html