JQuery
jQuery是由几个外国哥们封装的js代码库（就是对js原生代码进行了方法封装），目的是为了简化原生代码的繁琐操作，口号是：write less do more。
特点：开源、插件极多、主要简化的是js原生的DOM操作还有ajax请求
目前版本：1x、2x、3x版本，各个版本没有较大区别，唯一比较重大的改变就是从2x版本开始，jQuery不再兼容IE低版本。
1.在 head标签中 或者 body标签后 引入jQuery.js
2.jQuery声明了一个全局对象：jQuery，通过它来调用jQuery封装的操作方法
1、选择器（DOM获取操作）
jQuery提供的获取元素方法，需要选择器字符串作为参数，获取文档中所有符合选择器要求的DOM
jQuery支持所有CSS选择器
jQuery还添加了一些CSS不支持的选择器
语法：返回符合选择器要求的元素集合，该集合由jQuery进行封装，可以调用jQuery提供的操作方法。
foreach() 只能循环 对象和数组
1. :eq(n) 选择器: 获得索引n的元素（最外层符合）
console.log($('li:eq(2)'));
2. :lt(n) 选择器: 获得索引小于n的元素
console.log($('li:lt(2)'));
3. :gt(n) 选择器: 获得索引大于n的元素
console.log($('li:gt(2)'));
4. :odd 选择器: 获得索引为奇数的元素
console.log($('li:odd'));
5. :even 选择器: 获得索引为偶数的元素
console.log($('li:even'));
6. :empty 选择器: 获得内容为空（不包含文本和子元素）的元素
console.log($('li:empty'));
方法：
1. eq(n): 获得索引为n的元素
console.log($('li').eq(3));
console.log($('li:eq(3)'));
2. get(n): 获取索引为n的原生DOM
console.log($('li').get(3));
2.原生DOM 与 jQueryDOM 相互转化
注意：
1. 原生方法获得到的是原生DOM或DOM集合，可以调用或访问原生的方法和属性
2. jQuery方法获得到一定是jQuery包装后的元素集合，只能调用或访问jQuery的方法或属性
$('li').eq(2).style.color = "red";
$('li').get(2).style.color = "red";
//jQueryDOM 转 原生DOM：通过 get()方法 进行转化
var jqDOM = $('li').eq(3);
console.log(jqDOM);
var oriDOM = jqDOM.get(0);
console.log(oriDOM);
//原生DOM 转 jQueryDOM：通过 $()方法 进行转化
var oriDOM = document.querySelector('li');
console.log(oriDOM);
var jqDOM = $(oriDOM);
console.log(jqDOM);
3.DOM操作（ 增删改查）
//增
//创建DOM: $(tagString)
var $h = $('<h1 class="title"> jQuery 创建DOM </h1>');
console.log($h);
//添加
(1) A.append(B)， 将B追加到A的末尾， 方法返回A自身
$('body').append($h);
(2) B.appendTo(A)， 将B追加到A的末尾， 方法返回B自身
$h.appendTo($('body'));
console.log($h.appendTo('body'));
(3) A.prepend(B)， 将B添加到A的首位
(4) B.prependTo(A)， 将B添加到A的首位
(5) A.after(B)， 在A的后面插入B， 返回A
console.log($('li:eq(2)').after($('<li>6</li>')));
(6) A.before(B)， 在A的前面插入B， 返回A
console.log($('li:eq(3)').before($('<li>7</li>')));
//删除
(1) A.remove()， 将A从它的父元素中删除， 返回A
console.log($('li:eq(2)').remove());
(2) A.empty()， 将A的内容置空， 返回A
$('ul').empty().append($('<li>10</li>').css('color', 'red'));
console.log($('ul').empty());
//修改
A.replaceAll(B)， 用A替换B， B必须是文档中已经存在的元素， 返回A
console.log($('<li>10</li>').replaceAll($('li:eq(2)')));
//克隆
A.clone()， 克隆A， 只有深克隆， 连同A的内容一并克隆。
$('ul').clone().appendTo('body');
//查询（ 获取元素， 根据关系获取元素）
//父关系
(1) A.parent()： 获得A的父元素
$('li:eq(2)').parent().css('background-color', 'red');
(2) A.parents()
(3) A.parentsUntil()
//子关系：
A.children()： 获得A的子元素集合， 可以填写选择器字符串为参数， 会自动获取符合选择器要求的子元素。
console.log($('div').children('span'));
//兄弟关系：
A.next()： 获得A的下一个兄弟元素
console.log($('li:eq(2)').next());
A.nextAll()： 获得A后面所有的兄弟元素
console.log($('li:eq(2)').nextAll());
A.nextUntil()
A.prev()： 获得A的上一个兄弟元素
console.log($('li:eq(2)').prev());
A.prevAll()： 获得A前面所有的兄弟元素
console.log($('li:eq(2)').prevAll());
A.prevUntil()
A.siblings()： 获得A所有的兄弟元素
console.log($('li:eq(2)').siblings());
4.DOM属性的操作
1. A.attr()：读写A的属性值，setAttribute() 和 getAttribute() 的封装
参数：
（1）string类型，表示属性名
（2）无类型要求，表示属性值
当一个参数时是读取，两个参数时是设置，当第二个参数值为null时是删除
// 设置属性
$('div').attr('id','box');
// 读取属性
console.log($('div').attr('id')); // 'box'
// 删除
$('div').attr('id',null);
console.log($('div').attr('id')); // undefined
// 类名的操作
A.addClass()： 为A添加类名
$('div').get(0).className += " A";
$('div').addClass('A');
A.removeClass()： 删除类名
$('div').removeClass('box');
A.toggleClass()： 切换类名，如果类名已经存在就删除，不存在就添加
$('div').toggleClass('box');
// 内容或文本设置
text() / html(): 对应了原生的 innerText 和 innerHTML
如果方法无参数，那就是读取值；如果方法有参数，那就是设置值
// 读取
console.log($('.btn').eq(5).html());
// 设置
$('.btn:eq(5)').html('AD');
$('.btn:eq(5)').get(0).innerHTML = "SS";
表单元素的value
val(): 对应了原生的 value
// 如果方法无参数，那就是读取值；如果方法有参数，那就是设置值
// 读取
console.log($('input').val());
// 设置
$('input').val('QWER');
5. DOM 大小及位置
（1). jQuery读取DOM宽高
1. width() / height()
// 读取，只会读取盒模型 内容 宽度
console.log($('.A').width());
// 设置，设置盒模型内容宽度（纯数字或带单位的字符串都可以）
$('.A').width(200);
2. innerWidth() / innerHeight()
// 读取，只会读取盒模型 内容+内边距 宽度
console.log($('.A').innerWidth());
// 设置，如果存在内边距，设置的值会保留内边距，自动修改内容宽度
$('.A').innerWidth(200);
3. outerWidth() / outerHeight()
// 读取，读取完整盒模型宽度 内容+内边距+边框
console.log($('.A').outerWidth());
// 设置，保留原有的内边距和边框值，剩余部分自动分配给内容宽度
$('.A').outerWidth(200);
(2).读取位置
1. offset()返回一个位置对象，left属性和top属性表示位置
// 不管元素是否存在定位父级，读取的始终都是元素边缘到视窗边缘的距离
console.log($('.B').offset().left);
2. position()返回一个位置对象，left和top属性表示位置
// 如果元素存在定位父级，读取的是元素边缘到定位父级边缘的距离，如果不存在定位父级，读取的是元素边缘到视窗边缘的距离
console.log($('.B').position());
3.滚动偏移
scrollTop() / scrollLeft()
// 当无参数时读取滚动偏移，当有参数时设置滚动偏移（number）
$('.A')[0].onscroll = function(){
// 读取滚动偏移
console.log(this.scrollTop);
console.log($(this).scrollTop());
}
6.事件
1.点击事件
$('.box').click(function(){
$('.box').css('background','green')
})
$('.box').on('click'，function(){
$('.box').css('background','green');
})
2.移出事件
$('.box').off('click');
