《JavaScript_DOM编程艺术》附录 JavaScript库--20210521
发布于2021-05-22 22:15 阅读(1079) 评论(0) 点赞(28) 收藏(1)
使用 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 动画和效果
略
所属网站分类: 技术文章 > 博客
作者：西门费雪
链接：http://www.qianduanheidong.com/blog/article/108988/c5e6045f94f72c6085dc/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力