jQuery 是什么?
jQuery是什么 ?
jQuery是一个快速,简洁的JavaScript库,由John Resig创建于2006年,有一个很好的座右铭:少写,多做。
jQuery 简化了 HTML 文档遍历,事件处理,动画和Ajax交互快速Web开发的。
jQuery是一个JavaScript工具包,旨在简化各种任务,通过编写更少的代码。这里是重要的支持jQuery的核心功能列表:
-
DOM操作: jQuery 很容易地选择DOM元素,遍历和修改其内容,通过使用跨浏览器的开源选择器引擎称为Sizzle(嘶嘶声)。
-
事件处理: jQuery提供了一个优雅的方式来捕捉各种各样的事件,比如用户点击一个链接,而无需杂乱的HTML代码本身与事件处理程序.
-
AJAX 支持: jQuery 帮助采用AJAX技术,开发一个具有响应性的和功能丰富的网站.
-
动画: jQuery提供了大量的内置动画效果,可以在网站中使用。
-
轻量级: jQuery是非常轻量级的库 - 大小约19KB(精缩和gzip压缩)。
-
跨浏览器支持: jQuery有跨浏览器的支持,以及在IE6.0+,FF2.0+,Safari 3.0以上版本,Chrome和Opera9.0+
-
最新技术: jQuery的支持CSS3选择器,基本的XPath语法。
如何安装jQuery?
这是很简单的事情需要设置使用jQuery库。必须进行两个简单的步骤:
-
转到下载页面下载最新版本。
-
现在把 jquery1.8.min.js 下载文件在网站的目录,例如/jquery。
下载的文件名 jquery1.8.min.js 版本可能会有所不同。
jQuery没有要求任何特殊的安装非常类似于JavaScript,我们并不需要任何编译或建立阶段使用jQuery。
如何使用jQuery库?
现在,可以在HTML文件内容如下:包括jQuery库
<html> <head> <title>The jQuery Example</title> <script type="text/javascript" src="/jquery/jquery-1.8.min.js"></script> <script type="text/javascript"> // you can add our javascript code here </script> </head> <body> ........ </body> </html> |
如何调用jQuery库功能?
由于几乎所有的东西,我们做的时候使用jQuery读取或操纵的文档对象模型(DOM),我们需要确保我们开始添加事件等,只要DOM准备好。
如果您想要一个事件工作网页上,应该调用它里面的$(document).ready() 函数。它里面的一切都将载入尽快DOM加载之前加载页面内容。
要做到这一点,我们需要注册一个ready事件的文件如下:
$(document).ready(function() { // do stuff when DOM is ready }); |
调用任何jQuery库函数,使用HTML脚本标签,如下图所示:
<html> <head> <title>The jQuery Example</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" language="javascript"> // <![CDATA[ $(document).ready(function() { $("div").click(function() { alert("Hello world!"); }); }); // ]]> </script> </head> <body> <div id="newdiv"> Click on this to see a dialogue box. </div> </body> </html> |
如何使用自定义脚本?
这是更好地在自定义的JavaScript文件:custom.js写我们的自定义代码,具体如下:
/* Filename: custom.js */ $(document).ready(function() { $("div").click(function() { alert("Hello world!"); }); }); |
现在,我们可以在HTML文件如下包括custom.js文件:
<html> <head> <title>The jQuery Example</title> <script type="text/javascript" src="/jquery/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="/jquery/custom.js"></script> </head> <body> <div id="newdiv"> Click on this to see a dialogue box. </div> </body> </html> |
使用多个库:
可以使用多个库都在一起,要彼此没有冲突。例如,可以用 jQuery 和 MooTool javascript库在一起。
可以查看jQuery noConflict方法的更多细节。
下一步是什么?
不要担心太多,如果不明白上面的例子。他们很快在随后的章节学习和熟悉。
下一章将试图掩盖一些基本的概念都来自传统的JavaScript。