首页 >> 日常问答 >

问jquery 使用手册之一 基础入门篇

2026-11-08 16:54:06

答

jQuery 是一款经典的 JavaScript 轻量级库,核心作用就是简化原生 JS 里面 DOM 操作 事件绑定 动画效果 AJAX 请求这些重复代码,在早期前端项目里面应用非常广泛,它最大特点就是选择器写法和 CSS 选择器保持一致,降低前端学习门槛,开发者不用书写大量冗长原生代码,一行代码就可以完成元素查找 修改样式 绑定事件,本手册作为第一册,重点讲解 jQuery 基础概念 引入方式 核心选择器 基础常用 API 页面初始化写法,适合零基础入门,也适合老开发者快速回顾基础知识点,本篇不涉及复杂插件 高级源码原理,聚焦最基础可落地的使用内容。

基础认知说明

jQuery 本质不是独立编程语言,它是封装好的 JS 函数库,所有代码最终还是会编译执行原生 JavaScript,它解决的痛点就是不同浏览器早期版本存在兼容性差异,比如 IE 旧版本事件模型和标准浏览器不一样,jQuery 内部已经做兼容封装,开发者不用单独写兼容判断代码,现在现代浏览器原生 API 已经完善,新项目很多不再选用 jQuery,但是大量历史老项目仍然在维护,掌握 jQuery 依然有实际价值。

引入 jQuery 方式清单

本地引入

第一步 下载 jquery 官方 js 文件,保存到项目本地目录,比如 js 文件夹里面

第二步 在 html 页面 head 或者 body 末尾,使用 script 标签引入本地文件

第三步 推荐把 script 标签放在 body 闭合标签前面,避免 DOM 还没加载完成就执行代码

CDN 引入

第一步 直接引入公共 CDN 地址,不需要下载本地文件

第二步 优势是加载速度快,节省项目本地存储空间

第三步 缺点是依赖外网,如果 CDN 服务异常页面 jQuery 会失效

核心初始化写法

第一种 标准写法 $(document).ready (function (){ 这里写页面加载完成之后要执行的代码 })

第二种 简写 $(function (){ 这里写代码 })

这个初始化的作用是等待页面 DOM 节点全部渲染完毕之后,再执行 jQuery 代码,如果不写初始化,脚本放在 head 里面,会出现找不到 DOM 元素的报错。

核心选择器分类表格

选择器类型 写法 作用

元素选择器 p 选中所有 p 标签元素

id 选择器 box 选中 id 为 box 的元素

类选择器 .item 选中 class 为 item 的元素

后代选择器 ul li 选中 ul 内部所有 li

多元素选择器 div,p,span 同时选中 div p span

属性选择器 input [name=username] 匹配对应属性的 input

常用基础 API 清单

样式操作

css 读取或者设置元素 css 样式,单参数是读取,双参数是设置样式

addClass 给元素追加 class 类名

removeClass 删除元素 class 类名

toggleClass 切换 class,存在就移除,不存在就添加

内容操作

html 获取或者设置元素内部 html 内容,类似原生 innerHTML

text 获取或者设置元素纯文本内容,类似原生 innerText

val 获取或者设置表单输入框的值,专门用于 input select textarea

属性操作

attr 获取或者设置元素自定义属性

prop 推荐用于 checked disabled 这类布尔属性,和 attr 有区别

事件基础

click 点击事件

mouseover 鼠标移入

mouseout 鼠标移出

change 表单内容改变事件

基础代码示例

$(function (){

$("btn").click (function (){

$(".box").css ("background","red")

$(".box").text ("jQuery 修改文本")

})

})

代码含义 页面加载完成之后,绑定 id 为 btn 按钮的点击事件,点击之后修改 box 元素背景颜色,同时修改内部文字。

重要基础注意事项

第一 jQuery 核心符号是美元符号符号,会出现命名冲突,可以使用 jQuery.noConflict () 释放(dom 对象),jQuery 转原生用索引或者 get 方法。

第三 区分 html 和 text,html 会解析标签,text 只会识别纯文字,如果内容里面有标签,两个方法输出结果不一样。

第四 attr 和 prop,布尔类型属性比如复选框选中状态,优先使用 prop,attr 读取的是标签初始属性值,动态变化之后容易获取错误结果。

整体总结,本手册第一册重点掌握引入方式 页面初始化 选择器 基础样式内容属性事件 API,理解 jQuery 对象和原生 DOM 对象的差别,这是后续学习动画 AJAX 遍历 筛选方法的基础,后续手册会继续讲解进阶方法和实战案例。

【常见问题】

问题 1 jquery 使用手册之一里面,报错一般是 jQuery 文件没有成功引入,或者引入顺序错误,也有可能是其他第三方库占用了(function (){}) 初始化包裹代码即可解决。

问题 3 jquery 使用手册之一里面,jQuery 对象可以直接调用原生 dom 方法吗

回答 3 jquery 使用手册之一里面,jQuery 选中返回的是封装后的 jQuery 对象,不能直接调用原生 DOM 方法,需要通过 get 或者下标转换成原生 DOM 节点之后,才可以使用原生 JS 方法。

【免责申明】

本文属于 jQuery 入门技术手册科普,不同 jQuery 版本 API 存在细微差异,现代前端技术栈已经更新,新项目选型请结合业务需求评估,代码示例仅用于学习参考,生产环境请做好兼容测试。

 

相关阅读

最新文章