[JavaScript知识库]【博学谷学习记录】超强总结，用心分享｜jQuery（一）

目录

jQuery

jQuery的入口函数

jQuery选择器

jQuery中常用的样式操作

jQuery效果

事件切换

JavaScript库

JavaScript库是一个封装好的特定集合（方法和函数）。从封装一大堆函数的角度理解库，就是从这个库中封装了很多预先预定好的函数在里面，比如动画animate、hide、show，比如获取元素等。

简单理解，就是一个js文件里面对我们原生js代码进行了封装，存放到里面。这样我们就可以快速高效的使用这些封装好的功能了。

常见的JavaScript库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的。

jQuery

jQuery是一个快速简洁的JavaScript库，其设计的宗旨是“write Less，Do More”，即提倡写更少的代码，做更多的事情。

j就是JavaScript；jQuery查询；意思就是查询js，把js中DOM操作做了封装，我们可以快速的查询使用里面的功能。

jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和ajax交互。

jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

jQuery的优点

1.轻量级。核心文件才几十kb，不会影响页面加载速度

2.跨浏览器兼容，其中兼容了现在主流的浏览器

3.链式编程，隐式迭代

4.对事件、样式、动画支持，大大优化了DOM操作

5.支持插件扩展开发，有着丰富的第三方插件，例如树形菜单、日期控件、轮播图等

6.免费、开源

jQuery的入口函数

//第一种
$(function(){
    //此处是页面DOM加载完成的入口
});

//第二种
$(document).ready(function(){
    //此处是页面DOM加载完成的入口
});

总结

1.等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装

2.相当于原生js中的DOMContentLoaded

3.不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码

4.更推荐使用第一种方式。

jQuery中的顶级对象

1.$是jQuery别称，在代码中可以使用jQuery代替，但一般为了方便，通常都直接使用$

2.$是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$封装成jQuery对象就可以调用jQuery的方法

jQuery对象和DOM对象

1.用原生js获取来的对象就是DOM对象

2.jQuery方法获取的元素就是jQuery对象

3.jQuery对象本质是利用$对DOM函数对象包装后产生的对象（伪数组形式存储）

jQuery对象和对象转换

DOM对象与jQuery对象之间是可以相互转换的，因为原生js比jQuery更大，原生的一些属性和方法及jQuery没有给我们封装，要想使用这些属性和方法，需要把jQuery对象转换成DOM对象才能使用。

//DOM->jQuery
var box = document.getElement('box');
var jQueryOblect = $(box);

//jQuery->DOM
var domObject1 = $('div')[0]
var domObject2 = $('div').get[0]

jQuery选择器

基础选择器

属性选择器

筛选选择器

jQuery中常用的样式操作

jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式。

//参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

//参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color","red");

//参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({"color":"red","font-size":"20px"});

设置类样式的方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。

//添加类
$("div").addClass("current");

//删除类
$("div").removeClass("current");

//切换类
$("div").toggleClass("current");

注意

1.设置类样式方法比较适合样式多式操作，弥补css()的不足

2.原生js中className会覆盖元素原先里面的类名，jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

jQuery效果

jQuery给我们封装了很多动画效果：显示隐藏、化入化出、淡入淡出和自定义动画。

显示隐藏

显示隐藏动画常见的有三个方法：show()/hide()/toggle()

<style>
    div {
        width: 150px;
        height: 300px;
        background-color: pink;
    }
</style>
<script src="jquery.min.js"></script>

<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
    $(function() {
        $("button").eq(0).click(function() {
            $("div").show(1000, function() {
                alert(1);
            });
        })
        $("button").eq(1).click(function() {
            $("div").hide(1000, function() {
                alert(1);
            });
        })
        $("button").eq(2).click(function() {
                $("div").toggle(1000);
            })
    });
</script>

滑入滑出

滑入滑出动画常见有三个方法：slideDown()/slideUp()/slideToggle()

slideDown([speed,[easing],[fn]])



//1.参数都可以省略

//2.speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值

//3.easing：用来指定切换效果，默认是"swing",可用参数"linear"

//4.fn：回调函数，在动画完成时执行的函数，每个元素执行一次

slideUp([speed,[easing],[fn]])



//1.参数都可以省略

//2.speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值

//3.easing：用来指定切换效果，默认是"swing",可用参数"linear"

//4.fn：回调函数，在动画完成时执行的函数，每个元素执行一次

slideToggle([speed,[easing],[fn]])



//1.参数都可以省略

//2.speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值

//3.easing：用来指定切换效果，默认是"swing",可用参数"linear"

//4.fn：回调函数，在动画完成时执行的函数，每个元素执行一次

淡入淡出

淡入淡出动画常见有四个方法:fadeIn()/fadeOut()/fadeToggle()/fadeTo()

<style>
    div {
        width: 150px;
        height: 300px;
        background-color: pink;
        display: none;
    }
</style>
<script src="jquery.min.js"></script>

<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div></div>
<script>
    $(function() {
        $("button").eq(0).click(function() {
            $("div").fadeIn(1000);
        })
        $("button").eq(1).click(function() {
            $("div").fadeOut(1000);
        })
        $("button").eq(2).click(function() {
            $("div").fadeToggle(1000);
        });
        $("button").eq(3).click(function() {
            $("div").fadeTo(1000, 0.5);
        });
    });
</script>

自定义动画

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate()

animate(params,[speed,[easing],[fn]])



//1.params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法，其余参数都可以省略

//2.speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值

//3.easing：用来指定切换效果，默认是"swing",可用参数"linear"

//4.fn：回调函数，在动画完成时执行的函数，每个元素执行一次

<style>
    div {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<button>动起来</button>
<div></div>
<script>
    $(function() {
        $("button").click(function() {
            $("div").animate({
                left: 500,
                top: 300,
                opacity: .4,
                width: 500
            }, 500);
        })
    })
</script>

停止动画排队

动画或者效果一旦触发就会执行，如果多次触发就造成多个动画或效果排队执行。

停止动画排队的方法为stop()

? ? ? ?stop()方法用于停止动画或效果

? ? ? ?stop()写到动画或者效果前面相当于停止结束上一次的动画

事件切换

jQuery中为我们新添加了一个事件hover，功能类似css中的伪类:hover。

hover([over,]out)

over：鼠标移动到元素上要处方的函数

out：鼠标移出元素要出发的函数

如果只写一个函数，则鼠标经过和离开都会触发它