正文

jQuery给多个不同元素添加class样式的方法？js获取元素的方式？

技术帮
技术帮 V管理员 /65阅读/0评论
1013

jQuery给多个不同元素添加class样式的方法？

jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class

<!DOCTYPE html>

<html>

<head>

<script src="js/jquery.min.js">

</script>

<script>

$(document).ready(function(){

jQuery给多个不同元素添加class样式的方法？js获取元素的方式？

$("button").click(function(){

$("h1,h2,p").addClass("blue");

$("div").addClass("important");

});

});

</script>

<style type="text/css">

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

</style>

</head>

<body>

<h1>Heading 1</h1>

jQuery给多个不同元素添加class样式的方法？js获取元素的方式？

<h2>Heading 2</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<div>This is some important text!</div>

js获取元素的方式？

1 有多种方式可以获取元素，包括但不限于通过id、class、标签名、属性名等来获取元素。
2 具体来说，可以通过document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName()、document.querySelector()、document.querySelectorAll()等方法来获取元素。
3 此外，还可以使用jQuery等库来获取元素，以及通过自定义属性、事件委托等方法来实现多样化的元素获取方式。

1 通过id获取
2 因为每个元素都有独一无二的id属性，可以直接使用getElementById()方法获取该元素，例如document.getElementById("example")
3 除了id属性，还可以通过标签名、类名、name属性、属性值等方式获取元素，例如document.getElementsByTagName("div")获取所有div标签元素。

如何通过js给某个元素设置样式？

事件委托，原生js；

伪代码：

点击ul后清空ul下所有li的类名（使其所有元素不可见）；

获取被点击的dom节点li（

event.target

）；

改变被点击的元素类名（使其可见）；


解释：

利用addEventListener给最上级元素绑定点击事件；

点击后触发匿名函数，清除除了当前点击的节点外所有的子元素类名

（可使用event.target获取当前被点击的dom节点）

（清除其他类名可用jquery的类选择器以及jquery的removeClass函数）；

给当前点击的元素赋予新的类名，改变样式。