《精通jQuery》读书笔记

这几天看到很多前端大牛对学习中的一个共同认知:不要啃别人的二手资料。确实别人咀嚼后的产物质量参差不齐,还是要多读文档,然后是优秀的书籍。

感觉自己对 jQuery 了解不够,看见别人有推荐《精通jQuery》,先读一读。前面几章的基础知识也可起查漏补缺的作用。这里只记录一些我不清楚或者感觉要背的那种知识点。

了解 jQuery

jQuery 核心库的工作

通过处理浏览器加载 HTML 时动态创建的 DOM(文档对象模型),达到动态修改页面内容的目标。

HTML 入门

事件流

一个事件在它的生命周期中要经历 3 个阶段:捕获、处理目标元素冒泡

目标元素:触发事件的元素。

CSS 基础

反选择器

:not(<selector>):选取不匹配指定选择器的元素。

样式层叠

浏览器查找样式元素值的顺序:

  1. 行内样式(定义在元素 style 属性中的样式);
  2. 内嵌样式(定义在 style 元素中的样式);
  3. 外部样式(使用 link 元素导入的样式);
  4. 用户样式(用户自己定义的样式);
  5. 浏览器样式(浏览器提供的默认样式)。

前三个又合称为作者样式。

important 规则

在样式声明的末尾追加!important可以把改值标识为重要样式。浏览器会给重要样式以优先权,而不再考虑这个样式的定义位置。

唯一能优先于作者样式中重要样式的样式是定义在用户样式表中的重要样式。对于普通样式来说,作者样式优先于用户样式。但对于重要样式,浏览器的做法恰恰相反。

“专一程度”

浏览器根据以下 3 个特征计算样式的“专一程度”:

  1. 选择器中出现的 id 值个数;
  2. 选择器中出现的其他属性和伪类个数;
  3. 选择器中出现的元素名字和伪元素名字个数。

以 a-b-c 这种形式评估样式规则的“专一”程度,逐位比较,每一位上数字越大表示越专一。例如,1-0-0 比 0-5-5 更专一。

如果有多条样式规则的专一程度相同,那么浏览器会选择最后定义的那条规则。专一程度规则仅在同一层叠级别有效。

样式单位

相对长度单位

  • em:相对于元素字号的高度;
  • ex:相对于元素字体中小写字母 x 的高度;
  • rem:相对于根元素的高度;
  • px:CSS 像素(假定位于一个 96dpi 的显示设备上,实际上是绝对单位,不会改变大小);
  • %:另一属性值的百分比。

jQuery 基础

使用 CDN 版的 jQuery

CDN(Content Delivery Network):内容分发网络。当用户请求其数据时,CDN 能智能地分配离用户最近的服务器提供服务。

使用 CDN 的两个优点:(1)用户体验更好(速度通常更快);(2)节省了传输 jQuery 库所需带宽。

CDN 不适合内联网应用程序。

$ 函数

jQuery.noConflict方法让 jQuery 放弃使用 $ 符号。也可将该方法的返回值赋给一个变量以自定义 jQuery 简写符号。

延迟 ready 事件的触发时间

$.holdReady(true)必须在 ready 事件触发之前调用,$.holdReady(false)告诉 jQuery 触发 ready 事件。可以多次调用,但在 ready 事件被真正触发之前,使用 true 参数调用次数要等于使用 false 参数调用次数。

选择元素

使用上下文限制搜索范围

多给 $ 函数提供一个参数以限制搜索的范围。如果提供的上下文选择器匹配多个元素,将会把匹配上下文选择器的元素收集在一起,然后再匹配主选择器。

1
2
$("img:odd", $(".drow"))
// img:odd选择器会应用在.drow选择器的结果上

确定选择结果

数据模版

介绍了模板库 Handlebars。

定义模板

数据模板库的核心是数据模板——包含着占位符的 HTML 元素。

p268

处理表单

介绍了 jQuery 插件 Validation,它专门处理表单验证问题。

jQuery Validation Engine 表单验证

p297

Ajax

p331