溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹jQuery選擇器有哪些，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
1. 使用方法
jQuery 庫位于一個 JavaScript 文件中，其中包含了所有的 jQuery 函數。
網頁需要使用到 jQuery 時，需要先在網頁中引入 jQuery 的 js文件。
<!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>
</head>
<body>
</body>
</html>2. jQuery 語法
jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作。【相關視頻教程推薦：jQuery教程】
基礎語法形式：
$(selector).action()
例：
$("p").hide() // 隱藏所有 <p> 元素
$("#myInfo").hide() // 隱藏所有 id="myInfo" 的元素寫法：
所有 jQuery 函數位于一個 document.ready 的函數中。如下圖。
這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成后才可以對 DOM 進行操作。
如果在文檔沒有完全加載之前就運行函數，操作可能失敗。
$(document).ready(function(){
// 代碼部分寫在這里
});也可以簡寫成下面這樣：
$(function(){
// 這里寫代碼
});舉例：
<!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").html("Hello JQuery World");
$("#myDiv1").css("background-color","green");
});
});
</script>
</head>
<body>
<button type="button">點擊</button>
<div id="myDiv1">Hello</div>
</body>
</html>
3. 基本選擇器
(1) 元素選擇器: 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>
(2) #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>
(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選擇器有哪些的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
