一.JQuery库中的'$()'是什么？
$()函数是JQuery()函数的别称。$()函数用于将任何对象包裹成
JQuery对象，接着你就被允许调离定义在JQuery对象上的多个
不同方法。你可以将一个选择器字符串传入$()函数，它会返回
一个包含所有匹配的DOM元素数组的JQuery对象
二.$(this) 和 this 关键字在 jQuery 中有何不同？
$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方
法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当
前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前
DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。
三.jquery操作
1.jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 获取 <p> 元素。
$(".p")获取class名为p的元素
$("#p")获取id名为p的元素
2.jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");
3.jQuery获得内容/设置内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
4.设置属性 - attr():
一般用于设置自定义属性
$("#test").attr("test","aaa") // 设置
参数一:参数名称
参数二:参数内容
//添加自定义属性(增，改)
// $('.box').attr('index', 1);
//删除自定义属性(删)
// $('.box').attr('index', null);
//查找属性(查)
// console.log($('.box').attr('index'))
// console.log($('.box'));
5.删除属性 - removeAttr()
$("#test").removeAttr("test") // 删除
6.添加新的 HTML 内容
1.append() 方法在被选元素的结尾插入内容。
var $h = $('<div class="box2"></div>')
在body的后面加入$h
$('body').append($h)
将$h添加到body的最后面
$h.appendTo($('body'));
2.prepend() 方法在被选元素的开头插入内容。
将$h添加到body的首位
var $h = $('<div class="box2"></div>')
$h.prependTo($('body'))
3.after() 和 before() 方法
after() 方法在被选元素之后插入内容。
before() 方法在被选元素之前插入内容。
在元素的最后添加一个元素
$('.box').after($('<div class="box3"></div>'))
在元素的首位添加一个元素
$('.box').before($('<div class="box2"></div>'))
7.删除remove()
remove() 方法删除被选元素及其子元素。
$('.box2').remove();
empty() 方法删除被选元素的子元素。
$("#div1").empty();
8.替换元素replaceAll()
//用A替换B 返回A
$('<div class="box1"></div>').replaceAll($('.box3'));
9.clone() 克隆
A.clone(); 克隆 深克隆 克隆A
$('.box1').clone().appendTo($('.box'));
10.获取父元素parent()
A.parent();找A的父元素
console.log($('.box').parent())
11.查找子元素children()
//查找A的子元素 返回一个集合
console.log($('.ul').children())
12.获取兄弟元素 next() prev()
//A.next(): 查找A的下一个兄弟元素
//A.prev(): 查找A的上一个兄弟元素
//A.siblings():获取所有兄弟元素
console.log($('.box').prev)
13.对类名的操作
//添加类名
$('.box').addClass('box5');
//删除类名
$('.box').removeClass('box5');
//切换类名
$('div').toggleClass('box6');
//设置内容，也可以添加元素
$('.box').html($('<div class="p"></div>'))
14.jQuery 尺寸 方法
1.width() height()
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
//读写 当没有参数的时候 是读取宽高 当有参数的时候 设置宽高
$('.box').css('width','800px')
.css('height','800px')
console.log($('.box').width())//800
console.log($('.box').height())//800
2.innerWidth() 和 innerHeight()
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
3.outerWidth() 和 outerHeight()
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
2.读取元素的偏移量 top/left
console.log($('.box').offset().left)
console.log($('.box').offset().top)
3.position 读取元素的定位值
console.log($('.box').position())
4.滚动偏移
scrollTop() / scrollLeft();
console.log($('.box').scrollTop())
15.事件绑定
1.点击事件
// $('.box').click(function(){
// $('.box').css('background','green')
// })
2.移出事件
$('.box').off('click');
JQuery中addClass,removeClass,toggleClass的使用。
$(selector).addClass(class)：为每个匹配的元素添加指定的类名
$(selector).removeClass(class)：从所有匹配的元素中删除全部或者指定的类，删除class中某个值；
$(selector).toggleClass(class)：如果存在（不存在）就删除（添加）一个类
$(selector).removeAttr(class);删除class这个属性；
