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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
js form action动态修改方法
Nov 04 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
vue实现循环切换动画
Oct 17 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
js实现电灯开关效果
Jan 19 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python判断元素是否存在的实例方法
2020/09/24 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
阿拉伯书店:Jamalon
2019/07/24 全球购物
光声世纪笔试题目
2012/08/25 面试题
护士个人简历自荐信
2013/10/18 职场文书
批评与自我批评材料
2014/02/15 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
公证书格式
2015/01/23 职场文书
个人廉政承诺书
2015/04/28 职场文书