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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 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把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP经典面试题集锦
2015/03/19 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
JScript的条件编译
2007/05/29 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
Javascript中神奇的this
2016/01/20 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
js正则相关知识点专题
2018/05/10 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
详解Vite的新体验
2021/02/22 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
同学会邀请书大全
2014/01/12 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
白莲教口号
2014/06/18 职场文书