jQuery中元素選擇器和屬性選擇器怎么用

發(fā)布時間：2022-02-22 10:34:55 來源：億速云閱讀：210 作者：小新欄目：開發(fā)技術(shù)

小編給大家分享一下jQuery中元素選擇器和屬性選擇器怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

jQuery 選擇器
jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
jQuery 元素選擇器和屬性選擇器允許您通過標(biāo)簽名、屬性名或內(nèi)容對 HTML 元素進行選擇。
在 HTML DOM 術(shù)語中：選擇器允許您對 DOM 元素組或單個 DOM 節(jié)點進行操作。

jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 元素。
$("p.intro") 選取所有 class="intro" 的 元素。
$("p#demo") 選取所有 id="demo" 的 元素。

jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href="#"]") 選取所有帶有 href 值等于 "#" 的元素。
$("[href!="#"]") 選取所有帶有 href 值不等于 "#" 的元素。
$("[href$=".jpg"]") 選取所有 href 值以 ".jpg" 結(jié)尾的元素。

jQuery CSS 選擇器
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。

<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("p").css("background-color","red");
        });
    });
</script>
</head>
<body>
    <h3>This is a heading</h3>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me</button>
</body>
</html>

注釋：本實例中點擊按鈕（button）時，所有 p 元素的背景顏色將更改為紅色。

更多選擇器語法及描述
$(this)：當(dāng)前 HTML 元素
$("p")：所有 元素
$("p.intro")：所有 class="intro" 的 元素
$(".intro")：所有 class="intro" 的元素
$("#intro")：id="intro" 的元素
$("ul li:first")：每個 <ul> 的第一個 <li> 元素
$("[href$=".jpg"]")：所有帶有以 ".jpg" 結(jié)尾的屬性值的 href 屬性
$("div#intro .head")：id="intro" 的 <div> 元素中的所有 class="head" 的元素

看完了這篇文章，相信你對“jQuery中元素選擇器和屬性選擇器怎么用”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

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

jQuery中元素選擇器和屬性選擇器怎么用

猜你喜歡

最新資訊

相關(guān)推薦

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