jQuery-基础入门学习笔记一

lansky07

浏览: 314575 次
性别:
来自: NC

最近访客更多访客>>

ying_stone

sky_xin

suncong1024

babysoon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery JavaScript XHTML Web 框架

做几个项目中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程序:

<!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=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!

1
顶

0
踩

分享到：

jQuery-DOM对象和jQuery对象及转换学习笔 ... | jQuery-Dreamweaver插件支持jquery

2008-11-22 21:42
浏览 1405
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论