一、jQuery
出发点：它可以用最少的代码(简化开发者使用JavaScript)，完成更多复杂而困难的功能。
特点：是一个JavaScript的封装库(轻量级的框架)，它通过封装原生的JavaScript函数得到一整套定义好的方法。jQuery已经
集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。
二、jQuery 的功能和优势
1、主要功能
1.像 CSS 那样访问和操作 DOM；2.修改 CSS 控制页面外观；
3.简化 JavaScript 代码操作；
4.事件处理更加容易；
5.各种动画效果使用方便；
6.让 Ajax 技术更加完美；
7.基于 jQuery 大量插件；
8.自行扩展功能插件；
2、主要优势
jQuery 最大的优势就是特别的方便。比如模仿 CSS获取 DOM，比原生的 JavaScript要方便太多。再比如在多个 CSS设置上的集中处理非常舒服，而最常用的 CSS功能又封装到单独的方法，感觉非常有心。最重要的是 jQuery的代码兼容性非常好。
3、缺点：只知其然，不知其所以然，只会用而不懂原理。
三、初涉jQuery
3.1 导入jQuery的方式
（1）在线导入
（2）下载后导入
详见：点击打开链接(下载地址)，点击打开链接(在线访问)，点击打开链接(英文文档)
3.2 概念上的理解
在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这么写：
$(function () {}); //执行一个匿名函数
$(‘#box’);//正在执行此ID选择器的元素
$(‘#box’).css(‘color’, ‘red’); //执行功能函数由于$本身就是jQuery对象的缩写形式，
上面的三段代码也可以写成如下形式：
jQuery(function () {});
jQuery(‘#box’);
jQuery(‘#box’).css(‘color’, ‘red’);
注意：执行了css()这个功能函数后，最终返回的还是jQuery对象。
说明：jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数
$('#box').css('color', 'red').css('font-size', '50px'); //连缀
补充：jQuery中代码注释同JavaScript雷同，有两种最常用的注释：单行使用“//...”，多行使用“/* ...*/”
3.3 加载模式
$(function () {
//代码
});
思考：代码为什么要被这样包裹？
原因：我们jQuery库文件是在body元素之前加载的，我们必须等待所有的DOM元素加载后，延迟支持DOM操作，否则就无法
获取到元素对象(获取null值)。
注：底层还是先获取标签，然后对标签对象进行封装成jquery对象，如果不先加载，就无法获取此元素的对象。
分析：JS原生的延迟加载onload与Jquery的延迟加载的异同点？
window.onload = function () {}; //JavaScript等待加载
$(document).ready(function() {}); //jQuery等待加载的繁写
共同点：都是监听DOM是否加载完全，加载完即执行相应事件。
差异性：执行时间、编写个数不同、简化写法
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后(DOM树+)才能执行。$(document).ready()是DOM结构(不包含图片等非文字媒体文件)绘制完毕后就执行，不必等到加载完毕
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 ( 后面的覆盖前面的)$(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法
window.onload没有简化写法$(document).ready(function(){})可以简写成$(function(){});
相关链接：点击打开链接
3.4 对象互换
前提回顾：jQuery 对象虽然是 jQuery 库独有的对象，但它也是通过 JavaScript 进行封装而来的。
判断是JS的对象还是 jQuery 库独有的对象？弹框看返回值类型
alert($('#box')); //包裹 ID 元素返回对象，还是jQuery对象[object Object]
alert(document.getElementById('box')); //[object HTMLDivElement]
说明：只要使用了$()包裹后，最终返回的还是 jQuery 对象(可以连缀处理的原因)
需求1：但有时我们也需要返回原生的 DOM 对象
alert($('#box').get(0)); //[object HTMLDivElement]--这里的索引看出，jQuery 是可以进行批量处理 DOM 的.
注意： jQuery 对象的get(索引)方法返回的是原生对象；$('#box')返回的是数组形式的jQuery 对象(至少一个)
需求2：有时候需要将DOM对象转换成Jquery对象，使用其封装的方法
alert($(document.getElementById('box')));[object Object]
说明：给其包上$符号即可。
四、进入正题
4.1 选择器
（1）基础选择器(标签、ID、类)
$('div').css('color', 'red'); //元素选择器，返回多个元素
$('#box').css('color', 'red'); //ID 选择器，返回单个元素
$('.box').css('color', 'red'); //类(class)选择器，返回多个元素
补充：用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数，可以证明 ID 返回的是单个元素，而元素标
签名和类(class)返回的是多个。
（2）组合选择器(进阶)
$('span, em, .box').css('color', 'red'); //分组(并列)选择器(获取多个选择器的 DOM 对象)
$('ul li a').css('color', 'red'); //后代选择器(最终起作用的是最后一个)
$('*').css('color', 'red'); //通配选择器(获取所有元素标签的 DOM 对象)
（3）高级选择器(子类选择器、相邻选择器(下)、兄弟选择器)
$(‘#box p’).css(‘color’, ‘red’); //等价于 $('#box').find('p').css('color', 'red'); --追溯到最里层的元素
$(‘#box > p’).css(‘color’, ‘red’); //等价于 $(‘#box’).children(‘p’).css(‘color’, ‘red’);--只获取"子类节点"的多个DOM 对象
$(‘#box+p’).css(‘color’, ‘red’); //等价于 $('#box').next('p').css('color', 'red'); --只获取某节点后一个"同级"DOM对象
$(‘#box ~ p’).css(‘color’, ‘red’); //等价于 $('#box').nextAll('p').css('color', 'red'); --获取某节点后面"所有同级"DOM对象
注意：分隔符的语义(“，”，空格，>，+，~)
（4）与(3)相对应的Jquery特有的选择器
a：选定同级元素的上一个(prev) 或上面所有元素(prevAll)
$('#box').prev('p').css('color', 'red'); //同级上一个元素--box(父)中与p(子)同级的上一个(子)元素
$('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素
b：nextUntil()和prevUnitl()方法是选定同级的下面或上面的所有节点，一旦遇到指定的元素就停止选定
$('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定，遇到则停止
$('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定，遇到则停止
c： siblings()方法正好集成了 prevAll()和 nextAll()两个功能的效果，对上下相邻的所有元素进行选定
$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定(不包含自身)
//等价形式
$('#box').prevAll('p').css('color', 'red'); //同级上所有元素选定
$('#box').nextAll('p').css('color', 'red'); //同级下所有元素
（5）属性选择器(了解)
说明：[ ]作为语法的标识符，可以通过(^、$、|、*、~)等运算符定义不同形式的属性选择器。
（6）过滤选择器(Jquery特有的)
$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素(索引从0开始)，负数从后开始
$('li').first().css('background', '#ccc'); //元素 li 的第一个元素
$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
说明：相当于从jQuery对象数组中选择对应的标签对象(Jquery对象)
4.2 基础 DOM 和 CSS 操作
（1）对元素内容的获取和修改(常用的)
说明：注意有参与无参的形式。
在练习中出现的问题：控制台无显示结果。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"> console.log(1); </script> </head> <body> </body> </html>
解决思路：在引入jquery的script不再写入内容，另外再写一个script;
错误2：把text()方法写成test()，浪费时间
script中的内容 var a=$('#box').html();
alert(a);
$('div').html('<em>www.li.cc</em>');
$('div').text('<em>www.li.cc</em>');
alert(typeof a +a);
说明：
html(无参)--对应js中的innerHTML---如果有多个标签，只获取第一个标签中的内容(子标签等也作为字符串)
text(无参) --对应js中的innerText-----如果有多个标签，获取所有标签的文本内容(子标签等自动过滤，不作为字符串被获取到)
html('<em>www.li.cc</em>')-------如果有多个标签，首先擦除所有标签中的内容，然后给所有的标签设置此内容(标签转义)
text('<em>www.li.cc</em>')-------如果有多个标签，首先擦除所有标签中的内容，然后给所有的标签设置此内容(标签不转义)
html设置内容：浏览器在获取到html和text设置的内容时会自动调用html的解析器对文件进行相应的处理。
补充1：vale的操作略，如果想设置多个选项的选定状态，比如下拉列表、单选框、复选框、等等可以通过数组传递操作。
$("input").val(["check1","check2", "radio1" ]); //value
补充2：想追加而不是覆盖----简写---text($('div').text()+"ffffcccc");
（2）元素属性操作
主要：获取属性的属性值、设置属性的属性值，并且可以删除掉属性
删除：removerAttr(属性名称)---根据属性名称移除全部的此属性(前提是没有过滤)
练习：
$('div').attr('title'); //获取属性的属性值
$('div').attr('title', '我是域名'); //设置属性及属性值
$('div').attr('title', function () {
//通过匿名函数返回属性值return '我是域名';
});
$('div').attr('title', function (index, value) {
//可以接受两个参数return value + (index+1) + '，我是域名';
});
注意1：attr()方法里的 function() {}，可以不传参数(会给所有的标签都设置class属性(有class属性的话则覆盖))。可以只传一个
参数 index，表示当前元素的索引(从0开始--说明是循环)。也可以传递两个参数 index、value，第二个参数表示原本属性值。
function函数：必须返回一个值，作为此属性的属性值。
补充：我们也可以使用 attr()来创建id属性(导致页面结构的混乱)，当然也可以创建class属性(后面有一个语义更好的方法来代替)
JSON形式设置多个属性值：原理把键作为属性，值作为属性值，使用：把json对象添加到attr()中即可。
var json = {
'id': 'div1',
'class': 'c'
};
$('div').attr(json);
思考：如何只想对某个某个标签设置样式，过滤选择器--first()
（3）元素样式操作(jQuery 使用CSS 样式的操作的频率高)
内容：直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。
常见的操作样式的方法
明确：带参和不带参的情况
var box = $('div').css(['color', 'height', 'width']); //得到多个CSS 样式的JSON数组对象
for (var i in box) {
//逐个遍历出来alert(i + ':' + box[i]);//JSON的for in遍历形式
}
jQuery 提供了一个遍历工具专门来处理这种对象数组$.each()方法，这个方法可以轻松的遍历对象数组。使用$.each()可以遍历原生的 JavaScript 对象数组(数组里面是原生的JS对象)
var arr = $('hr').nextAll('p');
arr.each(function(i, obj) {
参数1: i 是元素的索引
参数2: obj 是当前的原生DOM对象
if (i == 6) {
$(obj).css('color', 'red');
}
});
jQuery对象的数组使用each()的方法
$('div').each(function (index, element) {
//index 为索引，element 为元素 DOM
alert(index + ':' + elments);};
注意1：如果想设置某个元素的 CSS 样式的值(if判断)，那么这个值需要计算我们可以传递一个匿名函数。
练习：结合事件来实现 CSS 类的样式切换功能(回头补充)
补充1：toggleClass()方法的第二个参数可以传入一个布尔值， true 表示执行切换到 class 类， false表示执行回默认 class 类(默认的是空的class)，运用这个特性，我们可以设置切换的频率。
补充2：默认的 CSS 类切换只能是无样式和指定样式之间的切换，如果想实现样式1和样式2之间的切换还必须自己写一些逻辑，后续补充。
$('div').click(function() {
$(this).toggleClass('red size'); //一开始切换到样式 2
if ($(this).hasClass('red')) {
//判断样式 2 存在后
$(this).removeClass('blue'); //删除样式 1
} else {
$(this).toggleClass('blue'); //添加样式 1，这里也可以 addClass
}
});
注意：带有Class的都是针对带有此class属性的标签而言的。
（4）节点的操作
DOM 中有一个非常重要的功能，就是节点模型，也就是 DOM 中的“M” 。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。
1、创建节点
需求：为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，在插入之前首先要创建节点。
Jquery中特有的方法：
内部插入节点
var box = $('<div id="box">节点</div>'); //创建一个节点
说明1：content可以直接以标签的形式插入，浏览器会解析，例如：$('div').append('<strong>节点</strong>')
说明2：节点创建以后，主要是节点的插入位置的问题。
外部插入节点的方法(Jquery特有的)