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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
浅谈Express异步进化史
Sep 09 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
es6数值的扩展方法
Mar 11 Javascript
Electron vue的使用教程图文详解
Jul 05 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
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
javascript知识点收藏
2007/02/22 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
js动态切换图片的方法
2015/01/20 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
深入理解vue Render函数
2017/07/19 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
Mac中安装nvm的教程分享
2017/12/11 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
pycharm 使用心得(四)显示行号
2014/06/05 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Python中pillow知识点学习
2018/04/30 Python
python之文件读取一行一行的方法
2018/07/12 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
竞选班干部演讲稿300字
2014/08/20 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
通知函格式范文
2015/04/27 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers