jQuery概述
jQuery是一套简洁快速的JavaScript脚本库(建议学习jQuery前先学习JavaScript DOM)，用于提高编程的效率。同时jQuery也拥有良好的兼容性，它兼容各大主流浏览器，支持的浏览器包括 IE6.0++、Firefox1.5、Safari2.0 、Opera9.0+。
jQuery的使用
可以在jquery官网下载所需的jQuery库，下载到本地后通过调用便可使用。
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
src中写入jQuery库的相对路径即可。
另外还有一种方法是远程引用(这种方法需要电脑联网，不推荐使用)
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
注：一般开发时使用jQuery的未压缩版，便于查看源码。
最后会修改为.min的压缩版，可以降低网站流量，提升访问速度。
onload与 ready()
知道怎么调用后，我们可以先让浏览器弹出一个对话框，用JavaScript代码为：
window.onload = function () {
alert("hello world!");
}
jQuery的写法为：
$(document).ready(function(){
alert("hello world!");
});
也可以用 $ 代替 $(document).ready
$(function(){
alert("hello world!");
});
这两种方法也有着一些区别：
- window.onload() 只能有一个监听回调,而jQuery可以有多个监听。
- $(document).ready()方法比window.onload()方法载入速度更快。
- window.onload() 是在页面上有元素都载入完毕后才开始执行(比如图片)。而$(document).ready()方法则是DOM元素载入后执行。
在这里做一个尝试：在后台输出一张图片的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<img id="logo" src="https://www.baidu.com/img/bd_logo1.png?qua=high">
/*因为不知道用什么图片好，就找了百度一下的logo，希望不会介意。*/
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>//调用jQuery库
<script type="text/javascript">
console.log('直接', $('#logo').width())
window.onload = function () {
console.log('onload', $('#logo').width())
}
$(function () {
console.log('ready', $('#logo').width())
})
</script>
</body>
</html>
最后结果为
因为jQuery只在DOM元素加载完成之后才开始执行，这个时候并没有加载到图片，所以jQuery的ready()函数执行时无法得到图片大小。
如果这个时候仍想使用jQuery得到宽，则需要jQuery的on()方法
$('#logo').on('load', function () {
console.log('img load', $(this).width())
})
多库共存
在使用jQuery开发的时候，还有可能用到其他的JavaScript库，如果有几个库都有 $ , 就会存在冲突。这个时候一般建议把 $ 的控制权让给其他库：
- jQuery库在其他库之前导入，可以直接使"jQuery"来代替" $ "符号
jQuery(function(){
...
})
- jQuery库在其他库之后导入(建议使用第一种)
(1)可以使用 jQuery.noConflict() 来释放jQuery对" $ "符号的控制权。
jQuery.noConflict();
jQuery(function(){
...
})
(2)自定义快捷方式，例如$ j , $ m等
var $m = jQuery.noConflict(); //自定义一个快捷方式
$m(function(){ //使用
$m("#top").···
})
(3)如果不想给jQuery自定义名称，又想使用 $
jQuery.noConflict(); //转让控制权
jQuery(function($){ //使用jQuery
$("#top").··· //内部可以使用$方法
})
jQuery对象与DOM对象
DOM对象的的获取方法一般是getElementbyId()或者getElementByTagName(),而jQuery对象是包装DOM对象后产生的，类似于$("#id")。
jQuery对象和DOM对象的互换：
1. jQuer对象转为DOM对象
jQuery有两种方法将其转为DOM对象，即[index]和get(index)。例如：
var $top = $("#top"); //jQuery对象
var top = $top[0]; //DOM对象
或
var $top = $("#top"); //jQuery对象
var top = $top.get(0); //DOM对象
2.DOM对象转为jQuer对象
对于一个DOM对象，只需要$()将其包起来就是一个jQuery对象了。例如:
var top = document.getElementbyId("top");
var $top = $(top);