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 相关文章推荐
Web开发之JavaScript
Mar 29 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
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中,文件上传
2006/12/06 PHP
php网站地图生成类示例
2014/01/13 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
php简单实现MVC
2015/02/05 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
JS 数组基本用法入门示例解析
2020/01/16 Javascript
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
python绘制雪景图
2019/12/16 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
后勤工作职责
2013/12/22 职场文书
自我管理的活动方案
2014/08/25 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
Python中的嵌套循环详情
2022/03/23 Python
原生JS实现分页
2022/04/19 Javascript