当前位置: 首页 > news >正文

什么是 jQuery

一、jQuery 基础入门

(一)什么是 jQuery

jQuery 本质上是一个快速、小巧且功能丰富的 JavaScript 库。它将 JavaScript 中常用的功能代码进行了封装,为开发者提供了一套简洁、高效的 API,涵盖了 HTML 文档遍历与操作、事件处理、动画效果、Ajax 交互等诸多方面。通过使用 jQuery,开发者能够以更简洁的代码实现复杂的前端交互功能,大大提高开发效率。

(二)下载与引入

使用 jQuery 的第一步是获取其库文件。可以前往jQuery 官网进行下载,官网提供了多个版本,其中 1.x 版本对旧版浏览器(如 IE6 - IE8)有较好的兼容性,而 2.x 及更高版本则专注于现代浏览器,性能和功能上有所优化。在实际项目中,若需兼容旧版浏览器,建议选择 1.x 版本;若面向现代浏览器开发,可选用最新版本。

下载完成后,有两种常见的引入方式:

  1. 本地引入:将下载的 jQuery 库文件(如jquery - 3.7.1.min.js)放置在项目的合适目录下,然后在 HTML 文件的<head><body>标签中通过<script>标签引入,例如:
<script src="path/to/jquery - 3.7.1.min.js"></script>

  1. CDN(内容分发网络)引入:借助 CDN 服务,可从其服务器快速加载 jQuery 库,如使用百度的 CDN:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

无论采用哪种方式,都需确保在编写自定义的 jQuery 代码之前引入库文件,否则代码将无法识别$符号(jQuery 的简写)。

(三)基本语法

jQuery 的语法简洁而直观,核心语法为$(selector).action()。其中,$符号是 jQuery 的标识符,用于调用 jQuery 函数;selector是选择器,用于 “查询” 和 “查找” HTML 元素,其语法与 CSS 选择器类似,这使得熟悉 CSS 的开发者能够快速上手;action()则是对选中元素执行的操作方法。例如:

$(this).hide();//隐藏当前元素
$("p").hide();//隐藏所有段落元素
$(".test").hide();//隐藏所有class为test的元素
$("#test").hide();//隐藏id为test的元素

(四)选择器

  1. 基本选择器
    • 元素选择器:通过元素名称选取元素,如$("div")选取所有<div>元素。
    • id 选择器:依据元素的 id 属性选取唯一元素,格式为$("#id名"),例如$("#myDiv")会选中 id 为myDiv的元素。
    • class 选择器:用于选取具有特定 class 属性的元素,如$(".intro")会选中所有 class 包含intro的元素。
    • 群组选择器:可同时选取多个不同的选择器所匹配的元素,使用逗号分隔,如$("div, p, #myDiv")会选中所有<div>元素、所有<p>元素以及 id 为myDiv的元素。
    • 通配符选择器$("*")表示选择页面中的所有元素。
  2. 层次选择器
    • 后代选择器$("M N"),选择M元素内部的所有后代N元素,例如$("div p")会选中<div>元素内部的所有<p>元素。
    • 子代选择器$("M > N"),仅选择M元素的直接子代N元素,如$("div > p")只选取<div>元素下一级的<p>元素。
    • 兄弟选择器$("M ~ N"),选择M元素之后的所有同级N元素,例如若有多个<p>元素,$("p ~ span")会选中每个<p>元素之后的所有<span>元素。
    • 相邻选择器$("M + N"),选择M元素相邻的下一个同级N元素,如$("p + span")会选中每个<p>元素紧挨着的下一个<span>元素。
  3. 属性选择器
    • $("selector[attr]"):选择包含指定属性attr的元素,如$("a[href]")选取所有带有href属性的<a>元素。
    • $("selector[attr='value']"):选择属性attr的值为value的元素,例如$("input[type='text']")会选中所有type属性值为text<input>元素。
    • $("selector[attr!='value']"):选择属性attr的值不等于value的元素。
    • $("selector[attr*='value']"):选择属性attr的值包含value的元素,如$("a[href*='example']")会选中href属性值中包含example的所有<a>元素。
    • $("selector[attr^='value']"):选择属性attr的值以value开头的元素。
    • $("selector[attr$='value']"):选择属性attr的值以value结尾的元素。

