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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
JQuery小知识
Oct 15 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
JS动画定时器知识总结
Mar 23 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
python 获取et和excel的版本号
2009/04/09 Python
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
python 重命名轴索引的方法
2018/11/10 Python
深入解析神经网络从原理到实现
2019/07/26 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
如何理解python面向对象编程
2020/06/01 Python
python如何停止递归
2020/09/09 Python
薇姿法国官网:Vichy法国
2021/01/28 全球购物
公务员综合考察材料
2014/02/01 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
公司离职证明标准格式
2014/11/18 职场文书
单位婚育证明范本
2014/11/21 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js