jquery基本選擇器有哪些

本文小編為大家詳細介紹“jquery基本選擇器有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“jquery基本選擇器有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

成都創新互聯是一家集網站建設,張家港企業網站建設,張家港品牌網站建設,網站定制,張家港網站建設報價,網絡營銷,網絡優化,張家港網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力?？沙浞譂M足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

有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 元素選擇器基于元素名選取元素。

舉例：使用元素選擇器選擇所有<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">點擊</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基本選擇器有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注創新互聯行業資訊頻道。

網頁題目：jquery基本選擇器有哪些
瀏覽路徑：http://m.kartarina.com/article28/pgojcp.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、網頁設計公司、虛擬主機、Google、網站制作、微信小程序

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容