jQuery操作DOM_mdhjq-优快云博客

博客介绍了DOM操作分类，包括DOM Core、HTML - DOM和CSS - DOM。还详细阐述了jQuery对JavaScript中DOM操作的封装，如样式操作、内容及Value值操作等，重点讲解了jQuery中设置属性、获取属性值、追加样式、移除样式、切换样式和判断样式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.DOM操作分类

DOM操作分为三类：

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
HTML-DOM：用于处理HTML文档，如document.forms
CSS-DOM：用于操作CSS，如element.style.color="green"

2.jQuery中的DOM操作

Query对JavaScript中的DOM操作进行了封装

jQuery中的DOM操作

样式操作
内容及Value值操作
节点操作
节点属性操作
节点遍历

2.1设置单个属性

css(name,value) ;

2.2同时设置多个属性

css({name:value, name:value,name:value…}) ;

示例：$(this).css("border","5px solid #f5f5f5");

或

$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});

2.3获取属性值

<style>
        .dd{ border: 1px solid red; width: 50px; height: 70px;}
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
       // $("div").css("border","1px solid red");
//$("div").css({"border":"1px solid red","width":"50px","height":"70px"});
$("div").addClass("dd");
        });
function show(div1){
alert($(div1).css("border"));
}
    </script>
</head>
<body>

<div onclick="show(this);">
    来打我把
</div>