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幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
js数组实现权重概率分配
Sep 12 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
Vue数字输入框组件使用方法详解
Feb 10 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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
PHP insert语法详解
2008/06/07 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
JavaScript confirm选择判断
2008/10/18 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
Postman无法正常返回结果问题解决
2020/08/28 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python如何生成网页验证码
2018/07/28 Python
python 文件查找及内容匹配方法
2018/10/25 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python super()函数使用及多重继承
2020/05/06 Python
小学生红领巾广播稿
2014/01/21 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
鸟的天堂导游词
2015/01/31 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
python Polars库的使用简介
2021/04/21 Python
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript