百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

jQuery 选择器

liuian 2025-04-26 19:25 33 浏览

本节我们来学习 jQuery 中的选择器，选择器是 jQuery 库中最重要的部分之一。

jQuery选择器

jQuery 选择器允许我们选取和操作 HTML 元素，它用于根据 HTML 元素的名称、ID、类、类型、属性和属性值等来查找 HTML 元素。除了基于现有的 CSS 选择器，它还有一些自己自定义的选择器。

要注意 jQuery 中的所有选择器都以美元符号和圆括号开头，例如 $()。

元素选择器

jQuery 元素选择器是根据元素名称匹配相对应的元素。也就是说它是根据元素的标签名来选择的，指向的是 DOM 元素的标签名。

示例：

例如有下面一段 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
</head>
<body>
  <h2>你好，欢迎来到侠课岛！</h2>
  <div>
    <p>侠课岛的学习课程：</p>
    <ul>
      <li class="course">Python</li>
      <li class="course">前端</li>
      <li class="course">Java</li>
      <li class="course">PHP</li>
    </ul>
    <div>
      <button>点击按钮</button>
    </div>
  </div>
</body>
</html>

如果我们要在这个页面中写入 jQuery 代码，首先需要引入 jQuery 文件，格式如下所示：

<script src="jquery-3.5.1.min.js"></script>

这表示我们引入的 jquery-3.5.1.min.js 和 index.html 文件位于同一目录下。

接着我们要在一个新的 <script> 标签中编写 jQuery 代码，注意一定要另外写一个 <script> ，不能写在 引入文件的 <script> 标签中哟。

例如要实现点击页面中的按钮，隐藏所有 <li> 标签的效果：

<script>
  $(function(){
    $("button").click(function(){
      $("li").hide();
    });
  });
</script>

上述代码中，最开始是一个 jQuery 的加载函数 $(function(){})，这个我们前面一节讲到过。然后在 button 标签选择器上绑定了一个 click() 点击事件，表示当点击元素时，会触发这个点击事件。然后会运行点击事件中的函数，这函数中的 $("li").hide() 表示选取页面所有的 <li> 标签然后进行隐藏，hide() 就是一个隐藏元素方法。

在浏览器中的演示效果：
[图片上传失败...(
image-d7b503-1629555686452)]

class类选择器

jQuery 类选择器可以通过指定的 class 来查找元素。语法和标签选择器有一点区别，就是需要在类选择器名称前面加上一个点号.。

示例：

例如下面这段代码，其实和上述元素选择器中的示例效果差不多，不同的是这表示对页面中所有 class="course" 的元素进行隐藏：

<script>
  $(function(){
    $("button").click(function(){
      $(".course").hide();
    });
  });
</script>

虽然在本节教程中这两个示例的在浏览器中的演示效果是一样的，但是还有有很大的区别，对于前一个示例来说，只要是标签为 <li> 的元素都会进行隐藏，而对于此示例来说，只有设置了 class="course" 的元素才会进行隐藏。

ID选择器

jQuery 中的 ID 选择器通过 HTML 元素的 id 属性来查找指定的元素。一个 ID 在一个页面中应该是唯一的，所以当我们想要选取唯一的元素时，应该使用 ID 选择器。

示例：

例如获取页面中 id 为 xkd 的元素文本内容，并通过 alert() 方法显示在浏览器中：

alert($("#xkd").text());

我们在使用 ID 选择器时，需要在选择器前面加上一个井号 #。text() 方法可以用于返回所选元素的文本内容。

在浏览器中的演示效果：

JQuery 中的其他选择器

除了标签选择器、类选择器、ID选择器，JQuery 中还有一些自定义的选择器，如下所示：

语法

描述

$("*")

选取所有元素

$(this)

选取当前 HTML 元素

$("p.xkd")

选取所有 class="xkd" 的 <p> 元素

$("p:first")

选取第一个 <p> 元素

$("ul li:first")

选取第一个 <ul> 元素下的第一个 <li> 元素

$("ul li:first-child")

选取每个 <ul> 元素下的第一个 <li> 元素

$("[href]")

选取所有具有 href 属性的元素

$(a[target='_blank'])

选取所有目标属性值等于 _blank 的 <a>元素

$(a[target!='_blank'])

选取所有目标属性值不等于_blank 的<a> 元素

$("div#xkd .good")

选取 id="xkd" 的 <div> 元素中的所有 class="good" 的元素

$("tr:even")

