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操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
js实现批量删除功能
Aug 27 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
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生成随机数或者字符串的代码
2008/09/05 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
JS中==与===操作符的比较
2009/03/21 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
最小二乘法及其python实现详解
2020/02/24 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
Django多数据库联用实现方法解析
2020/11/12 Python
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android