jQuery

jQuery

Jquery其实就是一个封装了很多方法的js库

JS的缺点

1. 不能添加多个入口函数(window.onload), 如果添加多个，后面会把前面的取代
2. 原生js有时候代码会冗余
3. 原生js中有些属性和方法，有浏览器兼容性的问题
4. 原生js的容错率比较低，前面的代码出了问题，后面的代码执行不了

如何使用jQuery？

1. 引入Jquery文件
2. 写入一个入口函数
3. 找到你要操作的元素(jQuery选择器)去操作他，给他添加属性、样式、文本等

1. jQuery的入口函数

// 1
$(document.ready(function(){
    
}))
// 2
$(function(){
    
})

jQuery入口函数和window.onload的区别：

• jQuery的入口函数可以写多个
• 执行时机不同， jQuery入口函数快于window.onload
• jQuery的入口函数要等待页面的domTree加载完后执行
• window.onload要等待页面上所有的资源(dom树/外部css/js连接)都加载完毕后执行

2. jQuery文件结构

• jQuery文件其实是一个自执行函数,执行这个文件相当于执行这个自执行函数
• 这个自执行文件就是给window对象添加一个jQuery属性和$属性
• $和jQuery是等价的，是一个函数
• 参数传递不同，效果也不一样，(匿名函数-入口函数)
• 如果参数传递的是字符串-选择器($('#one')) / 创建一个标签$('<div>我是个div</div>');
• 如果参数是一个dom对象，那么就会把dom对象转换为jQuery对象

window.Jquery === window.$;
console.log(Object.prototype.toString.call($)); // [object function]
(function(){
    
}())

1. dom对象：原生js选择器获取到的对象，特点：只能调用dom方法或者属性，不能调用jQuery的方法或属性
2. jQuery对象：只能调用jQuery的方法或者属性，不能调用原生jsdom对象的方法或属性，jQuery对象是一个伪数组jQuery对象其实就是dom对象的一个包装集

var $(div1) = $('#one');
$dvi1.css('backgroundColor', 'green');  
console.log($div1.__proto__ === Array.prototype)  // false
// jQuery对象是一个伪数组

3. dom对象转换成jQuery

   var div1 = document.getElementById('one');
   var $div1 = $(div1);
   console.log($div1);
   

4. jQuery对象转换成dom对象

   // 使用下标取出来
   var $divs = $('div');
   var div1 = $divs[0];
   console.log(div1);
   // 使用jQuery方法 get()
   var div2 = $divs.get(1);
   

设置文本

text()方法给参数，参数就是要设置文本，给某个标签设置文本，会覆盖它原来的内容，如果设置的文本中包含标签，是不会把这个标签给解析出来的。

给标签为dix的元素设置文本，包含了多个dom元素的jQuery对象，通过test()方法设置文本，会把所有的dom元素都设置上。

$('div').text('设置的文本');  // 隐式迭代

获取css样式

css()方法要给样式名和样式值，获取包含多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式。

$(function () {
    $('#btnOne').click(function () {
        console.log($('#one').css('width'));
    });
});
// 设置多样式
$('#div1').css({
    width: 300,
    'height': '300px',
    border: '1px solid pink'
});

jQuery基本选择器

$(ul li)、、、、其实跟css差不多

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D0bl5Lwc-1617344566396)(D:\front-end\markdown\三剑客\img\jQuery基本选择器.png)]

jQuery过滤选择器

eq必须要具体值，不能用length

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XOkuDkHD-1617344566398)(D:\front-end\markdown\三剑客\img\jQuery过滤选择器.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ORuCe9J9-1617344566399)(D:\front-end\markdown\三剑客\img\jQuery筛选选择器.png)]

Class类操作

1. addClass()

添加单个或多个类，用空格隔开

$(function () {
    $('#addClass').click(function () {
        $('#div1').addClass('active');
    })
})

2. removeClass()

移出类 移出多个类同理

$(function () {
    $('#removeClass').click(function () {
        $('#div1').removeClass('notactive');
    })
})

3. hasClass()

判断类 如果有返回true，没有返回false

$(function () {
    $('#hasClass').click(function () {
        $('#div1').hasClass('notactive');
    })
})

4. toggleClass()

切换类 如果元素有这个类就移出，没有就添加

$(function () {
    $('#toggleClass').click(function () {
        $('#div1').toggleClass('notactive');
    })
})

jQuery动画(三组基本动画)

第一组

1. show()

