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 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
php 归并排序 数组交集
2011/05/10 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
python跳出双层for循环的解决方法
2019/06/24 Python
python随机数分布random均匀分布实例
2019/11/27 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
Python创建自己的加密货币的示例
2021/03/01 Python
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
Django实现翻页的示例代码
2021/05/24 Python
分析Netty直接内存原理及应用
2021/06/14 Java/Android
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技