jquery类选择器如何使用

2023-07-04 15:07:32 233人浏览安东尼

摘要

今天小编给大家分享一下Jquery类选择器如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。在jquery中，类（cla

今天小编给大家分享一下Jquery类选择器如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

在jquery中，类（class）选择器用于选取带有指定class值的所有元素，可以返回包含全部指定class元素的jquery集合对象，语法为“$(".class")”；class属性用于为多个html元素设置特定样式，为了避免某些浏览器中出现问题，最好不要使用数字开头的class属性。

在jquery中，类（class）选择器用于选取带有指定class的所有元素。

jquery 类（class）选择器

class 引用 HTML 元素的 class 属性。class 属性用于为多个 HTML 元素设置特定样式。

注意：不要使用数字开头的 class 属性！在某些浏览器中可能出问题。

类（class）选择器的语法：

$(".class")

返回值：一个包含全部指定class元素的jquery集合对象。

类（class）选择器的使用示例

1、单个类（class）选择器

使用类选择器选择Class=“myClass1”的元素，将其隐藏。

<!DOCTYPE html><html><head><meta Http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>My Test JQuery</title>    <script type="text/javascript" src="./js/jquery-3.6.1.min.js"></script>    <script type="text/javascript" >            $(function(){           $("button").click(function(){                $(".myClass1").hide();            });        });    </script></head><body>    <button type="button">点击</button>    <p>p元素1</p>    <p>p元素2</p>    <div id="myDiv1">Hello</div>    <div Class="myClass1">你好</div></body></html>

2、多个 class 选择器

选择所有 class 等于 "intro", "demo" 或 "end" 的元素:

<!DOCTYPE html><html><head><script type="text/javascript" src="./js/jquery-3.6.1.min.js"></script><script>$(document).ready(function() {$(".intro, .demo, .end").CSS("background-color", "yellow");});</script></head><body><h3>欢迎来到我的主页</h3><p class="intro">这个段落的 class 为 "intro".</p><p>这是一个段落</p><p class="demo">这个段落的 class 为 "demo".</p><p>这是另一个段落</p><p class="end">这个段落的 class 为 "end".</p></body></html>

jquery类选择器如何使用