jQuery选择器

一、jQuery的用途

  1. jQuery 元素选择器和属性选择器允许通过标签名、属性名或内容对 HTML 元素进行选择。
  2. 允许对 HTML 元素组或单个元素进行操作。
  3. 允许对 DOM 元素组或单个 DOM 节点进行操作。

二、jQuery的优点

1.写法简介

2.具有完善的事件处理机制

三、jQuery元素选择器

jQuery 使用元素选择器来选取 HTML 本身自带的元素,例如p,h1-h6。

$(“p”) 选取 p 元素。

$(“p.item”) 选取所有 class=“item” 的 p 元素。

$(“p#item”) 选取所有 id=“item” 的 p 元素。

例如


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./JQuery/jquery-3.4.1.min.js">script>
    <script>
        $(function()
            $("h1").css("background","red");
    script>
    <title>Documenttitle>
head>
<body>
    <h1>1h1>
    <h2 id="demo">2h2>
    <h3 id="demo1">3h3>
    <h4 class="item">4h4>
    <h5 class="item">5h5>
    <ul>
        <li title="#">1li>
        <li title="#">2li>
        <li title="s">3li>
        <li title="s">4li>
        <li>5li>
        <li>6li>
    ul>
body>
html>

结果为
jQuery选择器_第1张图片

四、属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[title]") 选取所有带有 title 属性的元素。

$("[title=’#’]") 选取所有带有 title 值等于 “#” 的元素。

例如


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./JQuery/jquery-3.4.1.min.js">script>
    <script>
        $(function(){
      
            //属性选择器
            $("[title]").css("background","orange");
            //选取属性为制定的
            $("[title='s']").css("background","red");
    script>
    <title>Documenttitle>
head>
<body>
    <h1>1h1>
    <h2 id="demo">2h2>
    <h3 id="demo1">3h3>
    <h4 class="item">4h4>
    <h5 class="item">5h5>

    <ul>
        <li title="#">1li>
        <li title="#">2li>
        <li title="s">3li>
        <li title="s">4li>
        <li>5li>
        <li>6li>
    ul>
body>
html>

jQuery选择器_第2张图片

五、 CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

具体语法为:$(“p”).css(“background-color”,“red”);

这个例子在上面的案例中已经实现

六、id选择器和类选择器

选取所有 class="item"和id = "demo"的元素


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./JQuery/jquery-3.4.1.min.js">script>
    <script>
        $(function(){
      
            $(".item").css("background","green");
            $("#demo").css("background","pink");
    script>
    <title>Documenttitle>
head>
<body>
    <h1>1h1>
    <h2 id="demo">2h2>
    <h3 id="demo1">3h3>
    <h4 class="item">4h4>
    <h5 class="item">5h5>

    <ul>
        <li title="#">1li>
        <li title="#">2li>
        <li title="s">3li>
        <li title="s">4li>
        <li>5li>
        <li>6li>
    ul>
body>
html>

jQuery选择器_第3张图片

七、并集和交集选择器

同时选取h1和h2

选取class="item"的h5


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./JQuery/jquery-3.4.1.min.js">script>
    <script>
        $(function(){
      
            $("h1,h2").css("background","pink");
            $("h5.item").css("background","red");
    script>
    <title>Documenttitle>
head>
<body>
    <h1>1h1>
    <h2 id="demo">2h2>
    <h3 id="demo1">3h3>
    <h4 class="item">4h4>
    <h5>5h5>
    <h5 class="item">5h5>

    <ul>
        <li title="#">1li>
        <li title="#">2li>
        <li title="s">3li>
        <li title="s">4li>
        <li>5li>
        <li>6li>
    ul>
body>
html>

jQuery选择器_第4张图片

你可能感兴趣的:(jquery)