相关文章:

什么是 jQuery

一、jQuery 基础入门 &#xff08;一&#xff09;什么是 jQuery jQuery 本质上是一个快速、小巧且功能丰富的 JavaScript 库。它将 JavaScript 中常用的功能代码进行了封装&#xff0c;为开发者提供了一套简洁、高效的 API&#xff0c;涵盖了 HTML 文档遍历与操作、事件处理、…...

Redis Desktop Manager(Redis可视化工具)安装及使用详细教程

一、安装包下载 直接从官网下载&#xff0c;官网下载链接地址&#xff1a;Downloads - Redis 二、安装步骤 2.1说明 Redis Desktop Manager是一款简单快速、跨平台的Redis桌面管理工具&#xff0c;也也被称作Redis可视化工具。 支持命令控制台操作&#xff0c;以及常用&…...

[KEIL]单片机技巧 01

1、查看外设寄存器的值 配合对应的芯片开发手册以查看寄存器及其每一位的意义&#xff0c;可以解决90%以上的单纯的片内外设bug&#xff0c;学会如何通过寄存器的值来排外设上的蛊是嵌入式开发从小白到入门的重要一步&#xff0c;一定要善于使用这个工具&#xff0c;而不是外设…...

云原生监控篇——全链路可观测性与AIOps实战

引言&#xff1a;监控即生命线 2023年某全球支付平台因一次未被捕获的数据库连接泄漏&#xff0c;导致每小时损失120万美元。而另一家社交巨头通过实时异常检测系统&#xff0c;在30秒内自动隔离了大规模DDoS攻击。这两个案例揭示了云原生时代的核心生存法则——监控不是可选项…...

C# 13与.NET 9革新及工业开发应用

摘要 微软推出的C# 13与.NET 9以“高效且智能”为导向&#xff0c;具备扩展类型、半自动属性、锁对象优化等十大革新。本文深入剖析新特性于工业级开发的应用场景&#xff0c;包含性能优化策略、AI集成方案以及EF Core实战技巧&#xff0c;为开发者提供从理论到实践的完整指引…...

Linux系统之DHCP网络协议

目录 一、DHCP概述 二、DHCP部署实操 2.1、安装DHCP软件 2.2、拷贝配置文件 2.3、配置文件详解 2.4、重启软件服务 2.5、新开一台服务器&#xff0c;查看dhcp地址获取 一、DHCP概述 DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;是一种应用层网络协…...

【Linux】【网络】不同子网下的客户端和服务器通信其它方式

【Linux】【网络】不同子网下的客户端和服务器通信其它方式 那么&#xff0c;在 NAT 环境下&#xff0c;应该如何让内网设备做为服务器&#xff0c;使内网设备被外部连接&#xff1f; 1 多拨 部分运营商&#xff0c;支持在多个设备上&#xff0c;通过 PPPoE 登录同一个宽带账…...

【C++/数据结构】栈

零.导言 栈是一种数据结构&#xff0c;在后续的学习中可能经常使用&#xff0c;因此我们今天就来学习如何实现栈&#xff0c;以更好地使用它。 一.栈的实现 栈的形式如下&#xff1a; #include<iostream> #include<cassert>using namespace std;typedef int Stack…...

Qt 对象树详解:从原理到运用

1. 什么是对象树&#xff1f; 对象树是一种基于父子关系的对象管理机制。在 Qt 中&#xff0c;所有继承自 QObject 的类都可以参与到对象树中。 当一个对象被设置为另一个对象的父对象时&#xff0c;子对象会被添加到父对象的内部列表中&#xff0c;形成一种树状结构。 Qt 提…...

【软路由】ImmortalWrt 编译指南:从入门到精通

