jquery jQuery 基础教程（第4版） 读书笔记 # 《JQuery基础教程 4th》 读书笔记 ## 第一章 用途 1. 消除浏览器差异，提供统一的操作接口，且代码非常简洁 1. 取得文档中的元素 - 在 CSS 选择器的基础上添加了自定义选择器，相对 JS 原生选择器，具有上手快，代码简洁的优点 1. 修改页面的外观 - 屏蔽浏览器差异，页面加载后，仍能修改页面 1. 改变文档的内容 1. 响应用户的交互操作 1. 为页面添加动态效果 - 简单的代码即可为页面添加淡入，擦除等动画效果 1. 无需刷新页面从服务器获取信息（AJAX） 1. 简化常见的JavaScript任务 - $.each(obj, function(key, value) { }) ### 版本差异 1.x版本：兼容ie678，使用最为广泛的，官方只做bug维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 2.x版本：不兼容ie678，很少人使用，官方只做bug维护，功能不再新增。如果不考虑兼容版本低的浏览器可以使用2.x，最终版本：2.2.4 3.x版本：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。截至2018年6月13日，最新版本：3.3.1 CDN - https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js - https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js - https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js ## 第二章 ### $() 工厂函数 Jquery提供了很多功能性方法，如添加 CSS 类等等。这些操作均是针对 jquery 对象的操作，一切操作的基础就是获得 jquery 对象。$() 工厂函数就是用于获取 jquery 对象的关键。通过 CSS 选择器和 jquery 自定义选择器，可以很方便的获得 jquery 对象。 如果其他 JS 库已使用了 $ 作为全局变量，可以使用 jQuery() 代替。 ### 选择符 1. CSS 选择符 - 支持 CSS 1 ~ 3 几乎所有的选择符 2. 属性选择符 - $('img[alt]') 所有拥有 alt 属性的 img 标签 - $('img[title="hello"]') 所有 title 属性等于 hello 的 img 标签 - $('img[title*="hello"]') 所有 title 属性包含 hello 的 img 标签 - $('a[href^="mailto:"]') 所有 href 属性以 mailto: 开头的 a 标签 - $('a[href$=".pdf"]') 所有 href 属性以 .pdf 结尾的 a 标签 3. 自定义选择符：eq、odd、even - $('div:eq(1)') 网页中第二个 div 标签 - $('tr:odd') 筛选出网页中所有的 tr 标签组成数组，数组下表为奇数的 tr 标签 - $('tr:even') 筛选出网页中所有的 tr 标签组成数组，数组下表为偶数的 tr 标签 - $('td:contains(Henry)') 筛选出所有内容包含 Henry 的td标签 | 表单选择符 | 匹 配 | | :--------: | ---- | | :input | 输入字段、文本区、选择列表和按钮元素 | | :button | 按钮元素或type属性值为button的输入元素 | | :enabled | 启用的表单元素 | | :disabled | 禁用的表单元素 | | :checked | 勾选的单选按钮或复选框 | | :selected | 选择的选项元素 | 4. DOM 遍历方法 - filter 筛选匹配项 - next 下一项兄弟元素 - nextAll 后续所有的兄弟元素 - prev 上一项兄弟元素 - prevAll 之前的所有兄弟元素 - children 所有子元素 - siblings 所有兄弟元素（不包含自己） - addBack 追加原来选中的元素 5. 访问 DOM 元素 .get(index) 方法可以获得 jquery 对象中包含的第index+1项元素，也可以通过[index]的数组访问方式达到同样效果。 # 第三章 ## 事件 在页面加载后执行任务 1. $(document).ready(callback) - 在页面DOM准备好后执行回调（一般使用这个） - jquery 绑定方式，多次绑定的函数都会被调用 - 可简写成$(callback) - callback 会被传入一个参数，即 jqeury 本身，你可以通过在回调中使用 $ 避免，命名冲突 2. window.onload = function() {} - 在页面元素完全准备好后，（关联图片等下载完成） - 原生绑定方式，后者会覆盖前者 - 现代浏览器可以通过 addEventListener() 解决上面的问题 常用方法 | 方法 | 描述 | | ------------ | ------------ | | addClass() | 为元素添加 css 类 | | removeClass() | 为元素移除 css 类 | | toggleClass() | 为元素开关类，没有则添加，有则去除 | | on(event name, selector, function) | 在指定元素上委托事件 | | click() | 为指定元素绑定点击事件 | | off() | 为指定元素移除点击事件 | | trigger() | 为指定元素触发指定事件 | 阅读全文 2020-10-26 dogify 0 条评论 168 次浏览
