jQuery-jQuery选择器

雨点打透心脏的1/2处 2022-04-17 07:05 365阅读 0赞

## jQuery 选择器 ##

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

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

## 元素选择器 ##

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素

$("p")

<script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });
    </script>
    </head>
    
    <body>
    <h2>这是一个标题</h2>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>点我</button>
    </body>

用户点击按钮后，所有 <p> 元素都隐藏

## \#id 选择器 ##

jQuery \#id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 \#id 选择器。

通过 id 选取元素语法如下：

$("#test")

<script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#test").hide();
      });
    });
    </script>
    </head>
    
    <body>
    <h2>这是一个标题</h2>
    <p>这是一个段落</p>
    <p id="test">这是另外一个段落</p>
    <button>点我</button>
    </body>

当用户点击按钮后，有 id="test" 属性的元素将被隐藏

## .class 选择器 ##

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

<script>
    $(document).ready(function(){
      $("button").click(function(){
        $(".test").hide();
      });
    });
    </script>
    </head>
    <body>
    
    <h2 class="test">这是一个标题</h2>
    <p class="test">这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <button>点我</button>
    </body>

用户点击按钮后所有带有 class="test" 属性的元素都隐藏

发表评论取消回复

表情：

评论列表（有 0 条评论，365人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS选择器的常见用法(标签选择器,class选择器,id选择器,复合选择器,通配符选择器)

⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类(多个类名要使⽤空格分割, 这种做法可以让代码更好复⽤)id 是唯⼀的, 不能被多个标签使⽤ (是和类选择器最⼤的区别)

痛定思痛。/ 2024年04月23日 12:56/ 0 赞/ 43 阅读

相关【前端_层次选择器】子代选择器、后代选择器、兄弟选择器、相邻选择器

[CSDN话题挑战赛第2期][CSDN_2] 参赛话题：[学习笔记][Link 1] 学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记

太过爱你忘了你带给我的痛/ 2024年04月06日 13:41/ 0 赞/ 44 阅读

相关复合选择器——后代选择器，子选择器，并集选择器和伪类选择器

复合选择器复合选择器——后代选择器，子选择器，并集选择器和伪类选择器复合选择器是简历在基础选择器之上的，对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目

╰+攻爆jí腚メ/ 2022年12月17日 04:27/ 0 赞/ 150 阅读

相关 css选择器_CSS选择器

css选择器 CSS选择器简介 (Introducing CSS Selectors) A CSS selector is the part of a CSS rule

客官°小女子只卖身不卖艺/ 2022年12月03日 11:26/ 0 赞/ 276 阅读

相关 css 属性选择器_CSS选择器：属性选择器

css 属性选择器 ![cssmasterthumb][] The following is an extract from our book, [CSS Master][

本是古典何须时尚/ 2022年12月03日 09:59/ 0 赞/ 284 阅读

相关 Jquery选择器-基本选择器

jquery作为我们常用前端工具之一，实际项目中常用的的选择器有id选择器(\id)、元素选择器(element)、样式选择器(.class)。 \id 概述:根据给定

秒速五厘米/ 2022年07月10日 05:58/ 0 赞/ 329 阅读

相关 jQuery选择器详解(层叠选择器/过滤选择器/表单选择器)

[jQuery][] 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 $("\myELement") 选择id值等于myElement的元素，id值不能重

深碍√TFBOYSˉ_/ 2022年06月12日 01:58/ 0 赞/ 326 阅读

相关 css各种选择器，元素标签选择器，类选择器，id选择器，选择器的组合

3 元素（标签）选择器：格式标签名（html元素）\{ /\CSS样式代码\/ \} 使用范围，是将同样的样式，作用在多个同名的标签上。 4 类选择器： <

曾经终败给现在/ 2022年06月06日 03:06/ 0 赞/ 276 阅读

相关 BeautifulSoup 基本选择器，标准选择器，css选择器

注意事项 1、测试工具pycharm,请自行安装， 2、python3.x 3、需要导入requests库和bs4库 4、项目目录结构 ![31414-20190

╰+哭是因爲堅強的太久メ/ 2021年12月03日 15:09/ 0 赞/ 522 阅读

相关 jQuery--选择器（基本选择器、层次选择器）详解

jQuery选择器通过jQuery选择器可以方便快捷地获得页面中的元素，然后为其添加相应行为，无需担心浏览器的兼容性问题。jQuery选择器完全继承了CSS选择的风格，

深碍√TFBOYSˉ_/ 2021年08月13日 11:24/ 0 赞/ 595 阅读