选取所有偶数位置的 <tr> 元素

$("tr:odd")

选取所有奇数位置的 <tr> 元素

链接：https://www.9xkd.com/

相关推荐

使用Assembly打包和部署Spring Boot工程

SpringBoot项目的2种部署方式目前来说，SpringBoot项目有如下2种常见的部署方式一种是使用docker容器去部署。将SpringBoot的应用构建成一个docke...

java高级用法之:调用本地方法的利器JNA

简介JAVA是可以调用本地方法的，官方提供的调用方式叫做JNI，全称叫做javanativeinterface。要想使用JNI，我们需要在JAVA代码中定义native方法，然后通过javah命令...

Linux中如何通过Shell脚本来控制Spring Boot的Jar包启停服务?

SpringBoot项目在为开发者带来方便的同时，也带来了一个新的问题就是Jar包如何启动？在一般情况下我们都是采用了最为经典的java-jar命令来进行启动。然后通过ps命令找到对应的应用线程通...

牛逼!自己手写一个热加载（人民币手写符号一个横还是两个横）

热加载：在不停止程序运行的情况下，对类（对象）的动态替换JavaClassLoader简述Java中的类从被加载到内存中到卸载出内存为止，一共经历了七个阶段：加载、验证、准备、解析、初始化、使用、...

java 错误: 找不到或无法加载主类?看看怎么解决吧!

问题扫述：项目名称调整，由原来的com.mp.qms.report.biz调整为com.mp.busicen.mec.qms.report.biz后。项目在IDEA直接运行，但打包部署到服务器...

如何将 Spring Boot 工程打包成独立的可执行 JAR 包

导语：通过将SpringBoot项目打包成独立的可执行JAR包，可以方便地在任何支持Java环境的机器上运行项目。本文将详细介绍如何通过Maven构建插件将SpringBoot...

class 增量发包改造为 jar 包方式发布

大纲class增量发包介绍项目目录结构介绍jar包方式发布落地方案class增量发包介绍当前项目的迭代修复都是通过class增量包来发版本的将改动的代码class增量打包,如下图cla...

Jar启动和IDE里启动Sprintboot的区别

想聊明白这个问题，需要补充一些前提条件，比如Fatjar、类加载机制等1、Fatjar我们在开发业务程序的时候，经常需要引用第三方的jar包，最终程序开发完成之后，通过打包程序，会把自己的代码和三...

Java 20年，以后将往哪儿走?（java还能流行多久）

在今年的Java20周年的庆祝大会中，JavaOne2015的中心议题是“Java的20年”。甲骨文公司Java平台软件开发部的副总裁GeorgesSaab的主题演讲就将关注点放在了java...

Spring Boot Jar 包秒变 Docker 镜像实现多环境部署

你是否在互联网大厂后端开发工作中，遇到过这样的困扰？当完成一个SpringBoot项目开发，准备将Jar包部署到不同环境时，却发现各个环境依赖不同、配置复杂，部署过程繁琐又容易出错，不仅耗费...

从0开始，让你的Spring Boot项目跑在Linux服务器

1搭建Linux服务器1.1购买阿里云服务器或安装虚拟机这里建议是CentOS7.X或CentOS8.X，当然其他的Linux如deepin、Ubuntu也可以，只是软件环境的安装包和安装方式...

【技术】Maven 上传第三方jar包到私服

通过nexus后台上传私服以NexusRepositoryManagerOSS2.14.5-02为例。登录nexus后台。定义Maven坐标Maven坐标有两种方式：1.自定义参数；2....

JVM参数、main方法的args参数使用

一、前言我们知道JVM参数分为自定义参数、JVM系统参数，Javamain方法的参数。今天就谈谈怎么使用吧。二、查看jvm参数定义自定义参数我们打开cmd窗口，输入java，就能看到自定义参数的格式...

Maven项目如何发布jar包到Nexus私服

Maven项目发布jar包到Nexus私服在编码过程中，有些通用的代码模块，有时候我们不想通过复制粘贴来粗暴地复用。因为这样不仅体现不了变化，也不利于统一管理。这里我们使用mavendeploy的方...

干货丨Hadoop安装步骤!详解各目录内容及作用

Hadoop是Apache基金会面向全球开源的产品之一，任何用户都可以从ApacheHadoop官网下载使用。今天，播妞将以编写时较为稳定的Hadoop2.7.4版本为例，详细讲解Hadoop的安...

一周热门
最近发表
标签列表