《JavaScript_DOM编程艺术》附录 JavaScript库--20210521

使用 JavaScript 库可以提升效率，简化开发步骤。

A.1 选择合适的库

• jQuery
• Prototype
• YUI

A.2 语法

使用jQuery先删除文档中所有段落的一个类名，然后再为它们添加另外一个类名。

$('p').removeClass('classFoo').addClass('classBar');

迭代、循环。jQuery的each方法以及其他循环方法，会基于列表中的每个元素来执行一个回调函数。这个回调函数只接收元素在列表中的索引作为参数，并在当前节点的上下文执行，因此这个例子中的this引用的就是每个li元素本身。

$('li').each(function(i){
	alert(typeof this);});

A.3 选择元素

• 通用类
  

A.3.1 CSS选择器

A.3.2 库所提供的专有选择器

A.3.3 使用回调函数筛选

使用jQuery寻找只有一个图片子元素的锚。

//jQuery库的回调筛选函数
var singleImageAnchors = $('a').filter(function(){
	return ($('img',this).length==1)
});

A.4 操作DOM元素

A.4.1 生成内容

给文档的body元素添加一个新的div元素。

$('<div id="example">Hello</div>').appendTo(document.body);

A.4.2 操作内容

移动某些元素的位置。(还可以删除、插入、添加、前置等操作)

$('ul#list1 li').appendTo("ul#list2");

$('ul#list1 li').clone().appendTo("ul#list2");

A.5 处理事件

A.5.1 加载事件

为页面加载事件，即取代addLoadEvent。jQuery的read方法实现相应的机制。

$(document).ready(handler);
$(handler);

$(document).ready(function(){
//在页面上的操作
});

A.5.2 其他事件

除了加载，jQuery等库还可以提供特定事件，例如blur、focus、click、dbclick、mouseover、mouseout、submit等。

$('a').click(function(event){
	//在新窗口中打开当前href中的链接
	window.open(this.getAttribute('href'));
	//阻止链接的默认动作
	return false;
});

//在没有用户交互的情况下，触发元素上已经注册的事件监听器。
$('a:first').click();

A.6 Ajax

略

A.7 动画和效果

略