JQuery 学习笔记01 JQuery初接触


Posted in Javascript onMay 06, 2010

一、下载
官方网址是http://jquery.com/
官方下载地址:http://docs.jquery.com/Downloading_jQuery
里边有当前版本和历史版本的下载,可以下载下来部署在自己的服务器上
上面也有Google\Microsoft\jQuery的CDN(Content Delivery Network)地址,由于目前jQuery的广泛使用,选择CDN地址可以充分利用缓存和这些互联网大佬们的带宽和服务器资源。
官网上下载有两种版本Compressed(Minified version)和Uncompressed(Source version)
前者体积小70k左右,还不到未压缩版本的一半大小。
但是未压缩版本更容易阅读源代码,以及调试
二、安装
安装jQuery非常简单 只需在HTML中引用你下载的那个js文件即可
比如     <script type="text/javascript" src="/jslibs/jquery.min.js"></script>
如果使用CDN 就直接引用<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
三、第一个程序

<!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> 
<title></title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { alert("hello"); }) 
</script> 
</head> 
<body> 
</body> 
</html>

刷新页面后 就可以执行了。
刚开始可能对$有点不适应,其实用不了多久就会习惯,并且喜欢它的简洁。如果实在吃不消,“$”也可以用“jQuery”代替

$(function() { alert("hello"); })

相当于
$(document).ready(function() { alert("hello"); })

也基本相当于

document.onready = function() {alert("hello");}

也就是说当浏览器把文档结构完全解析后,就可以执行下面的语句了。
与document.onload的区别在于,onload不但需要解析完文档结构,还要等待所有需要加载的内容加载完毕(比如图片等)
因为$(document).ready(fn)的频繁使用,所以可以简化为$(fn)

Javascript 相关文章推荐
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
小程序实现密码输入框
Nov 16 Javascript
Jquery 扩展方法
May 06 #Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 #Javascript
屏蔽F1~F12的快捷键的js函数
May 06 #Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 #Javascript
picChange 图片切换特效的函数代码
May 06 #Javascript
JS 自定义函数缺省值的设置方法
May 05 #Javascript
JSQL 批量图片切换的实现代码
May 05 #Javascript
You might like
PHP页面间传递参数实例代码
2008/06/05 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
python每隔N秒运行指定函数的方法
2015/03/16 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
python二元表达式用法
2019/12/04 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
python实现梯度下降法
2020/03/24 Python
聊聊python中的循环遍历
2020/09/07 Python
彪马法国官网:PUMA法国
2019/12/15 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
党的生日活动方案
2014/08/15 职场文书
人事代理委托书
2014/09/27 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
党员证明信
2015/06/19 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis