《JavaScript 权威指南》笔记 - jQuery 类库

《JavaScript 权威指南》笔记 - jQuery 类库

摘自 《JavaScript 权威指南》 第 19 章 jQuery 类库。

JavaScript 的核心 API 设计的很简单,但由于不同浏览器之间的严重不兼容,导致客户端的 API 过于复杂。使用 JavaScript 框架或工具类库能简化通用操作,能隐藏浏览器之间的差异,这让很多程序员在开发 Web 应用时变得更简单。撰写本书时,最流行和广泛采用的类库之一就是 jQuery。

jQuery 基础jQuery 类库定义了一个全局函数:jQuery()。该函数使用频繁,因此在类库中还给它定义了一个快捷别名:$()。这是 jQuery 在全局命名空间中定义的唯一两个变量。

在 jQuery 类库中,最重要的方法是 jQuery(),也就是 $()。它的功能很强大,有 4 中不同的调用方式:

传递 CSS 选择器字符串给 $()。当通过这种方式调用时,$() 返回当前文档中匹配该选择器的元素集;

传递一个 Element、Document 或 Window 对象给 $()。在这种情况下,$() 只须简单地将 Element、Document、Window 对象封装成 jQuery 对象并返回;

传递 HTML 文本字符串给 $()。在这种调用方式下 jQuery 会根据传入的文本创建好 HTML 元素并封装成 jQuery 对象返回;

传入一个函数给 $()。此时,文档加载完毕且 DOM 可操作时,传入的函数将被调用。

复制jQuery(function () {

// 文档加载完毕时调用

// 所有 jQuery 代码放在这里

});传递 CSS 选择器字符串给 $(),它返回的 jQuery 对象表示匹配该选择器的元素集。jQuery 对象是类数组,它们拥有 length 属性和介于 0 ~ length-1 之间的数值属性。这意味着可以使用标准的数组标识方括号来访问 jQuery 对象的内容。如果不想把数组标识用在 jQuery 对象上,可以使用 size() 来替代 length 属性,用 get() 来替代方括号索引。可以使用 toArray() 将 jQuery 对象转化为真实数组。

除了 length 属性,jQuery 对象还有其它三个属性:selector 属性是创建 jQuery 对象时的选择器字符串。context 属性是上下文对象,是传递给 $() 的第二个参数,如果没有的话,默认是 Document 对象。jquery 属性值是 jQuery 版本号。

可以使用 each() 方法来代替 for 循环遍历 jQuery 对象中的所有元素。each() 还会将索引值和该元素作为第一个和第二个参数传递给回调函数。与 forEach() 不同,each() 中,如果回调函数在任一个元素上返回 false,遍历将在该元素后中止。jQuery 方法通常隐式遍历匹配的元素,并操作它们。

jQuery 的 map() 和 Array.prototype.map() 相近。它将接收回调函数作为参数,并为 jQuery 对象中的每一个元素都调用回调函数,同时将回调函数的返回值收集起来,并封装成一个新的 jQuery 对象返回。map() 调用回调函数的方式和 each() 相同:元素的索引值作为第一个参数,元素本身作为 this 和第二个参数。

jQuery 的另一个基础方法是 index()。该方法接收一个元素作为参数,返回值是该元素在 jQuery 对象中的索引值,如果找不到的话,返回 -1。如果传递一个 jQuery 对象作为参数,index() 会对该对象的第一个元素进行搜索。如果传入的是字符串,index() 会把它当成 CSS 选择器,并返回 jQuery 对象中匹配该选择器的一组元素中第一个元素的索引值。如果什么都不传入,index() 会返回该 jQuery 对象中的第一个毗(pí)邻元素的索引值。

还有一个通用的 jQuery 方法是 is()。它接收一个选择器作为参数,如果选中元素至少有一个匹配该选择器时,则返回 true。可以在 each() 回调函数中使用它,例如:

复制$("div").each(function () {

// 对于每一个

元素

if ($(this).is(":hidden")) return; // 跳过隐藏元素

// 对可见元素做点什么

});jQeury 的 getter 和 setterjQuery 对象上最简单、最常见的操作是获取(get)或设置(set)HTML 属性、CSS 样式、元素内容和位置高宽的值。jQuery 中的 getter 和 setter:

jQuery 使用同一个方法即当 getter 用又当 setter 用,而不是定义一对方法。如果传入一个新值给该方法,则它设置此值;如果没有指定值,则它返回当前值;

