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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
JS实现动态星空背景效果
Nov 01 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发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
PHP 无限级分类
2017/05/04 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
python实现调用其他python脚本的方法
2014/10/05 Python
python提取页面内url列表的方法
2015/05/25 Python
打包发布Python模块的方法详解
2016/09/18 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
python制作抽奖程序代码详解
2021/01/15 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
高三政治教学反思
2014/02/06 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python