jquery基本選擇器有哪些

發(fā)布時(shí)間：2022-05-10 15:42:59 來(lái)源：億速云閱讀：668 作者：iii 欄目：web開(kāi)發(fā)

本文小編為大家詳細(xì)介紹“jquery基本選擇器有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“jquery基本選擇器有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

有5個(gè)基本選擇器：1、ID選擇器，根據(jù)ID匹配元素，語(yǔ)法“$("#id值")”；2、元素選擇器，根據(jù)元素名匹配元素，語(yǔ)法“$("元素名")”；3、類選擇器，根據(jù)類來(lái)匹配元素，語(yǔ)法“$(".類名")”；4、通配符“*”選擇器，匹配所有元素等。

jquery基本選擇器有哪些

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。

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

jquery基本選擇器有哪些

選擇器	功能描述
ID選擇器 `#id`	根據(jù)給定的ID匹配一個(gè)元素
元素(標(biāo)簽)選擇器 `element`	根據(jù)給定的元素名匹配所有元素
類選擇器 `.class`	根據(jù)給定的類匹配元素
通配符 `*` 選擇器	匹配所有元素
并集選擇器 `selector1，selector2,...,selectorN`	將每一個(gè)選擇器匹配到元素合并后一起返回

1、#id 選擇器：

jQuery #id 選擇器通過(guò) HTML 元素的 id 屬性選取指定的元素。

頁(yè)面中元素的 id 應(yīng)該是唯一的，所以您要在頁(yè)面中選取唯一的元素需要通過(guò) #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">點(diǎn)擊</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>

jquery基本選擇器有哪些

2、元素選擇器:

jQuery 元素選擇器基于元素名選取元素。

舉例：使用元素選擇器選擇所有<p>元素，將其隱藏。

<!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">點(diǎn)擊</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>

jquery基本選擇器有哪些

3、.class 選擇器：

jQuery 類選擇器可以通過(guò)指定的 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">點(diǎn)擊</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
    <div Class="myClass1">你好</div>
</body>
</html>

jquery基本選擇器有哪些

4、通配符選擇器*

jQuery 通配符選擇器可以用來(lái)選擇所有元素，，也可以選擇某個(gè)元素下的所有元素；

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

<!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">點(diǎn)擊</button>
		<p>p元素1</p>
		<p>p元素2</p>
		<div id="myDiv1">Hello</div>
		<div Class="myClass1">你好</div>
	</body>
</html>

jquery基本選擇器有哪些

5、并集選擇器

當(dāng)幾個(gè)元素樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明，元素之間用逗號(hào)分隔。群組選擇器是將具有相同樣式的元素分組在一起，每個(gè)選擇器之間使用逗號(hào)“，”隔開(kāi)，這個(gè)逗號(hào)告訴瀏覽器，規(guī)則中包含多個(gè)不同的選擇器，如果不有這個(gè)逗號(hào)，那么所表達(dá)的意就完全不同了，省去逗號(hào)就成了我們前面所說(shuō)的后代選擇器，這一點(diǎn)大家在使用中千萬(wàn)要小心加小心。

示例：將p和span元素的字體顏色設(shè)置為紅色

<!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">點(diǎn)擊</button>
		<p>p元素</p>
		<span>span元素2</span>
		<div id="myDiv1">Hello</div>
		<div Class="myClass1">你好</div>
	</body>
</html>

jquery基本選擇器有哪些

讀到這里，這篇“jquery基本選擇器有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

jquery基本選擇器有哪些

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