用作 setter 时,这些方法会给 jQuery 对象中的每一个元素设置值,然后返回该 jQuery 对象以便链式调用;

用作 setter 时,这些方法经常接收对象参数。在这种情况下,该对象的每个属性都需指定一个将要被设置的键值对;

用作 setter 时,这些方法经常接收函数参数。在这种情况下,会调用该函数来计算需要被设置的值。调用该函数传入的 this 值是对应的元素,第一个参数是该元素的索引值,第二个参数是该元素的当前值;

用作 getter 时,这些方法只会查询元素集中的第一个元素,返回单个值。如果需要遍历所有元素,请使用 map()。

获取和设置 HTML 属性attr() 是 jQuery 中用于 HTML 属性的 getter / setter。attr() 处理浏览器的兼容性和一些特殊情况,还可以让 HTML 属性名和 JavaScript 属性名可以等同使用,如 "for" - "htmlfor"、"class" - "className"。一个相关的函数是 removeAttr()。例子:

复制$('form').attr('action'); // 获取第一个 form 元素的 action 属性

$('#icon').attr('src', 'icon.gif'); // 设置 src 属性

$('#banner').attr({src:'banner.gif', alt:'Adverisement', width:720, height:64});

$('a').attr('target', '_blank'); // 使所有链接在新窗口中打开

$('a').attr('target', function () {

if (this.host == locaction.host) return '_self';

else return '_blank';

}); // 非站内链接在新窗口中打开

$('a').attr({target:function () {...}}); // 可以像这样传入函数

$('a').removeAttr('target'); // 让所有连接在本窗口中打开获取和设置 CSS 属性css() 和 attr() 很类似,只是 css() 作用于元素的 CSS 样式,而不是元素的 HTML 属性。css() 返回元素的当前的样式,返回值可能来自 style 属性也可能来自样式表。css() 允许在 CSS 样式名中使用连字符或驼峰格式的 JavaScript 样式名。

复制('h1').css('font-weight'); // 获取第一个

的字体重量

('h1').css('fontWeight'); // 也可以采用驼峰格式

('h1').css('font'); // 错误:不可以获取复合样式

('h1').css('font-variant', 'smallcaps'); // 将样式设置在所有

元素上

('div.note').css('board', 'solid black 2px'); // 设置复合样式

('h1').css({backgroundColor:'black', textColor:'white', fontVariant:'small-caps', padding:'10px 2px 4px 20px'. boarder:'dotted black 4px'});

('h1').css('font-size', function (i, curval) {

return Math.round(1.25 * parseInt(vurval));

}); // 使所有的

字体增加 25%获取和设置 CSS 类addClass() 和 removeClass() 用来从选中元素中添加和删除类。toggleClass() 在当元素还没有某些类时,给元素添加这些类,反之则删除。hasClass() 用来判断某类是否存在。例子:

复制// 添加 CSS 类

$("h1").addClass("hilite");

$("h1+p").addClass("hilite first"); // 给

后面的

添加两个类

$("section").addClass(function (n) {

// 传递一个函数用以匹配

return "section" + n; // 每一个元素添加自定义类

});

// 删除 CSS 类

$("p").removeClass("hilite"); // 从所有

元素中删除一个类

$("p").removeClass("hilite first"); // 允许一次删除多个类

$("section").removeClass(function (n) {

// 从元素中删除自定义类

return "section" + n;

});

$("div").removeClass(); // 删除所有

中的所有类

// 切换 CSS 类

$("tr:odd").toggleClass("oddrow"); // 如果该类不存在,则添加。如果存在则删除

$("h1").toggleClass("big bold"); // 一次切换两个类

$("h1").toggleClass(function (n) {

// 切换用来函数计算出来的类

return "big bold h1-" + n;

});

$("h1").toggleClass("hilite", true); // 类似 addClass

$("h1").toggleClass("hilite", false); // 类似 removeClass

// 检测 CSS 类

$("p").hasClass("first"); // 是否所有 p 元素都有该类

$("#lead").is(".first"); // 功能和上面类似

$("#lead").is(".first.hilite"); // is() 比 hasClass() 更灵活获取和设置 HTML 表单值val() 用来获取和设置 HTML 表单元素的 value 属性,还可以用于获取和设置复选框、单选按钮以及 中获取单一值

$("select#extras").val(); // 从