如果show()这个方法没有参数，那就没有动画效果哦。

参数1：代表执行的动画时长 毫秒数，也可以是代表时长的字符串 fast normal slow

参数2：代表动画执行完毕后的回调函数

$('#show').click(function(){
    $('#div1').show(2000);
    $('#div1').show('fast');   // 200ms
    $('#div1').show('normal'); // 400ms
    $('#div1').show('slow');   // 600ms
    // 如果代表时长的单词写错了，就相当于写了一个normal
})
// 下面在动画执行完毕后给一个回调函数
$('#div').show(2000, function(){
    alert('动画执行完毕了');
})

2. hide()

和show同理~

$('#hide').click(function(){
    $('#div1').hide(2000);
    $('#div1').hide('fast');   // 200ms
    $('#div1').hide('normal'); // 400ms
    $('#div1').hide('slow');   // 600ms
    // 如果代表时长的单词写错了，就相当于写了一个normal
})
// 下面在动画执行完毕后给一个回调函数
$('#div').hide(2000, function(){
    alert('已经隐藏了~');
})

3. toggle()

切换状态，如果元素是隐藏状态，就动画显示，如果元素是显示状态，就动画隐藏

$('#toggle').click(function(){
    $('#div1').toggle(1000);
})

第二组

1. 滑入 slideDown(参数1， 参数2)

这个不加参数，是有动画效果的，有一个默认时长normal（400ms）

参数1：动画执行的时长

参数2：动画执行完毕后的回调函数

$('#slideDown').click(function(){
    $('#div1').slideDown(2000, function(){
        alert('滑入完成了')
    })
})

2. 滑出 slideUp()

$('#slideUp').click(function(){
    $('#div1').slideUp(2000);
})

3. 切换slideToogle()

同理，隐藏就滑入，显示就划出

$('#slideToogle').click(function(){
    $('#div1').slideToogle(2000);
})

第三组

1. 淡入 fadeIn()

$('#fadeIn').click(function(){
    $('#div1').fadeIn(); //不给参数相当于给一个normal
    $('#div1').fadeIn(2000， function(){
        alert('淡出完成了');
    });
})

2. 淡出 fadeOut()

$('#fadeOut').click(function(){
    $('#div1').fadeOut(); 
    $('#div1').fadeOut(2000);
})

3. 切换 fadeToogle()

4. 淡入到哪里 fadeTo

$('#fadeIn').click(function(){
    $('#div1').fadeIn(1000, 0.5);   //第二个参数是透明度
})

自定义动画

参数1： 必选的 是一个对象 代表需要做动画的属性

参数2： 可选的 代表执行动画的时长

参数3： 可选的 easing 代表的是缓动还是匀速 linear(匀速) swing(缓动)

参数4： 动画执行完毕后的回调函数

$(function () {
    $('#zidingyi').click(function () {
        $('#div1').animate({
            left:800,
            width:200,
            height:200,
            opacity:0.5
        }，2000,'linear', function(){
            // 这里是一个函数，可以在这里让div继续做动画
            alert('动画执行完毕了');
        });
    })
})

动画队列与停止动画

• 在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画就会被放到动画队列中，等前面的动画执行完成了才会执行(联想：火车进站)

stop()

参数1：是否清除队列

参数2：是否跳转到最终结果

$(function () {
    // 1. 开始动画，模拟一个动画队列
    $('#start').click(function () {
        $('div').slideDown(3000).slideUp(200);
    })
    // 2. 停止动画，执行stop方法。
    $('#stop').click(function () {
        // $('div').stop(true, true);   //滑一半执行完成
        // $('div').stop(true, false);  //滑一半停止
        // $('div').stop(false, true);  //滑一半执行完成后再滑入
        $('div').stop(false, false);    //滑出一半滑入
        // 如果stop()方法不写参数，默认就是两个false
    })
})

jQuery节点操作

原生js中创建节点：document.write(); innerHTML; document.createElement();

那么jQuery中是怎么创建节点的呢？

html() $()

1. 创建节点

• 获取元素的内容：html()方法不给参数
• 设置内容，会把原来的内容覆盖
• 如果设置的内容包含了标签，是会把标签给解析出来的

$('#div1').html();

$() 确实能创建元素，但是创建的元素只存在于内容中，如果要在页面上显示，就要追加

$('#btn1').click(function(){
    var $link = $('<a href="http://baidu.com"><a>');
    // 追加节点
    $('#div1').append($link);
})