[JavaScript知识库]jQuery（2）

1、jquery和js对象的转换

让我们先看看它们的区别吧！

//js获取元素  js对象
let oLi = document.querySelectorAll('li');

//jquery获取元素  jquery对象
let $oLi = $('li');

• 通过js获取的对象

• 通过jquery获取的对象

可以看出，它们的结果很相似，但分别属于js对象和jquery对象，那怎么转化呢？

• js转为jquery

//js对象转为jquery对象
console.log($(oLi));  //oLi为js获取的对象

• jquery转为js

//jquery转为对象js对象
console.log($oLi[0]);
console.log($oLi[1]);
console.log($oLi[3]);

2、创建元素

$(标签)

// 创建p标签  两种方式
$('<p>创建的p标签</p>');
$('<p></p>').html('创建的p');

3、插入元素

• 从元素外部插入

ele.after(); 从元素后面插入
ele.insertAfter(); 从元素后面插入
ele.before(); 从元素前面插入
ele.insertBefore(); 从元素前面插入

//后面添加
$('#box').after($p);
$p.insertAfter($('#box'));

//前面添加
$p.insertBefore($('#box'));
$('#box').before($p);

• 从元素内部插入

ele.append(); 内部尾部追加
ele.appendTo() 内部尾部追加
ele.prependTo() 内部前面追加
ele.prepend(); 内部前面追加

// box内部尾部追加
$('#box').append($p);
$p.appendTo($('#box'))

// box内部前面追加
$p.prependTo($('#box'))
$('#box').prepend($p);

4、元素替换

ele1.replaceWith(ele2); ele1替换为ele2
ele2.replaceAll(ele1);

// 页面的div替换为 <p></p>
$('#box').replaceWith($p);
$p.replaceAll($('#box'));

5、元素删除

ele.empty() 仅清空子代元素
ele.remove() 清空本身以及子代元素

//删除div的子代元素
$(odiv).empty();

//删除div以及子代元素
$(odiv).remove();

6、元素的尺寸

innerWidth():内部宽（可视宽） width+padding
outerWidth():外部宽（占位宽） width+padding+border
outerWidth(true):外部宽（占位宽） width+padding+border+margin

// 获取元素尺寸（占位及可视的）
let $Div = $('div');
// console.log($Div.height());

$Div.height(200);
$Div.width(200)

$Div.css('border', '5px red solid');
$Div.css('padding', '5px');
$Div.css('margin', '5px');

console.log($Div.innerWidth()); //获取可视宽
console.log($Div.innerHeight()); //获取可视高

console.log($Div.outerHeight()); // 获取占位高
console.log($Div.outerWidth(true));//加true包括margin

7、元素的位置

offset(): 获取相对于页面的left和top（对象）
offset({‘left’:100,‘top’:100}): 设置相对于页面的left和top（对象）
postion(): 获取相对于具有定位的父级元素的left和top（对象）

console.log($Div.offset()); //获取位置
$Div.offset({  //设置位置
    //不加单位的
    'left': '400',
    'top': '300',
})
console.log($Div.offset());

8、页面滚出的距离

$(window).scrollTop() 获取页面滚动出去的高度
$(window).scrollTop(数值) 设置页面滚动出去的高度

$('body').css('height', '10000px');
window.onscroll = function () {
    console.log($(window).scrollTop());//获取滚出去的高度
    console.log($(window).scrollLeft());//获取向右滚出去的距离

}

9、元素的事件绑定

元素.on(事件类型,事件处理函数)
元素.事件类型(事件处理函数) 括号里可以传参
元素.hover(事件处理函数1，事件处理函数2）

//绑定事件的方式一：
$div.on('click', function () {
    $(this).css('width','100px');
    $(this).css('height','100px');
})

//绑定事件的方式二：
$div.click(function () {
    $(this).css('width','100px');
    $(this).css('height','100px');
})

//括号里传参
$div.click({msg:"haha",info:'信息'},function (e) {
    console.log(e.data);//此处必须为 e.data
})

// 元素绑定hover事件，传两个回调函数
$div.hover(function(){
	//移入
    $(this).css('background','green')
},function(){
	//移出
    $(this).css('background','yellow')
})

10、jquery实现事件委托

// 事件委托的写法 
// 父元素为委托元素  子元素为触发事件对象
$('父元素').on('click','子元素',function(e){
    var ev = e|| window.event;
    var t = ev.srcElement||ev.target;
})

11、显示与隐藏

show() 显示
hide() 隐藏

// 点击显示元素  括号里的参数为匀速，时间，回调函数
$('.btn1').on('click',function(){
    $('div').show(1000,'linear',function(){
         alert('执行完毕')
    });
})

// 点击隐藏元素
$('.btn2').on('click',function(){
    $('div').hide(500);
})

12、淡入淡出

// 淡入
$('.btn1').on('click',function(){
    $('div').fadeIn();
})

// 淡出
$('.btn2').on('click',function(){
    $('div').fadeOut();
})

经典案例：jquery实现轮播图淡入淡出

//给li加不同的背景色
let arr = ['red','pink','blue','gray','green'];
$('ul>li').each(function(index,item){
    console.log(index);
    $(item).css('background',arr[index])     
})

//添加淡入淡出效果
$('ol>li').on('click',function(){
    $(this).addClass('l1').siblings('li').removeClass('l1');
    $('ul>li').eq($(this).index()).fadeIn().siblings('li').fadeOut();
})

13、jquery实现动画

$('ul').animate({
    'left': -nindex * $('ul>li').innerWidth() + 'px',
 })

经典案例：jquery实现元素的创建，追加，遍历，删除

let resu;
//获取数据
window.onload = function () {
    resu = getLocal('score');
    // console.log(resu);
    for (let i = 0; i < resu.length; i++) {
        creat(resu[i]['姓名'], resu[i]['科目'], resu[i]['分数']);
        
        //删除每行
        // console.log($('.a1'));
        $('.a1').on('click', function () {
            $(this).parent().parent().remove();
        })
    }
}

//渲染页面
function creat(name, sub, mark) {
    //创建td标签
    let $Td1 = $('<td></td>').html(name);
    let $Td2 = $('<td></td>').html(sub);
    let $Td3 = $('<td></td>').html(mark);
    let $Td4 = $('<td></td>').html('<a class="a1">删除</a>')

    let $Tr = $('<tr></tr>');

    $Tr.append($Td1);
    $Tr.append($Td2);
    $Tr.append($Td3);
    $Tr.append($Td4);

    $Tr.appendTo($('tbody'));
}