首页 > 开发 > JS > 正文

介绍一个javascript库--jquery

2024-09-06 12:40:47
字体:
来源:转载
供稿:网友

8月26日,jquery发布了1.0版。
jquery是一个轻便的,精简的javascript库,可以通过非常方便的代码实现强大的功能。
jquery支持各种浏览器:Internet Explorer 5.5+, Firefox 1.0+, Safari 1.3+, and Opera 8.5+.

jquery的官方主站:http://jquery.com/
jquery的文档资料:http://jquery.com/docs/
jquery的下载地址:在官方主站首页就可以下载到,压缩后的大小为17.1k,确实小巧。

下面是一些相当jquery的使用说明和功能介绍:

如果你现在还没有建立起来一个基本的测试页面,那我建议你建立一个新的HTML页面,并加入下面的代码来作为练习的开始:

<html>
<head>
<script type="text/javascript"
xsrc="http://jquery.com/src/latest/" mce_src="http://jquery.com/src/latest/" ></script>
<script type="text/javascript">
// Your code goes here
</script>
</head>
<body>
<a xhref="http://jquery.com/" mce_href="http://jquery.com/" >jQuery</a>
</body>
</html>

domcument准备完成时加载代码

很多javascript的开发人员习惯性的把类似下面的代码作为他们程序代码的开始:
window.onload = function(){ ... }
在页面加载的时候立即运行{}中的代码。问题是:在页面中的所有的图片还没有下载完成的时候这些代码是不会运行的。而当你想让你代码第一时间运行的时候,选用window.onload的理由得归咎于html document还没有下载完成这个事实。为了巧妙的饶开上面的两个问题,你可以使用jQuery提供的一个很简单的语句:

$(document).ready(function(){
// Your code here
});

上面的代码将检查document并且一直等到domcument对象可以被操纵―这也正是我们所期望的!将上面代码复制到你html页面的js区域,写一些代码测试一下喔 ^_^

让一些事情发生在鼠标点击时

首先,我们看看在点击一个超链节发生了什么。添加下面的代码:

$("a").click(function(){
alert("Thanks for visiting!");
});

保存并重新加载你的html页面,点击页面上的超链节。在你离开本页面准备转到jQuery.org之前会弹出一个对话框。

添加一个Class

另外一个基本的任务就是为一个元素添加/移除一个Class。 请看下面的例子:
$("a").addClass("test");
或者
$("a").removeClass("test");

特效

Basic Effects 部分,提供了几个经常使用的特殊效果,让你的网站更有吸引人魅力。我们来做一个小小的测试,修改之前添加的那个超链接的click方法:
$("a").click(function(){
$(this).hide("slow");
return false;
});

现在你点击这个超链接,你将会发现这个它会慢慢的消失在你的视线中。可以在Feed Pile.com找到更多的特效。

 

另:还有一个15天学习jquery的教程(英文)
http://15daysofjquery.com/

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表