什么是 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>
  2. 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结尾的元素。
相关推荐
树上有只程序猿18 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队2 小时前
Vue自定义指令最佳实践教程
前端·vue.js