元素操作
1. 创建标签元素 $('写你的标签')
let p = $('<p>我是p标签</p>');
console.log(p);
2. 元素内添加插入元素（父子关系）
语法1： 元素A.append(元素B) 将元素B插入到元素A内部的最后
$('#d1').append(p);
语法2： 元素A.prepend(元素B) 将元素B插入到元素A内部的最前面
$('#d1').prepend(p);
语法3： 元素B.appendTo(元素A) 将元素B插入到元素A内部的最后
p.appendTo($('#d1'));
语法4： 元素B.prependTo(元素A) 将元素B插入到元素A内部的最前面
p.prependTo($('#d1'));
3. 在元素的同级的前或后添加元素 (兄弟关系)
语法1：元素A.after(元素B) 将元素B添加到元素A的后面
$('#d1').after(p)
语法2：元素A.before(元素B) 将元素B添加到元素A的前面
$('#d1').before(p)
语法3：元素B.insertAfter(元素A) 将元素B添加到元素A的后面
p.insertAfter($('#d1'));
语法3：元素B.insertBefore(元素A) 将元素B添加到元素A的前面
p.insertBefore($('#d1'));
4. 删除元素
语法1： 元素A.empty() 元素A中的所有子节点都清除
$('#d1').empty();
语法2： 元素A.remove() 元素A连自己都移除
$('#d1').remove();
let p = $('<p>我是p标签</p>');
5. 修改(替换)
语法1： 元素A.replaceWith(元素B) 用元素B将元素A替换
$('span').replaceWith(p);
// 语法2： 元素B.replaceAll(元素A) 用元素B将元素A替换
p.replaceAll($('span'));
6. 元素克隆
语法：元素A.clone() 返回克隆元素A的内容
参数1： 是否克隆元素身上的事件 默认false
参数2： 子元素是否克隆身上的事件 默认跟随第一个参数
$('div').last().click(()=>console.log('div'));
$('div>button').click(()=>{
console.log('button');
return false;
});
// let div = $('div').last().clone(true);
let div = $('div').last().clone(true,false);
div.appendTo($('body'));
获取设置元素的尺寸
1. width() 和 height() 获取设置元素的宽高:
元素的内容宽高，不包含padding border等
console.log($('div').width()); // 200
console.log($('div').height()); // 100
$('div').width(50);
$('div').height(50);
2. innerWidth() 和 innerHeight() 获取元素宽高
元素内容的宽高+padding 不包含border
console.log($('div').innerWidth()); // 220
console.log($('div').innerHeight()); // 120
$('div').innerWidth(50) // 设置的宽高也包含了padding
3. outerWidth() 和 outerHeight() 获取元素宽高
如果参数是fals或者不传参数，获取元素宽高： 元素内容的宽高+padding+border
如果参数是true，获取元素宽高： 元素内容的宽高+padding+border+margin
console.log($('div').outerWidth()); // 230
console.log($('div').outerWidth(true)); // 270
$('div').outerWidth(50); // 设置宽高不包含margin
$('div').outerWidth(100,true); // 设置宽度，包含margin
元素的位置
offset() 获取元素的定位相对浏览器左上角,只能拿到top和left的值
console.log($('#d1').offset()); // {top: 20, left: 40}
console.log($('#d2').offset()); // {top: 40, left: 50}
offset() 传递一个对象参数,可以设置元素的定位
$('#d1').offset({
top:10,
left:10
})
postion() 获取元素相对父级(有定位)的定位
如果有定位，则是想对象与父级的定位
如果没有定位则是相对浏览器左上角
console.log($('#d2').position()); // {top: 20, left: 10}
posotion只能获取定位，不能设置定位
$('#d2').position({top:100,left:100}) // 无效
scrollTop() 和 scrollLeft() 获取和设置浏览器水平垂直卷去的距离
console.log($(window).scrollTop());
console.log($(window).scrollLeft());
$(document).click(() => {
$(window).scrollTop(1000); // 设置卷曲的高度
console.log($(window).scrollTop());
})
jq的动画
1. 显示隐藏动画
show() 元素显示动画
参数1: 时间 单位是毫秒 'fast、slow'
参数2：运动方式 swing 和 linear取值
参数3：动画结束后执行的函数
$('button').click(function(){
// $('div').show(1000,'linear',function(){
// console.log(this);
// })
// $('div').show(2000);
})
hide() 元素隐藏动画 参数和show方法一样
$('button').click(function(){
$('div').hide(2000,'linear',function(){
console.log(this);
})
})
toggle() 元素的显示隐藏动画切换 参数和show一样的
$('button').click(function(){
$('div').toggle(1000,'linear',function(){
console.log(123);
})
})
2. 上拉隐藏下拉显示滑动特效
slideDown() 下拉显示动画 参数和show一样
$('button').click(function(){
$('div').slideDown(1000,'linear',function(){
console.log(this);
})
})
slideUp() 上拉隐藏 参数和show一样
$('button').click(function(){
$('div').slideUp(1000);
})
slideToggle() 上拉隐藏下拉显示切换动画，参数和show一样
$('button').click(function () {
$('div').stop().slideToggle(2000);
// $('div').finish().slideToggle(2000);
})
stop() 停止动画
finish() 结束动画,直接到目标效果
3. 淡入淡出动画效果
fadeIn() 淡入效果 参数和show一样
透明度从0 到1 的过程
$('button').click(function(){
$('div').fadeIn(2000,'linear',function(){
console.log(this);
});
})
fadeOut() 淡出效果 参数和show一样
透明度是1 到0 的过程
$('button').click(function () {
$('div').fadeOut(2000, 'linear', function () {
console.log(this);
});
})
fadeToggle() 淡入淡出的切换 参数和show一样
$('button').click(function () {
$('div').fadeToggle(2000, 'linear', function () {
console.log(this);
});
})
fadeTo() 显示动画到指定的透明度
参数1： 时间
参数2： 指定的透明度
参数3：运动的方式
参数4：结束后调用的函数
$('button').click(function () {
$('div').fadeTo(2000,.5,'linear',function(){
console.log(this);
})
})
自定义动画
animate(动画效果,时间,运动的方法,动画结束后的执行函数)
动画效果是一个对象：里面是目标效果的样式
自定义动画不能动画颜色
$('#start').click(()=>{
$('div').animate({
top: 100,
left:200,
width: 200,
height:200,
opacity: 0.3,
},300,'linear',function(){
$(this).css('background-color','yellow')
})
})
