首頁 > 文章 > web前端 > jquery有幾個基本選擇器

jquery有幾個基本選擇器

青灯夜游原創: 2022-05-07 20:09:193120瀏覽

有5個基本選擇器：1、ID選擇器，根據ID匹配元素，語法“$("#id值")”；2、元素選擇器，根據元素名稱匹配元素，語法“ $("元素名稱")」；3、類別選擇器，依類別來匹配元素，語法「$(".類別名稱")」；4、萬用字元「*」選擇器，符合所有元素等。

jquery有幾個基本選擇器

本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。

基本選擇器是jQuery中使用最多的選擇器，jquery有5個基本選擇器：

jquery有幾個基本選擇器

##選擇器功能描述ID選擇器根據給定的ID匹配一個元素元素(標籤)選擇器#根據給定的元素名稱來匹配所有元素類別選擇器根據給定的類別來匹配元素通配符符合所有元素並集選擇器將每一個選擇器符合到元素合併後一起回傳


#id
element
.class
* `選擇器`
selector1，selector2,...,selectorN

1、#id 選擇器：

jQuery #id 選擇器透過HTML元素的id 屬性選取指定的元素。

頁面中元素的id 應該是唯一的，所以您要在頁面中選取唯一的元素需要透過#id 選擇器

舉例：使用#id 選擇器選擇id="myDiv1 "的元素，將其隱藏。

<!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-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").hide();
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>

jquery有幾個基本選擇器

2、元素選擇器:

jQuery 元素選擇器是基於元素名稱選取元素。

範例：使用元素選擇器選擇所有

元素，將其隱藏。

<!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-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("p").hide();
            });
         
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>

jquery有幾個基本選擇器

3、.class 選擇器：

jQuery 類別選擇器可以透過指定的 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-1.10.2.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有幾個基本選擇器

4、通配符選擇器*

jQuery 通配符選擇器可以用來選擇所有元素，，也可以選擇某個元素下的所有元素；

舉例：為所有元素添加樣式，讓字體變紅

<!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-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("button").click(function() {
					$("*").css("color", "red");
				});
			});
		</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有幾個基本選擇器

5、並集選擇器

當幾個元素樣式屬性一樣時，可以共同呼叫一個聲明，元素之間用逗號分隔。群組選擇器是將具有相同樣式的元素分組在一起，每個選擇器之間使用逗號“，”隔開，這個逗號告訴瀏覽器，規則中包含多個不同的選擇器，如果不有這個逗號，那麼所表達的意就完全不同了，省去逗號就成了我們前面所說的後代選擇器，這一點大家在使用中千萬要小心加小心。

範例：將p和span元素的字體顏色設定為紅色

<!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-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("button").click(function() {
					$("p,span").css("color", "red");
				});
			});
		</script>
	</head>
	<body>
		<button type="button">点击</button>
		<p>p元素</p>
		<span>span元素2</span>
		<div id="myDiv1">Hello</div>
		<div Class="myClass1">你好</div>
	</body>
</html>

jquery有幾個基本選擇器

#【推薦學習：

jQuery影片教學、web前端影片】

以上是jquery有幾個基本選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery中怎麼讓th元素隱藏下一篇：jquery中怎麼讓th元素隱藏

看更多