jQuery-基础入门学习札记一

2012-10-28

jQuery-基础入门学习笔记一做几个项目中JavaScript用的说多吧也不太多，说少吧也不太少，总得来说在做web项

jQuery-基础入门学习笔记一

做几个项目中JavaScript用的说多吧也不太多，说少吧也不太少，总得来说在做web项目中还是蛮有用的，新的项目中打算用jQuery，原来也多少了解了一些jQuery，这是一个非常不错的框架，打算好好的学习一下它。下星期项目组还有一个相应的jQuer培训。开始！学习jQuery吧！

首先下载下jQuery,下载地址：http://jquery.com/src/ ?

以及相应的jQuery API文档：http://jquery.com/api/

jQuery是一个很少的js库，下载当然是最新的了，jquery-1.2.6.min.js解压后要用到的就是这个只有55kb的js文件。非常的棒！

在页面文件中只需要简单的引入即可：<script src="你的实际路径/jquery-1.2.6.min.js" type="text/javascript"></script>

下面是我写的第一个jquery程序:

<html?xmlns="http://www.w3.org/1999/xhtml"><head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/><title>无标题文档</title>
<script?src="jquery-1.2.6.min.js"?type="text/javascript"></script><script?language="javascript">
????$(document).ready(function(){????????$('p').click(function(){
????????????alert("hello?jQuery!");????????})
????});</script>
</head>?<body>
<div?id="container">????????<p>点击这里</p>
????</div></body>
</html>

解释一下这个简单的jQuer小程序：

首先看到的是$(document),意思是获取整个网页文档对象（类似的于window.document）,$(document).ready意思就是说，获取文档对象就绪的时候.这个功能用简单的javascript,window.onload()同样能实现,但是当我们用window.onload函数执行的时候，要等所有东西已经载入，包括图像和横幅等等。我们知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间。

?再者$('p')是指获取网页中所有这p标签，如果是用$('#p')是指获取元素ID；$('p').click是指获取到的页面中所有p标签的单击事件；单击执行包含的函数事件。

以上程序执行的结果是点击：点击这里字样时会弹出一个对话框显示hello jQuery!

总结来说：$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。简单说,这个方法完全是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用所绑定的函数.

使用jQuery实现自己想的代码结构就是：

$(document).ready(function(){
// 你的代码
});

至此我们了解了一下jQuery!

热点排行

Web前端

jQuery-基础入门 学习札记一

jQuery-基础入门学习札记一