分类
技术前沿 技术奇客

什么是 jQuery?深入浅出介绍jQuery是如何工作的?

到底什么是 jQuery, jQuery 团队有一段很好的阐述:

jQuery 是一个快速,精确的 JavaScript 库,简化了对 HTML 文档的操作,动画以及事件处理,同时又是快速 Ajax 开发交互平台。jQuery 的使命是改变你编写 JavaScript 代码的方式。

jQueryis a new kind of JavaScript Library.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

几年前,可能很多人都没听说过 jQuery,当时,它只是 JavaScript 大师 John Resig 的一个设想。今天,jQuery 已经是世界上最成功的 JavaScript 库,互联网上 28% 的网站使用 jQuery。最为开源工具,Web 开发者们喜欢 jQuery,大公司也对它张开臂膀,它几乎已经成为 Web 开发与设计的标准,甚至得到了微软的支持。

jQuery是一个JavaScript库,它封装了很多方法,我们可以拿来直接使用,这大大简化了网页JavaScript代码的开发。那么jQuery是如何工作的呢?下面就给大家介绍一个基础的教程。

首先,新建一个文件夹

然后,下载jQuery文件放在新建的文件夹里

目前jQuery的最新版本是1.7,下载地址是:http://code.jquery.com/jquery-1.7.min.js

最后,在文件夹里新建一个html文件,然后用编辑器打开,比如记事本。

将以下代码复制黏贴到文件里:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>first jQuery Demo by ITGeeker技术奇客</title>
</head>
<body>
<a href="http://jquery.com/">jQuery官方网站</a>
<script src="jquery-1.7.min.js"></script>
<script>
//这里一会放jQuery代码
</script>

</body>
</html>

保存并用浏览器打开文件,会看到页面上有一个jQuery链接,点击以后,跳转到jQuery的官网。
继续编辑文件,将以下代码复制黏贴到<script></script>之间:

$(document).ready(function(){
$(“a”).click(function(event){
alert(“感谢您的访问!”);
});
});

保存并浏览文件,这时,点击链接跳转到jQuery官网前会弹出一个提示框。呵呵,这就用上jQuery了!
接着往下编辑,在alert语句之后加上event.preventDefault();语句,保存浏览,这时关闭提示框以后,页面不再跳转了,新加的语句阻止了a的默认行为。
ready是jQuery中最基本最常用的事件,$(document).ready(function(){…})与window.load=function(){…}的区别在于前者在html元素加载完毕后就执行不等待图片加载完毕。
下面,我们再看下jQuery对CSS样式的操作。将以下样式复制黏贴到<head></head>里:

<style>
a.test { font-weight: bold; }
</style>

再将以下代码复制黏贴到a元素的后面:

<input type=”button” onclick=’javascript:$(“a”).addClass(“test”);’ value=”添加样式” />
<input type=”button” onclick=’javascript:$(“a”).removeClass(“test”);’ value=”去掉样式” />

保存浏览文件,这时页面上多了2个按钮,先点击“添加样式”,这时链接的字体变粗了,再点击“去掉样式”,链接的字体就恢复正常了。
最后,我们看下用jQuery实现简单的动画效果,用以下代码替换掉<script></script>中之前添加的代码:

$(document).ready(function(){
$(“a”).click(function(event){
event.preventDefault();
$(this).hide(“slow”);
});
});

保存浏览文件,点击链接,你会发现它慢慢的消失了。如何让链接显示回来呢?给大家一个方法:show(),可以加上参数“slow”,呵呵,来实现一下吧!
原文发表于知蚁博客,地址:http://www.letuknowit.com/archives/63 ITGeeker技术奇客有所更新。

发表评论

电子邮件地址不会被公开。 必填项已用*标注