jquery選擇器的寫(xiě)法

發(fā)布時(shí)間：2020-09-25 09:45:39 來(lái)源：億速云閱讀：185 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了jquery選擇器的寫(xiě)法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

jQuery 選擇器

jQuery 選擇器允許您對(duì) HTML 元素組或單個(gè)元素進(jìn)行操作。

jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。它基于已經(jīng)存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。

jQuery 中所有選擇器都以美元符號(hào)開(kāi)頭：$()。

元素選擇器

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

在頁(yè)面中選取所有 <p> 元素:

$("p")

實(shí)例

用戶點(diǎn)擊按鈕后，所有 <p> 元素都隱藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元素選擇器</title> 
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h3>這是一個(gè)標(biāo)題</h3>
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
<button>點(diǎn)我</button>
</body>
</html>

#id 選擇器

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

頁(yè)面中元素的 id 應(yīng)該是唯一的，所以您要在頁(yè)面中選取唯一的元素需要通過(guò) #id 選擇器。

通過(guò) id 選取元素語(yǔ)法如下：

$("#test")

實(shí)例

當(dāng)用戶點(diǎn)擊按鈕后，有 id="test" 屬性的元素將被隱藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>#id 選擇器</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h3>這是一個(gè)標(biāo)題</h3>
<p>這是一個(gè)段落</p>
<p id="test">這是另外一個(gè)段落</p>
<button>點(diǎn)我</button>
</body>
</html>

.class 選擇器

jQuery 類選擇器可以通過(guò)指定的 class 查找元素。

語(yǔ)法如下：

$(".test")

實(shí)例

用戶點(diǎn)擊按鈕后所有帶有 class="test" 屬性的元素都隱藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>.class 選擇器</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h3 class="test">這是一個(gè)標(biāo)題</h3>
<p class="test">這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>
<button>點(diǎn)我</button>
</body>
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享jquery選擇器的寫(xiě)法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

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

jquery選擇器的寫(xiě)法

猜你喜歡

最新資訊

相關(guān)推薦

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