JQuery从头学起第一讲


Posted in Javascript onJuly 04, 2010

JQuery的重要性对一个coder来说应该是不言而喻的, 多少次在应聘的时候被问及是否会JQuery;多少次在写脚本的时候因为浏览器的不兼容而吐血;多少次因为需要用脚本做一个简单的效果而写到手抽筋。JQuery出现后,很多问题都被轻易解决了。
每学一样东西的时候,我们总是喜欢去了解下它的历史。既然是从头学起,我们也来稍微了解下它的历史。
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer, 罗马尼亚的Stefan Petre等等。

jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是—— WRITE LESS,DO MORE,写更少的代码,做更多的事情。

它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。

jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有 许多成熟的插件可供选择。

jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html 里面插入一堆js来调用命令了,只需定义id即可。
下面开始我们第一个DEMO,我们根据DEMO来讲解,第一讲我们只做简单的介绍,不做深入的讲解分析。如果需要提供源码的网友可以加入群:34979719

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery_1._Default" %> 
<!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 runat="server"> 
<title></title> 
<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
alert("hello world"); 
</script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
alert("hello world again"); 
}); 
</script> 
<script type="text/javascript"> 
function f1() { 
alert("hello world again again");} 
</script> 
</head> 
<body onload="f1();"> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
</body> 
</html>

从上面的DEMO1中可以看出要用JQuery必须先引用一个JQuery包,JQuery包的下载地址附上

压缩版:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=<SPAN>Download<%2FSPAN>

未压缩版:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js

以上下载的JQuery包版本是1.3.2的,最新的JQuery的包已经到1.42了,各位网友如果想尝鲜可以自己去下载。目前我们讲的主要还是1.3.2版本的

引入JQuery包后,我们可以开始写我们的脚本程序了,从例子的运行效果可以看出,页面在加载后会依次弹出:“hello world”、“hello world again”、“hello world again again”,效果相同。第一个和第三个是传统的JS,第二个是JQuery程序。如果把<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>这行去掉,运行后会提示:$ is not defined。

$号是 jQuery “类”(jQuery "class")的一个别称,因此$()构造了一个新的jQuery 对象(jQuery object)。$()是选择器,$(document)构造了一个JQuery的document对象。函数 ready () 是这个jQuery对象的一个方法,DOM载入后开始执行该方法的事件,DEMO中该事件触发时执行了它所提供的alert方法。JQuery的方法都以一对小括号()括起来,括号后面加分号。

今天就讲这么多,不好的地方希望各位网友可以谅解,也希望各位网友踊跃讨论,及时指正。下一讲我们会讲JQuery的选择器,JQuery是如何来获得控件值的。

Javascript 相关文章推荐
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 #Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 #Javascript
一个原生的用户等级的进度条
Jul 03 #Javascript
清空上传控件input file的值
Jul 03 #Javascript
javascript深入理解js闭包
Jul 03 #Javascript
JSON JQUERY模板实现说明
Jul 03 #Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 #Javascript
You might like
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
使用Django清空数据库并重新生成
2020/04/03 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
理工科学生的自我评价
2013/12/15 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
伊索寓言教学反思
2014/05/01 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang