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 相关文章推荐
关于js类的定义
Jun 28 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
React-router4路由监听的实现
Aug 07 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python3多线程知识点总结
2019/09/26 Python
Python 实现try重新执行
2019/12/21 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
高级编程求职信模板
2014/02/16 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
Nginx源码编译安装过程记录
2021/11/17 Servers
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技