［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery的优势
一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用
什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html()
$("#test").html()
意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action()
参考：http://jquery.cuishifeng.cn/
寻找元素(选择器和筛选器)
选择器
基本选择器
// 所有元素
$("*")
// 根据ID查找
$("#id")
// 根据class名查找
$(".class")
// 根据标签名查找
$("element")
// 组合选择器
$(".class,p,div")
层级选择器
// 后代选择器
$(".outer div")
// 子代选择器
$(".outer>div")
// 毗邻选择器
$(".outer+div")
// 兄弟选择器(后面的兄弟标签)
$(".outer~div")
基本筛选器
// 第一个
$("li:first")
// 索引为2的
$("li:eq(2)")
// 索引值为偶数的
$("li:even")
// 索引值为奇数的
$("li:odd")
// 索引值大于1的
$("li:gt(1)")
// 索引值小于1的
$("li:lt(1)")
// 去除所有与给定选择器匹配的元素,id不为d1的li标签
$("li:not(#d1)")
// 匹配含有选择器所匹配的元素的元素
:has(元素名)
注意：
这里的has和not不是简单的 有和 没有的意思，它俩没啥关系（不是一组）
:not和:has通常用.not()和.has()代替。
$("div:has(.c1)")等价于$("div .c1")并不等价于$("div.c1")
自定义模态框示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
.cover{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.3);
z-index: 999;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-top: -150px;
margin-left: -200px;
background-color: white;
z-index: 1000;
}
.hide{
display: none;
}
</style>
</head>
<body>
<input type="button" >
<div class="cover hide"></div>
<div class="modal hide"></div>
<script src="../jquery-3.2.1.min.js"></script>
<script>
var btnEle = document.getElementById("btn");
btnEle.onclick=function () {
// $(".cover").removeClass("hide");
// $(".modal").removeClass("hide");
$(".cover,.modal").removeClass("hide");
}
</script>
</body>
</html>
属性选择器：
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
例子：
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单常用筛选：
:text :password :file :radio :checkbox :submit :reset :button
例子：
$(":checkbox") // 找到所有的checkbox
表单对象属性:
:enabled :disabled :checked :selected
例子：
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
<body>
<form>
<input type="checkbox" value="123" checked>
<input type="checkbox" value="456" checked>
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3" selected="selected">Trees</option>
<option value="3" selected="selected">Trees</option>
</select>
</form>
<script src="jquery.min.js"></script>
<script>
// console.log($("input:checked").length); // 2
// console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1
$("input:checked").each(function(){
console.log($(this).val())
})
</script>
</body>