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 相关文章推荐
javascript 添加和移除函数的通用方法
Oct 20 Javascript
Javascript 复制数组实现代码
Nov 26 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
javascript实现简易数码时钟
Mar 30 Javascript
Javascript文本框脚本实现方法解析
Oct 30 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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 cookie 登录验证示例代码
2009/03/16 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
js编写简单的聊天室功能
2017/08/17 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
python实现列表中由数值查到索引的方法
2018/06/27 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
浅析Python 条件控制语句
2020/07/15 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
优秀研究生自我鉴定
2013/12/04 职场文书
工作的心得体会
2013/12/31 职场文书
青奥会口号
2014/06/12 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书