Jquery选择器

文章目录

  • 1. Jquery选择器
  • 2. Jquery选择器常用类型
    • 2.1 元素 选择器
    • 2.2 #id 选择器
    • 2.3 .class 选择器
    • 2.4 属性选择器
    • 2.5 元素关系选择器
    • 2.6 CSS选择器
  • 3. Jquery选择器的组合使用

1. Jquery选择器

jQuery 选择器允许您对 HTML 元素组单个HTML元素进行操作。

2. Jquery选择器常用类型

2.1 元素 选择器

  • 基于 HTML元素名 选取元素
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
head>
<body>
<div>
    <p>p1p>
    <a>a1a>
    <p>p2p>
    <a>a2a>
    <p>p3p>
    <a>a3a>
    <p>p4p>
    <a>a4a>
div>
<div>
    <button>点击button>
div>
body>
<script>
    $("button").click(function () {
    	//点击按钮 所有的

元素隐藏了 $("p").hide(); }); script> html>

Jquery选择器_第1张图片

2.2 #id 选择器

  • id选择器相当于唯一标识符,通过id可以在html中找到唯一的一个html元素
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
head>
<body>
<div>
    <p id="p1">p1p>
    <p id="p2">p2p>
div>
<div>
    <button>点击button>
div>
body>
<script>
    $("button").click(function () {
        $("#p1").hide();
    });
script>
html>

Jquery选择器_第2张图片

2.3 .class 选择器

  • 类型选择器,在元素中定义 class的值,然后通过元素选择器选择操作。
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
head>
<body>
<div>
    <p id="p1" class="txt">p1p>
    <p id="p2" >p2p>
    <div class="txt">divdiv>
div>
<div>
    <button>点击button>
div>
body>
<script>
    $("button").click(function () {
        $(".txt").hide();
    });
script>
html>

Jquery选择器_第3张图片

如果想在元素选择器的基础上只隐藏

元素呢?
$(".txt").hide(); 可以修改为 $(“p.txt”).hide();
这句话的意思是:选择 页面所有

元素中 class属性值为 "txt"的元素隐藏

2.4 属性选择器

  • 通过某些元素的特有属性或者通用属性进行选择元素
  • 格式 $(“元素名[属性名=属性值]”)
    如:$(“p[name=‘p_name’]”) 选择 name属性值等于 pname的 p元素
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
head>
<body>
<div>
    <p id="p1" class="txt">p1p>
    <p id="p2" >p2p>
    <div class="txt">divdiv>
    <input name="txtInput">input>
div>
<div>
    <button>点击button>
div>
body>
<script>
    $("button").click(function () {
        alert($("[name='txtInput']").val());
    });
script>
html>

Jquery选择器_第4张图片

2.5 元素关系选择器

  • 父子关系 $(“父元素 子元素”)
<div id="div01">
        <p>父div的第一个p元素p>
        <p>父元素的第2个p元素p>
        <div>
            <p>子div的p元素p>
        div>
        <p>父div的最后一个p元素p>
    div>

2.6 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>
<h2>This is a headingh2>
<p>This is a paragraph.p>
<p>This is another paragraph.p>
<button type="button">Click mebutton>
body>

html>

Jquery选择器_第5张图片

3. Jquery选择器的组合使用

$("#div01")
$("div")
$(".divClass")
$("a[href='xxxxx']")

总结:

  1. 选择器以元素开头表示是该元素类型下的,最后得到的肯定是该元素类型的一个或多个元素组
    2.选择器中不出现元素表示最终得到的跟元素类型无关的一个或多个元素组
    3.选择器的组合思路:
    (1)先选定一个元素作为起点,然后进行各种组合筛选。
    (2) 选中一组元素,再从中筛选。
    (3)把上面两种结合起来,多实践。

附录:
Jquery选择器_第6张图片

你可能感兴趣的:(JavaScript,jquery,css3,css)