## JQ初识
```python
jQuery是对js进行的二次封装的工具包
二次封装：比js使用起来便捷了，操作比就是综合了(写一句jq可以实现多句js逻辑)，底层就是原生js
工具包：jq就是一堆函数的集合体，通过jq对象来调用(jQuery)
1.官网下载：https://jquery.com/download/
jquery-3.4.1.js | jquery-3.4.1.min.js
2.在 需要jq环境的页面中 使用jq
<script src="js/jquery-3.4.1.js"></script>
<script>
$ 就是jQuery对象，可以使用jQuery的所有功能
</script>
3.根据API学习jq：http://jquery.cuishifeng.cn/
```
## JQ的常用操作
```python
1.jq选择器 - 得到的是jq对象 - jq对象可以调用jq库的所有功能
$('css语法选择器')
想通过js对象获取第2个p的文本内容
let ps = $('p');
console.log(ps);
let _p2 = ps[1]; # jq对象可以理解为存放了js对象的数组
console.log(_p2.innerText);
想通过jq对象获取第2个p的文本内容
p2 = $(_p2);
console.log(p2.text());
总结：
1. $('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组 （存放了几个js对象不需要关心）
2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法
3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法
```
## JQ操作页面的步骤
```python
1.获取标签
2.绑定事件
3.操作标签
$('h1').click(function (ev) {
jq的事件对象，但对js事件对象做了完全兼容
#ev是浏览器返回的页面各个事件！！！
console.log(ev);
console.log(ev.clientX);
console.log(ev.clientY);
})
$('h1').on('click', function (ev) {
console.log(ev);
})
$('p').click(function () {
// 在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象
console.log($(this));
console.log($(this).text());
});
文本
$('div').text() 文本内容
$('div').html() 标签内容
$('.inp').val() 表单内容
需求1：点击h1获取 自身文本内容、div的标签内容、input的表单内容
$('h1').click(function () {
console.log($(this).text());
console.log($('div').html());
console.log($('input').val());
})
```
## JQ的样式操作
```python
样式操作
获取样式: $(div).css('css中的样式属性名')
设置样式:$div.css('css中的样式属性名', '属性值'); // 单一设置
$('div').css({
'属性1': '值1',
...
'属性n': '值n',
});
$('div').css('属性', function (index, oldValue) {
console.log(oldValue);
// $(this) 可以拿到调用者对象
return 返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系);
})
```
JQ对标签类名、属性的操作
```python
增加类名：$('div').addClass('类名')
删除类名：$('div').removeClass('类名')
切换类名：$('div').toggleClass('类名')
#通过类名的添加、删除，设置样式、隐藏等对页面的反馈
$('.btn1').click(function () {
$('.box').addClass('red');
$('.box').removeClass('yellow');
$('.box').removeClass('blue');
// $('.box').toggleClass('red'); // 无red类添加，反之去除
});
$('.btn2').click(function () {
let $box = $('.box');
$box[0].className = 'box';
$box.addClass('yellow');
});
$('.btn3').click(function () {
$('.box').addClass('blue');
});
四、属性
获取属性值：$('div').attr('属性名')
设置属性值：$('div').attr('属性名', '属性值或函数')
删除属性值：$('div').attr('属性名', '')
// https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg
$('h1').click(function () {
let h1_id = $(this).attr('id');
console.log(h1_id);
$('img').attr('src', function () {
return 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg'
});
$(this).attr('id', '');
})
```
## JQ其它 的操作文档的方法：
```python
一、快速定位到某一个jq对象
1）在jq集合中快速拿到某一个jq对象: jq对象.eq(index)
$('.d:eq(1)') == $('.d').eq(1)#JQ对象数组
$('.d').eq(1).click(function () {
alert(123)
})
2）在jq集合中都具有系统事件，在事件中如何区别每一个jq对象
$(this) | 索引
$('.d').click(function () {
// 方法index()取出标签所在层级的索引，不是在jq对象数组中的索引
let index = $(this).index();
console.log(index)
});
二、通过自身快速定位到 "亲戚"
上兄弟(们) prev(All)
下兄弟(们) next(All)
兄弟们 siblings
孩子们 children
父亲(们) parent
let $d2 = $('.d2');
console.log($d2);
let next = $d2.next();
console.log(next);
let nexts = $d2.nextAll();
console.log(nexts);
let prev = $d2.prev();
console.log(prev);
let siblings = $d2.siblings();
console.log(siblings);
let children = $d2.children();
console.log(children);
let parent = $d2.parent();
console.log(parent);
三、动态生成html标签
let $table = $('<table></table>');#生成标签对象
$table.css({ #给标签添加样式
border: '1px'
});
$('body').append($table); // 加入到body最后
$('body').prepend($table); // 加入到body最后
$('p').before($table); // 加入到p之前
$('p').after($table); // 加入到p之后
需求：点击表格，在之后插入指定宽高的表格
$('p').click(function () {
let inps = $('input');
// 表
let table = $('<table border="1"></table>');
let row = inps.eq(1).val();
console.log(typeof(inps.eq(1).val()));
let col = inps.eq(2).val();
// 行
for (let i = 0; i < row; i++) {
let tr = $('<tr></tr>');
table.append(tr);
// 列
for (let j = 0; j < col; j++) {
let td = $('<td>' + inps.eq(0).val() + '</td>');
tr.append(td);
}
}
$(this).after(table);
})
```
JQ的链式操作：
```python
例：本质是每次操作返回的还是 对象本身，所以可以继续点方法
$('h1').css('color', 'orange').css('background', 'red').click(function () {
console.log(this)
}).text('修改标题');
```
