# 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
# 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，
# 能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
什么是JQuery?
# JQuery是一个JavaScript函数库
# JQuery是一个轻量级的"写的少，做的多"的JavaScript库.可以通过一行简单的标记被添加到网页中．
# JQuery库包含以下功能:
# 1. HTML元素选取
# 2. HTML元素操作
# 3. CSS操作
# 4. HTML事件函数
# 5. JavaScript特效和动画
# 6. HTML DOM遍历和修改
# 7. AJAX(不刷新页面同时修改页面内容)
# 8. Utilities
# 除此之外，JQuery还提供了大量的插件
为什么使用JQuery?
# 目前网络上有大量开源的JS框架，但是JQuery是目前最流行的JS框架，而且提供了大量的扩展.
# 很多大公司都在使用JQuery，例如:
# Google,Microsoft,IBM,Netflix
# JQuery是否适用于所有浏览器
# jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题,目前jQuery兼容于所有主流浏览器,包括Internet Explorer 6!
JQuery版本
1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持*
JQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$(“#i1”).html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。 相当于： document.getElementById(“i1”).innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象
拿上面那个例子举例，jQuery对象和DOM对象的使用：
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
Example DOM和JQuery对象的转换
# 打开浏览器访问这个html的console
document.getElementById('i1')
<div id=•"i1">•123•</div>•
$('#i1')
jQuery.fn.init [div#i1, context: document, selector: "#i1"]
$('#i1')[0]
<div id=•"i1">•123•</div>•
# JQuery对象[0] => DOM对象
# Dom对象 => $(Dom对象)
JQuery安装
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：
从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
HTML标签引用JQuery
有两个版本的 jQuery 可供下载：
* Production version - 用于实际的网站中，已被精简和压缩。
* Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 [jquery.com](http://jquery.com/download/) 中下载。
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
CDN引用JQuery
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。 如需从Staticfile CDN、又拍云、新浪、谷歌或微软引用 jQuery，请使用以下代码之一：
Staticfile CDN:
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
</head>
百度CDN
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
新浪CDN
<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script>
</head>
Google CDN
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
</head>
# Google产品在中国很不稳定
Microsoft CDN
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>
# 使用CDN的JQuery，有一个很大的优势:
# 许多用户访问其他站点时，已经从上面各种CDN加载过JQuery，所以结果是，他们访问你站点时，
# 会从缓存中加载JQuery，这样可以减少加载时间，同时，大多数CDN都可以确保当用户向其请求文件时，
# 会从离最近的服务器上返回响应，这样也可以提高加载速度.
# 在浏览器Console输入 $.fn.jquery可以查看使用的什么版本.
JQuery基础语法
# 通过JQuery，可以选取(查询,query)HTML元素，并对他们执行"操作"(actions).
Example
查找标签
1. 基本选择器 id选择器：
$("#id")
标签选择器
$("tagName")
Class选择器
$(".className")
配合使用
$("div.c1")
// 找到c1 class类的div标签
所有元素选择器
$("*")
组合选择器
$("#id,.className,tagName")
层级选择器 x和y可以为任何选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
Example1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p class="pclass">p1</p>
<p id="pid">p2</p>
<button>
click
</button>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").text("p元素被修改了");
$(".pclass").text("p元素通过class被修改了");
$("#pid").text("p元素通过pid被修改了");
});
});
</script>
</body>
</html>
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button>Click</button>
<script>
$(document).ready(function () {
// $("button").click(function () {
// $(this).hide();
// 单击事件
// });
// $("button").dblclick(function () {
// $(this).hide();
// 双击事件
// });
$("button").mouseenter(function () {
$(this).hide();
// 当鼠标放到按钮上触发此事件，
// mouseleave是鼠标移开按钮触发的事件
});
})
</script>
</body>
</html>
事件之绑定，解除绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button id="clickBind">ClickBind</button>
<script>
$(document).ready(function () {
// $("#clickBind").click(function () {
// alert("hello")
// 当我们的事件很多时，这样写非常消耗内存
// });
$("#clickBind").bind("click",clickHandler1);
$("#clickBind").bind("click",clickHandler2);
// $("#clickBind").unbind("click"); //这种解除绑定会解除所有
$("#clickBind").unbind("click",clickHandler1()); //解除单一绑定
$("#clickBind").on("click",clickHandler1); // bind底层都是使用on,off实现
$("#clickBind").off("click",clickHandler2);
});
function clickHandler1(e) {
console.log("clickHandler1")
}
function clickHandler2(e) {
console.log("clickHandler2")
}
</script>
</body>
</html>
自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button id="ClickMeBtn">Click</button>
<script>
var ClickMeBtn
$(document).ready(function () {
ClickMeBtn = $("#ClickMeBtn");
ClickMeBtn.click(function () {
var e = jQuery.Event("MyEvent");
ClickMeBtn.trigger(e);
});
ClickMeBtn.bind("MyEvent",function(event) {
console.log(event);
})
})
</script>
</body>
</html>
Example2
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
Example3 多选，全选，反选