jQuery
jQuery是对js进行的二次封装的工具包
jQuery和JavaScript的顶级都是Windows，也就是window.*/window.document.*,而Windows都可以省略
jQuery选择器
$('css3选择器语法') 就是jq选择器，获得的是jq对象， jq对象可以调用jq库的所有功能，
jq对象可以理解为存放了js对象的数组 （存放了几个js对象不需要关心）
jq对象转换为js对象 :
jq对象[js对象所在索引]
好处：
可以使用js的语法
js对象转换为jq对象 ：
$(js对象)
好处：
可以使用jq的语法
jQuery操作页面的三个步骤
获取标签、绑定事件、操作标签
1. $('h1').click(function (ev) {
console.log(ev);
console.log(ev.clientX);
console.log(ev.clientY);
})
这里的ev是 jq的事件对象，但对js事件做了完全兼容，也就是包含了js事件
2.$('h1').on('click', function (ev) {
console.log(ev);
})
兼容性更多
3.$('p').click(function () {
console.log(this); /这里的this获得的是js本身对象
console.log($(this).text());
});
给多个标签绑定相同事件，但在jq事件中的this获得的对象还是js对象，
如果想要使用jq功能，需要将this转换为jq对象 $(this)，也就是上文说的对象转换
文本的操作（获取文本）
$div.text() 文本内容
$div.html() 标签内容
$inp.val() 表单内容
样式的操作
获取样式
1.$div.css('css中的样式属性名');
2.$('h1').click(function () {
let $this = $(this);
let color = $this .css('color');
let fs = $this.css('font-size');
let ta = $this.css('text-align');
console.log(color, parseInt(fs), ta);
});
设置样式
$('h1').click(function () {
let $this = $(this);
let color = $this .css('color');
let fs = $this.css('font-size');
let ta = $this.css('text-align');
console.log(color, parseInt(fs), ta);
1. $this.css('background-color', 'orange');
2.$this.css({
'background-color': 'pink',
'border-radius': '10px',
'width': '200px',
});
3.$this.css('height', function (index, oldValue) { //function函数就是‘height’要设置的参数
console.log(oldValue);
let w = $(this).width(); // $(this) 可以拿到调用者对象
return w / 2; //返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系);
})
});
类名的操作
优点：
可以一次性获取提前设置好的一套样式
增加类名： $div.addClass('类名')
删除类名： $div.removeClass('类名')
切换类名（ 无类名添加，反之去除）：$div.toggleClass('类名')
属性的操作
获取属性值：$div.attr('属性名')
设置属性值：$div.attr('属性名', '属性值或函数') //像这种('属性名', '属性值')，后面的属性值都可以写成function函数
删除属性值：$div.attr('属性名', '')