jQuery字面含义为"js query"（js 查询器），用来快速查询页面元素。它是基于原生js封装的一个功能操作库，类似之前我们自定义的Validate正则操作对象、事件兼容处理对象evntUtils、Ajax操作等。
jQuery秉持"write less,do more"（写的少 做的多）的开发原则，它的主要优势体现在以下几个方面：
1、语法简练、语义易懂、学习快速、文档丰富。
2、小巧灵活，页面引入后直接使用，真正小而美的轻量级工具。
3、支持 CSS1~CSS3 定义的属性和选择器，实现高效的DOM查询。
4、丰富的内置插件，对常用的效果进行封装 且能将脚本行为与HTML完全分离，便于维护。
5、跨浏览器兼容性好，它支持的浏览器包括 IE 6.0+、FF1.5+、Safari 2.0+和 Opera 9.0+。
jQuery环境搭建
1、引入jQuery文件
可以去jQuery官网或开源项目托管平台github去下载较新版本的jQuery，一般主版本在2.0以上即可。
下载的版本分为.min的压缩版和不带.min的未压缩版，未压缩版本可以格式化源码 便于查看。
一般在开发中使用未压缩的 方便调试，上线后使用压缩本减少文件加载的时间。
2、开始jQuery代码
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
alert("hello jquery");
})
</script>// 引入jquery后，可以使用内部的全局核心函数$
// $在jquery中 是全局函数 也用来获取元素
// ready方法是绑定ready事件，其实是对DOMContentLoaded以及onload事件的封装，确保DOM树已经生成，可以无碍的查询节点，在源码中搜索：jQuery.ready.promise
// 这句话 相当于原生js中 所有的代码 要放在：document.addEventListener('DOMContentLoaded', fn)
也可以在页面中 直接使用$(function() { })来开始jQuery代码，将它视为ready事件的==方法糖==，最终还是调用ready事件：
<script>
$(function () {
alert("hello jquery")
})
</script>相当于：
function $(arg) {
if (arg instanceof Function) $(document).ready(arg);
}$方法与本地冲突
jQuery使用IIFE（匿名函数）来创建命名空间 并在全局创建变量$和jQuery来引用核心的功能函数。
当jQuery被引入页面后，如果此时页面已有标识符$的定义，那么就极有可能会覆盖jQuery的引用变量，此时需要解决$冲突的问题。
这时候可以考虑使用另一个不太常用的名字jQuery，或者干脆重新创建一个引用变量。
jQuery提供的外部接口方法noConflict()用来返回新的核心函数：
console.log(jQuery(document)); // jQuery和$互为别名
var $j = jQuery.noConflict();
console.log($j(document));使用选择器
jQ选取页面元素（节点）的方式 称为"选择器"；jquery借鉴了css选择器的理念，使用css选择器来获取元素，并且在此基础上做了一些优化和扩展：
* // 1、支持基本选择器：类、id、元素
* // 2、支持层次选择器：后代、子元素、相邻兄弟、并列
* // 3、优化和扩展了过滤选择器：
* $('ul li:first') -> ul li:first-child
* $('ul li:last') -> ul li:last-child
* $('ul li:eq(1)') -> ul li:nth-child(2)
使用jQuery选择器查询返回是==伪数组形式的dom集合(包括id)==，而非原生的dom集合。
$dom也存储了编号的dom元素并写入length。除此以外，还包括其他如selector,context等自定义的属性。
层次选择器
$("div span") 后代选择器，选择div的后代span
$("div > span") 子元素选择器，选择作为div子节点的span
$("div + div") 相邻兄弟选择器，选择div的相邻兄弟div
$("p , span") 并列选择器，选择p和span元素
过滤选择器
使用"："从选择器集合中过滤出所需的节点，它在c3子元素选择基础上简化了操作并稍有扩展。
:first $("ul li:first") 选中ul中第一个li :first-child
:last $("ul li:last") 选中ul中最后一个li :last-child
:eq $("ul li:eq(1)") 定位ul中第二个li :nth-child(n)
:empty $("ul li:empty") 找出内容为空的li :empty
:even $("ul li:even") 定位下标为偶数的li
:odd $("ul li:odd") 定位下标是奇数的li
:not $("ul li:not('.no')") 过滤出类名不为no的li
:contains $("ul li:contains('txt')") 过滤出内容中包含txt的li
属性选择器
1、[name] 查询元素中含有name属性的所有节点
2、[name=value] 查询name属性等于value值的所有节点
3、[name^=value] 所有name属性值以value开头的节点
4、[name$=value] 所有name属性值以value结尾的节点
5、[name*=value] 所有name属性包含value值的节点
$dom和原生dom互换
jQuery选择器返回的是经过封装后的$dom对象，不能使用原生DOM的方法去操作；
同样的原生DOM也不能访问$dom的属性和方法。这样很多时候 我们就需要互相转化这二者以适应不同的开发环境。
① 使用[]或者get()方法，将$dom转化成原生dom
② 使用$()方法，将原生dom封装成$dom
console.log($input);
// 可以通过编号 取得某个具体的dom元素 - 原生dom
console.log($input[0].value); // 小白
console.log($input.get(0).value); // 小白
// 还有些时候 需要将原生dom转化成$dom
const input = document.querySelector('input');
// 使用$直接封装 就变成jquery dom了
console.log($(input));
console.log($(input).val()); // 小白链式选择器
$dom为一个集合形式的对象，如果要取得其中的某个或者某些节点 除了使用下标以外 还可以通过方法快速查找。
重要的是，这些方法所返回的依然是一个经过封装的$dom。如此一来 方法之间可以连续调用 即实现"链式访问"。
$("ul li").first() 获取li列表中的第一个
$("ul li").last() 获取li列表中的最后一个
$("ul li").eq(1) 定位li列表中的第二个
$("ul li").not($("#first")) 获取li列表种非ID名不为first的元素
$("div").contents(); 获取div的所有子节点 相当于div.childNodes
$("div").children(); 获取div的所有子元素 相当于 div.children
$("ul li").siblings()： 找$dom的所有兄弟元素 只要是平行关系就是兄弟
$("ul li").next()： 找$dom的下一个兄弟，相当于dom.nextSibling
$("ul li").nextAll()： 找$dom的接下来所有兄弟节点
$("div").find("span"); 查找div后代中的所有span
$("ul").find("li").first() 查找ul的后代li的第一个
链式操作
jQuery中除了支持DOM本身的链式访问外，==对于很多常见操作也返回当前DOM，前提是该方法没有明确的返回值要求==。
这就意味着当前动作执行完毕后 还可以接连执行其他步骤，这也是jQuery在设计时的原始初衷。
你会发现形如下面的代码片段在jQuery中可以无碍的访问：
$dom.addClass().removeClass().hide().show().mouseover().mouseout().css();究其原因就是因为每个方法在操作执行完毕后 都返回了当前的$dom 通过方法体内的=="return this"==
如果在链接过程中要返回到上级或者其他位置的DOM，则可以借助以下几个方法：
1、end() 表示返回上一步的DOM
2、add("选择器") 表示在当前DOM上再加上指定的DOM
3、addBack() 表示返回当前DOM + 上一步骤DOM
$("#divFather").show().find("a").addClass("now").end().addClass("highLight");