jQuery学习-01

 

0x00 入口函数

      入口函数是等dom元素加载完毕后再执行函数内的代码

$(function (){
    $('.box').hide();
})

0x01 顶级对象

    $就是jquery的顶级对象，$=jquey；像0x00的例子一样，就是将.box这个对象包装成了jquey对象，所以可以调用jquey方法。

    jquery对象就只能使用jquery方法，而DOM对象就只能使用原生js方法。

    jquery对象转换为dom对象的方法：

$('.box')[index] //这里只有一个.box所以index=0
$('.box').get(index) //同上

0x02 jq的选择器

    基本上与css的选择器一致，不同的是多了一些筛选器和方法

    

    

    一个显示下拉菜单的方法

$('.box-li').mouseenter(function (){
    $(this).children('ul').show();
})
$('.box-li').mouseleave(function (){
    $(this).children('ul').hide();
})

0x03 jq的效果

//show就是将隐藏的元素展示出来
$('button').eq(0).click(function (){
    $('.box-li').show(1000,function (){
        alert(1);
    });
})
// hide就是将元素隐藏起来
$('button').eq(1).click(function (){
    $('.box-li').hide(1000,function (){
        alert(2);
    });
})
// toggle即让元素在隐藏和展示之间切换
$('button').eq(2).click(function (){
    $('.box-li').toggle(1000,function (){
        alert(3);
    });
})

    上滑下滑效果 

// 下滑
$('button').eq(0).click(function (){
    $('.box-li').eq(0).find('.ul').slideDown(1000);
})
// 上滑
$('button').eq(1).click(function (){
    $('.box-li').eq(0).find('.ul').slideUp(1000);
})
// 在下滑和上滑之间切换
$('button').eq(2).click(function (){
    $('.box-li').eq(0).find('.ul').slideToggle(1000);
})

    当快速触发动画时，会出现动画延迟触发的问题，这时候可以用stop来解决这个问题

// 注意stop要在动画效果前面
$('.box-li').hover(function (){
    $('.ul').eq(0).stop().slideToggle(500);
})

    淡入淡出效果

// fadeIn即让元素淡入
$('button').eq(0).click(function (){
    $('.ul').eq(0).fadeIn(1000,function (){
    });
})
// fadeOut即让元素淡出
$('button').eq(1).click(function (){
    $('.ul').eq(0).fadeOut(1000,function (){
    });
})
// fadeToggle即让元素在淡入和淡出中切换
$('button').eq(2).click(function (){
    $('.ul').eq(0).fadeToggle(1000);
})
// fadeToggle即改变透明度，第一个参数为速度，第二个参数为要改变的透明度
$('button').eq(2).click(function (){
    $('.ul').eq(0).fadeTo(1000,0.5);
})

    animate动画，有四个参数

    

   0x04 获取元素的属性

    prop()即获取或者修改元素的固有属性

    attr()可以获取或者修改元素的自定义属性

    html()获取元素内容，相当于innerHtml，不带参数就是获取，带参数就是设置元素的内容

    text()就是获取元素的文本内容，相当于innerText，不带参就是获取，带参就是设置元素的内容

    val()用来获取表单元素的内容

    parents('选择器')可以获取指定的父元素

    toFixed()可以指定保留多少位小数

0x05 jq的遍历

     注意获取的domElm是dom元素

$('.box').children('p').each(function (i,domElm){
    $(domElm).css('color','aqua');
})

    可以遍历任何对象的遍历

$.each($('.box'),function (i,domElm){
    $(domElm).css('color','aqua');
})

0x06 元素的操作

    内部添加

let elm = $('<p>新添加的元素</p>');
let elm2 = $('<p>新添加的元素</p>');
// 注意，内部添加一个元素只能被添加一次
// 在尾部添加元素
$('.box').append(elm);
// 在首部添加元素
$('.box').prepend(elm);

    外部添加

let elm = $('<p>新添加的元素1</p>');
let elm2 = $('<p>新添加的元素2</p>');
// 注意，一个元素只能被添加一次
// 在尾部添加元素
$('.box').after(elm);
// 在首部添加元素
$('.box').before(elm2);

    删除元素

    remove()删除选中的元素

    empty()清除选中元素的子元素

0x07 jq的事件处理

    单个事件注册

    $('li').click(function () {
        alert('1');
    })

    多个事件注册

    $('li').on({
        mouseenter: function () {
            alert('1');
        },
        mouseleave: function () {
            alert('2');
        }
    })

     事件委派，事件绑定在了父元素（ul）身上，委派给了所有的子元素（li）

    $('ul').on('click','li',function () {
        alert('3');
    })

    on事件可以给未创建的动态元素绑定事件；

    事件解绑

$('.btn').on('click',function () {
    let li = $('<li></li>');
    li.html($('.txt').val() + "<span>删除</span>");
    $('.box').append(li);
    $('.txt').empty();
    $(li).children('span').on('click', function () {
        li.remove();
    })
    li.slideDown(500);
})
$('.btn').off('click'); // 若不输入参数则为删除所有的事件

    一次性触发事件one

$('.btn').one('click',function () {
    alert('1');
})

     自动触发事件

$('.btn').on('click',function () {
    alert('1');
})
$('.btn').click();
$('.btn').trigger('click');
// 与上面的trigger函数最大的不同在于triggerHandler不触发元素的默认行为
$('.btn').triggerHandler('click');

     事件对象

$('.btn').on('click',function (e) {
    // 阻止默认行为
    e.preventDefault();
    // 阻止冒泡
    e.stopPropagation();
    console.log('1');
})
$(document).on('click',function () {
    console.log('document');
})

    对象拷贝

let obj = {
    name: 'Joker',
    age: '18',
    grade: {
        math: '80',
        english: '90'
    }
}
let obj2 = {}
let obj3 = {
    grade: {
        english: '60'
    }
}
//extend第一个参数是可选的，默认为浅拷贝，当遇到复杂数据类型时会将复杂数据类型的地址拷贝给target元素
$.extend(obj2,obj);
console.log(obj2);
obj.grade.english = '100';
//若第一个参数为true，则为深拷贝，会把里面的数据完全复制一份给target元素，遇到冲突的会合并数据
$.extend(true,obj3,obj);

0x08 jq插件

    当多库并存时,可以更改$符防止冲突

 let everything = $.noConflict();

    懒加载-easyLazyload.js

    全屏加载-fullPage.js