对于喜欢折腾路由器&#xff0c;追求极致性能和定制化的玩家来说&#xff0c;OpenWrt 无疑是一个理想的选择。而在众多 OpenWrt 衍生版本中&#xff0c;ImmortalWrt 以其更活跃的社区、更激进的特性更新和对新硬件的支持而备受关注。 本文将带你深入了解 ImmortalWrt&#xff0…...

【智能音频新风尚】智能音频眼镜+FPC,打造极致听觉享受!【新立电子】

智能音频眼镜&#xff0c;作为一款将时尚元素与前沿科技精妙融合的智能设备&#xff0c;这种将音频技术与眼镜形态完美结合的可穿戴设备&#xff0c;不仅解放了用户的双手&#xff0c;更为人们提供了一种全新的音频交互体验。新立电子FPC在智能音频眼镜中的应用&#xff0c;为音…...

第2章 windows故障排除(网络安全防御实战--蓝军武器库)

网络安全防御实战--蓝军武器库是2020年出版的&#xff0c;已经过去3年时间了&#xff0c;最近利用闲暇时间&#xff0c;抓紧吸收&#xff0c;总的来说&#xff0c;第2章开始带你入门了&#xff0c;这里给出了几个windows重要的工具&#xff0c;说实话&#xff0c;好多我也是第一…...

深度学习笔记——线性回归的从0开始实现

记录学习到的知识&#xff1a; 语义分割是将标签或类别与图片的每个像素关联的一种深度学习算法。 它用来识别构成可区分类别的像素集合。 图像分割是一个端到端图像分析过程&#xff0c;它将数字图像分成多个片段&#xff0c;并对每个区域中包含的信息进行分类。三种图像分割…...

配置Spring Boot中的Jackson序列化

配置Spring Boot中的Jackson序列化 在开发基于Spring Boot的应用程序时&#xff0c;Jackson是默认的JSON序列化和反序列化工具。它提供了强大的功能&#xff0c;可以灵活地处理JSON数据。然而&#xff0c;Jackson的默认行为可能无法完全满足我们的需求。例如&#xff0c;日期格…...

AWS跨账号服务全解析:安全共享资源的最佳实践

在复杂的云环境中,企业常常需要将不同业务部门、项目或环境分配到独立的AWS账户中,以实现资源隔离和权限管控。然而,跨账户的资源共享与协作需求也随之而来。AWS为此提供了丰富的跨账号服务,允许不同账户之间安全、高效地共享资源。本文将深入解析这些服务,并结合实际场景…...

Rust~String、str、str、String、Box<str> 或 Box<str>

Rust语言圣经中定义 str Rust 语言类型大致分为两种&#xff1a;基本类型和标准库类型&#xff0c;前者由语言特性直接提供&#xff0c;后者在标准库中定义 str 是唯一定义在 Rust 语言特性中的字符串&#xff0c;但也是几乎不会用到的字符串类型 str 字符串是 DST 动态大小…...

SpringBoot五:JSR303校验

精心整理了最新的面试资料和简历模板&#xff0c;有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 松散绑定 意思是比如在yaml中写的是last-name&#xff0c;这个和lastName意思是一样的&#xff0c;-后的字母默认是大写的 JSR303校验 就是可以在字段增加…...

Oracle 数据库基础入门(四):分组与联表查询的深度探索(上)

在 Oracle 数据库的学习进程中&#xff0c;分组查询与联表查询是进阶阶段的重要知识点&#xff0c;它们如同数据库操作的魔法棒&#xff0c;能够从复杂的数据中挖掘出有价值的信息。对于 Java 全栈开发者而言&#xff0c;掌握这些技能不仅有助于高效地处理数据库数据&#xff0…...

基于SpringBoot的绿城郑州爱心公益网站设计与实现现(源码+SQL脚本+LW+部署讲解等)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

创建一个简单的spring boot+vue前后端分离项目

一、环境准备 此次实验需要的环境&#xff1a; jdk、maven、nvm和node.js 开发工具&#xff1a;idea或者Spring Tool Suite 4&#xff0c;前端可使用HBuilder X&#xff0c;数据库Mysql 下面提供maven安装与配置步骤和nvm安装与配置步骤&#xff1a; 1、maven安装与配置 1…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...