首頁 > web前端 > 前端問答 > jquery類選擇器回傳的是什麼

jquery類選擇器回傳的是什麼

青灯夜游
發布: 2022-11-21 19:17:18
原創
1879 人瀏覽過

在jquery中,類別(class)選擇器用於選取所有帶有指定class值的元素,可以傳回包含全部指定class元素的jquery集合對象,語法為“$(".class")” ;class屬性用於為多個HTML元素設定特定樣式,為了避免某些瀏覽器中出現問題,最好不要使用數字開頭的class屬性。

jquery類選擇器回傳的是什麼

本教學操作環境:windows7系統、jquery3.6.1版本、Dell G3電腦。

在jquery中,類別(class)選擇器用來選取所有帶有指定class的元素。

jquery 類別(class)選擇器

#class 引用 HTML 元素的 class 屬性。 class 屬性用於為多個 HTML 元素設定特定樣式。

注意:不要使用數字開頭的 class 屬性!在某些瀏覽器中可能出問題。

類別(class)選擇器的語法:

$(".class")
登入後複製
  • 傳回值:一個包含全部指定class元素的jquery集合物件。

類別(類)選擇器的使用範例

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>
登入後複製

jquery類選擇器回傳的是什麼

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>
		<h2>欢迎来到我的主页</h2>
		<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類選擇器回傳的是什麼

【推薦學習:jQuery影片教學web前端影片

以上是jquery類選擇器回傳的是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板