学习jQuery的第二篇日记-有趣的事

学习jQuery的第二篇日记

2011-01-06 阅读 46

用一个简单的例子对比一下javascript和jQuery。

【例子】

要求：点击按钮会弹出一个框，至于框中的内容又自己爱好而定。

JavaScript代码如下：

<pre class="brush:jscript;">＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞实例1＜/title＞
＜script＞
function myClick()
{
alert("第一个javascript练习，成功！");
}
＜/script＞
＜/head＞
＜body＞
＜input type="submit" onclick="myClick();" value="请点击我" /＞
＜/body＞
＜/html＞[removed]void(0)
```
	<p>
		下面我们用jQuery来实现上面的功能。不过在此之前，我们还要做一些准备工作。</p>
	<p>
		准备内容是：</p>
	<p>
		第一：首先要从jQuery的官方网址下载js文件。（下载地址：<a href="http://jquery.com/">http://jquery.com/</a>）</p>
	<p>
		第二：就是把我们下载的js文件引进来就可以了。</p>
	<p>
		引进js代码如下：</p>
	<pre class="brush:jscript;">    	＜script language="javascript" charset="GB2312" src="js/demo1.js"＞＜/script＞
```

注释：charset="xxx"调节页面编码，src="路径"设置路径。

jquery方法实现代码如下：

<pre class="brush:jscript;">    ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞实例1＜/title＞
＜script type="text/javascript" src="../js/jquery-1.4.2.min.js"＞＜/script＞
＜script type="text/javascript"＞
$(document).ready(function(){
  $('#a').click(function(){
	alert('第一个jquery练习，成功！');										  
	});						   
});
＜/script＞
＜/head＞
＜body＞
＜input id="a" type="submit" value="请点击我" /＞
＜/body＞
＜/html＞

```
<p>
	注释：</p>
<div>
	$等同于jQuery</div>
<div>
	$(document).ready()等同于jQuery(document).ready()</div>
<div>
	他们在例子中的意思都等同于js中的</div>
<div>
	onload()方法</div>
<div>
	click()表示鼠标点击事件</div>
<div>
	&nbsp;</div>
<div>
	对于例子中的“$”符号的作用，我们会在后面具体介绍。</div>