使用 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 动画和效果
略