由来
jQuery由美国人John Resig于2006年初创建,至今已吸引了来自世界各地的众多javascript高手加入其team。
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
重大版本更新
2006 年 8 月发布了 jQuery1.0,第一个稳定版本,具有对 CSS 选择符、事件处理和 Ajax 交互的支持
2013 年 1 月发布了 jQuery1.9,CSS 的多属性设置,增强了 CSS3。 2013 年 5 月发布了 jQuery1.10,增加了一些功能。
2013 年 4 月发布了 jQuery2.0,5 月发布了 jQuery2.0.2,一个重大更新版本,不再支持IE6/7/8,体积更小,速度更快。
注意在jQuery2.0之后的版本不再支持ie6/7/8
特点
- 轻量级
- 链式语法
- 简单
- 易扩展
jQuery 最大的优势,就是特别的方便。比如模仿 CSS 获取 DOM,比原生的 JavaScript 要方便太多。并且在多个 CSS 设置上的集中处理非常舒服,而最常用的 CSS 功能又封装到 单独的方法,感觉非常有心。最重要的是 jQuery 的代码兼容性非常好,你不需要总是头疼 着考虑不同浏览器的兼容问题。
安装与引用
本地调用:<script type="text/javascript" src="jquery.js"></script>
远程调用:<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
连网的情况下可以用谷歌,微软或者百度的CDN(Content Delivery Network,即内容分发网络)
第一个函数 ready
jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready
$(document).ready(function(){
//代码
})
//简写
$(function(){
//代码
})
这个方法和js中的window.onload
有点相似但是也有不同
window.onload方法长久以来是程序员解决客户端页面载入问题的一个方法,只有少数大型的图片文件会被快速的载入,而大部分大型的图片文件会使window.onload()载入的很慢.
标题 | window.onload | $(function(){}) |
---|---|---|
执行时机 | 必须等待网页全部加载完毕(包括 图片等),然后再执行包裹代码 | 只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码 |
执行次数 | 只能执行一次,如果第二次,那么 第一次的执行会被覆盖 | 可以执行多次,第N次都不会被上 一次覆盖 |
把dom对象转化为jQuery对象
var btn = document.getElementsByTagName("button")[0];//获取button的dom对象
var $btn = $(btn) //通过$(dom对象)的方式, 把dom对象转化为jQuery对象
把jQuery对象转化为dom对象
var btn = document.getElementsByTagName("button")[0];//获取button的dom对象
var $btn = $(btn) //通过$(dom对象)的方式, 把dom对象转化为jQuery对象
$btn[0]; //加个下标,把jQuery对象转化成dom对象
$btn.get(0); //这样也能把jQuery对象转化为dom对象
给jQuery对象设置css样式
- 单条属性设置
$("div").css("background-color","#f00");
通过css()方法设置,css属性和属性值,都用引号引住,中间用逗号隔开
- 多条属性设置
$("div").css({"background-color" : "#f00" , "color" : "#fff"})
属性和属性值用冒号链接,每对属性之间用逗号隔开,属性和属性值要写在大括号中
在jQuery库中,$就是jQuery的一个简写形式。
如:
$("#id");
jQuery("#id");
//二者是等价的
在编写JavaScript时应尽量避免使用jQuery和$定义变量或方法,以免在同时使用JavaScript和jQuery时发生冲突。