jQuery学习笔记

一、jQuery简介jQuery 是一个轻量级的 JavaScript 库核心思想是 “write less, do more”写得更少做得更多。它封装了复杂的 JavaScript 操作如 DOM 操作、事件处理、动画效果等让开发者用更简洁的代码实现功能同时解决了不同浏览器之间的兼容性问题。二、为什么学习jQuery1.简化代码jQuery 将许多原本需要多行 原生JS代码才能完成的常见任务进行了封装只需一行代码就能调用这些方法。2.丰富的 API提供了大量现成的方法比如 DOM 操作、动画、AJAX 调用等常见需求简化了许多复杂的操作。3.轻量高效压缩版体积很小减小网络数据传输。4. ......三、如何使用 jQuery1. 引入 jQuery使用 jQuery 前需要先引入它有两种方式通过 CDN 引入推荐无需下载文件!-- 引入 jQuery 3.7.1 版本兼容大部分浏览器 -- script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script下载本地文件引入从 jQuery 官网 下载压缩版jquery.min.js放在项目中再引入script srcjs/jquery.min.js/script2. 文档就绪事件(The document Ready Event)文档就绪事件的核心是解决 “DOM 未加载完成时jQuery 代码无法正确执行” 的问题即确保代码在 DOM 就绪后执行避免操作未加载的元素。它可以防止 jQuery 代码在文档加载完成前就执行比如页面还没渲染出按钮就执行 “给按钮绑定点击事件” 的代码会因找不到按钮而报错。最好是等文档完全加载并就绪后再执行操作。这样可以把 JavaScript 代码放在文档的head里而不是必须等在body末尾。传统写法是将JS 代码放body末尾确保 DOM 加载完。使用文档就绪事件后JS 代码可放head由事件确保 DOM 加载完再执行。触发时机DOM 树HTML 结构构建完成后执行但图片、CSS 等资源可能还没加载完。与load事件区别load要等所有资源图片、CSS 等加载完才触发文档就绪事件更早执行只需 DOM 就绪。四、核心语法 (jQuery Syntax)jQuery 的核心语法可以概括为$(selector).action()即$(选择器).操作()// 完整写法 $(document).ready(function() { // 这里写 jQuery 代码 console.log(文档加载完成); }); // 简写 $(function() { // 这里写 jQuery 代码 console.log(文档加载完成); });1.$表示 jQuery 库也可用 jQuery 代替如 jQuery(selector).action()。2.selector选择器用于查找 HTML 元素类似 CSS 选择器。3.action()对选中的元素执行操作如隐藏、修改内容等。五、选择器Selector选择器是 jQuery 的核心用于 “查找” HTML 元素。常见类型如下1. 基础选择器选择器语法示例说明元素选择器$(p)选择所有p元素ID 选择器$(#username)选择idusername的元素类选择器$(.active)选择classactive的元素通配符选择器$(*)选择所有元素多元素选择器$(h1, p, .box)选择所有h1、p和classbox的元素2. 层级选择器选择器语法示例说明后代选择器$(div p)选择div内所有后代p子元素选择器$(div p)选择div内直接子元素p相邻兄弟选择器$(div p)选择div后面紧邻的第一个p3. 过滤选择器特殊选择器选择器语法示例说明:first$(p:first)选择第一个p元素:last$(p:last)选择最后一个p元素:even$(tr:even)选择索引为偶数的tr从 0 开始:odd$(tr:odd)选择索引为奇数的tr:checked$(input:checked)选择所有被选中的复选框 / 单选框:disabled$(input:disabled)选择所有禁用的输入框示例p段落1/p p idpara2段落2/p p classhighlight段落3/p script $(function() { $(p).css(color, blue); // 所有 p 元素文字变蓝 $(#para2).css(font-size, 20px); // idpara2 的 p 元素字体变大 $(.highlight).css(background, yellow); // classhighlight 的 p 元素加黄背景 }); /script六、事件处理事件是用户与页面的交互如点击、鼠标悬停等jQuery 提供了简洁的事件绑定方法。常用事件方法事件方法说明示例click()点击事件$(button).click(function(){...})hover()鼠标悬停 / 离开事件结合两个函数$(div).hover(enterFn, leaveFn)on()绑定多个事件推荐支持动态元素$(div).on({click: fn, mouseenter: fn})示例1点击事件button idbtn点击我/button p idtext/p script $(function() { $(#btn).click(function() { // 点击按钮后修改 p 元素内容 $(#text).text(按钮被点击了); }); }); /script示例2鼠标悬停事件div stylewidth: 100px; height: 100px; background: red;/div script $(function() { $(div).hover( // 鼠标进入时执行 function() { $(this).css(background, green); }, // 鼠标离开时执行 function() { $(this).css(background, red); } ); }); /script示例 3绑定多个事件on()方法div stylewidth: 100px; height: 100px; background: blue;/div script $(function() { $(div).on({ click: function() { $(this).css(border, 5px solid black); }, mouseenter: function() { $(this).css(opacity, 0.5); }, mouseleave: function() { $(this).css(opacity, 1); } }); }); /script七、动画与效果jQuery 提供了丰富的动画效果无需手动写 CSS 过渡或定时器。1. 基础效果方法说明示例hide()隐藏元素$(p).hide(1000)1 秒内隐藏show()显示元素$(p).show(1000)1 秒内显示toggle()切换显示 / 隐藏状态$(p).toggle(1000)fadeIn()淡入显示$(div).fadeIn(2000)2 秒淡入fadeOut()淡出隐藏$(div).fadeOut(2000)2 秒淡出slideDown()向下滑动显示$(ul).slideDown(500)slideUp()向上滑动隐藏$(ul).slideUp(500)示例淡入淡出效果button idfadeInBtn淡入/button button idfadeOutBtn淡出/button div stylewidth: 100px; height: 100px; background: pink; display: none;/div script $(function() { $(#fadeInBtn).click(function() { $(div).fadeIn(1000); // 1秒内淡入显示 }); $(#fadeOutBtn).click(function() { $(div).fadeOut(1000); // 1秒内淡出隐藏 }); }); /script八、DOM操作jQuery 简化了 DOM 元素的创建、修改、删除等操作。1. 内容操作方法说明示例text()获取 / 设置元素文本不含 HTML$(p).text(新文本)html()获取 / 设置元素内容含 HTML$(div).html(strong加粗/strong)val()获取 / 设置表单元素值$(input).val(用户名)示例p idpara原始文本/p input typetext idusername button idbtn修改/button script $(function() { $(#btn).click(function() { // 修改 p 元素文本 $(#para).html(em新的文本/em); // 设置输入框值 $(#username).val(张三); // 获取输入框值并打印 console.log($(#username).val()); // 输出张三 }); }); /script2. 属性操作方法说明示例prop()获取 / 设置元素属性如checked、disabled$(input).prop(checked, true)attr()获取 / 设置普通属性如src、href$(img).attr(src, pic.jpg)示例input typecheckbox idagree 同意 button idcheckBtn勾选/button button iddisableBtn禁用/button script $(function() { $(#checkBtn).click(function() { // 勾选复选框 $(#agree).prop(checked, true); }); $(#disableBtn).click(function() { // 禁用复选框 $(#agree).prop(disabled, true); }); }); /script3. 添加 / 删除元素方法说明示例append()在元素内部末尾添加内容$(ul).append(li新项/li)prepend()在元素内部开头添加内容$(ul).prepend(li第一项/li)remove()删除元素包括自身$(p).remove()empty()清空元素内容保留自身$(div).empty()示例ul li原有项/li /ul button idaddBtn添加项/button button iddelBtn删除第一项/button script $(function() { $(#addBtn).click(function() { $(ul).append(li新添加的项/li); }); $(#delBtn).click(function() { $(ul li:first).remove(); // 删除第一个 li }); }); /script九、链式编程jQuery 支持链式编程在一个元素上连续调用多个方法避免重复选择元素代码更简洁。示例p链式编程示例/p script $(function() { $(p) .css(color, red) // 改颜色 .slideUp(1000) // 向上滑动隐藏 .slideDown(1000) // 向下滑动显示 .text(链式操作完成); // 修改文本 }); /scriptjQuery 是前端开发的重要工具通过简化 DOM 操作、事件处理和动画效果让开发更高效。作为初学者建议先掌握核心语法选择器 方法再通过实际案例练习如表单验证、动态列表、交互组件加深理解。后续可以学习 jQuery 的 AJAX 功能用于后端数据交互和插件扩展进一步拓展应用场景。希望我的文章对你有所帮助感谢观看(^ 3^)