day-55前端
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() 获取表单内容
设置文本
$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('属性名', '')
案例：
$('h1').click(function () {
$('img').attr('src', function () {
return 'https://ss2.bai8c6.jpg'
});
jq的链式操作
$('h1').css('color', 'orange').css('background', 'red').click(function () {
console.log(this)
}).text();
$('h1').css('color', 'orange')加（）调用函数，返回的是自身（jq对象），就可以继续在后面点，
如果返回了内容，就不可以继续点了(比如.text（）)
jq操作文档
快速定位到某一个jq对象
1、如何在jq集合中快速拿到某一个jq对象（外部）:
jq对象.eq(从0开始的索引) / $('.d:eq(0)')
案例：
$('.d').eq(1).click(function () {
alert(123)
})
2、在jq集合中都具有相同事件，如何在事件中如何区别每一个jq对象（内部）
$(this) 或者 index
案例：
$('.d').click(function () {
let index = $(this).index(); /.index()是 标签所在层级的索引，不是在jq对象数组中的索引
$('.d').eq（index）
});
通过自身快速定位到 "亲戚"
上兄弟(们) prev(All)
下兄弟(们) next(All)
兄弟们 siblings
孩子们 children
父亲(们) parents
案例：
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);
动态生成页面结构
let $table = $('<table></table>');
$table.css({
border: '1px'
});
$('body').append($table); // 加入到body标签里面的最后
$('body').prepend($table); // 加入到body标签里面的最前
$('p').before($table); // 加入到p标签之前
$('p').after($table); // 加入到p标签之后
