2015年About jquery 简介.ppt

文档介绍：About jquery
1
jquery
jQuery是一个优秀的Javascrīpt框架。
快速的,简洁的,轻量级的js库
文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
2
jquery 优势
纯粹的js代码库,可在任何其它web应用中使用
兼顾主流浏览器标准:操作对象不是原始dom,而是jquery对象,开发者无须关注不同浏览器处理dom的差异。
简化数组、字符串操作
对ajax提供良好的支持
3
jQuery设计思想
$()
jQuery
eg:
4
Hello world
要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件
用一个ready事件作为处理HTML文档的开始
$(document).ready(function() { // do stuff when DOM is ready });
5
点击页面的一个链接时都会触发这个"Hello world"的提示
$(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); });
$("a") 是一个jQuery选择器(selector)
函数 click() 是这个jQuery对象的一个方法
绑定了一个单击事件到所有选中的标签
用jQuery不需要在每个a标签上写onclick事件
6
为元素添加css样式
选择list本身,这个list有一个ID叫“orderedlist”
javascript写法:
("orderedlist").
在jQuery
$(document).ready(function() { $("#orderedlist").addClass("red"); });
添加一些新的样式到list的子节点:
$(document).ready(function() { $("#orderedlist > li").addClass("blue"); });
7
鼠标放在li对象上面和移开时
进行样式切换,只在list的最后一个element上生效:
$(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); }, function() { $(this).removeClass("green"); }); });
8
find()
$(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).html( $(this).html() + " BAM! " + i ); }); });
each()方法迭代了所有的li
html()用来获取每个li的html文本, 追加一些文字,并将之设置为li的html文本。
9
reset()
在没有被jQuery覆盖的DOM元素上call一些方法,想像一个在你用AJAX方式成功提交后的reset
$(document).ready(function() { // use this to reset a single form $("#reset").click(function() { $("form")[0].reset(); }); });
10