jQuery-基础入门学习笔记一

最新推荐文章于 2024-08-09 02:16:38 发布

最新推荐文章于 2024-08-09 02:16:38 发布 · 108 阅读

文章标签：

#jQuery #JavaScript #XHTML #Web #框架 #ViewUI

jQuery 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了jQuery的基本使用方法，包括如何下载和引入jQuery库，以及通过一个简单的示例演示了如何使用jQuery选择器为页面元素添加点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做几个项目中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!