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获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
React路由管理之React Router总结
May 10 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 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自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
5s标语大全
2014/06/23 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
夫妻吵架保证书
2015/05/08 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
禁毒心得体会范文
2016/01/15 职场文书
四年级语文教学反思
2016/03/03 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL