jQuery

概述

js库：即library，封装好的函数。里面有很多预先封装好的方法。

jQuery就是为了更方便快速操作DOM，里面封装了很多方法，后续用jQuery对象调用这些方法即可。

学习jQuery就是学习调用里面封装的函数，其优化了DOM操作、事件处理、动画设计和Ajax交互。基本兼容了主流浏览器。链式编程、隐式迭代、支持插件拓展开发，轻量、免费、开源。

其宗旨就是：写得少，做的多。

下载地址：https://jquery.com/

推荐下载3.X版本。

点击后直接鼠标右键另存页面为…即可，最后将下载下来的文件引入项目中。

jQuery的基本使用

入口函数

<body>
    <script>
        // $('div').hide();
        // 1.等着页面DOM加载完毕再去执行js代码
        // $(document).ready(function() {
        //     $('div').hide();
        // })
        // 2.等着页面DOM加载完毕再去执行js代码
        $(function() {
            $('div').hide();
        })
    </script>
    <div>114514</div>
</body>

1
2
3

$(function() {
     ......//DOM加载完成的入口(推荐)
})

1
2
3

$(document).ready(function() {
    ......//DOM加载完成的入口
})

在这里插入图片描述

jQuery的顶级对象：`$`

$`是jQuery 别称，在代码中`$ 和jQuery和等价，为了方便都是$。

$`是jQuery的顶级对象，相当于原生js中的window，元素通过`$ 包装成jQuery对象，调用jQuery属性和方法。

<script>
    // 1. $ 是jQuery的别称（别名）
    // $(function() {
    //     alert(11)
    // });
    //jQuery和$二者可互换，方便起见一般都是$
    jQuery(function() {
        // alert(11)
        // $('div').hide();hide为jQuery封装的方法；
        jQuery('div').hide();
    });
</script>

jQuery对象和DOM对象

用原生js获取来的对象是DOM对象，用jQuery方法获取过来的对象是jQuery对象。

jQuery 对DOM的原生方法进行了封装，jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法。

<script>
    //DOM对象，用原生js获取
    var div = document.querySelector('div');
    console.dir(div);
    // $('div')是一个jQuery 对象
    $('div'); 
    console.dir($('div'));
</script>

控制台输出：

jQuery 对象只能使用 jQuery 属性和方法。例如：

衔接上述代码：div.style.display='none';//是原生js方法，DOM对象可调用

但：$(‘div’).style.display=’none’;//这句代码就是错的，jQuery 对象只能使用jQuery 封装的方法。

所以，jQuery 只是对js常用属性和方法进行了封装。
DOM使用原生js方法和属性，jQuery 使用jQuery 属性和方法。

jQuery 对象和DOM对象相互转换

jQuery 转化为DOM(两种方法，index是索引号)：

$(‘div’)[index]
$(‘div’).get(index)

<script>
    var div = document.querySelector('div');
    $('div')[0].hide()
    $('div').get(0).hide()
</script>

DOM转化为jQuery：

1 2	//直接获取元素即可 $('div');

jQuery常用API

jQuery选择器

jQuery 基础选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

1	$(“选择器”) //里面选择器直接写 CSS 选择器即可，但是要加引号

获取方式与原生js无异：

jQuery 层级选择器

jQuery设置样式的方法：

1	$('div').css('属性', '值')

for instance：(Set the color for all the LI under UL)

1	$("ul li").css("color", "red");

隐式迭代：遍历内部 DOM 元素（伪数组形式存储）的过程。

例如：给UL里的很多LI都设置成红色字体

直接$(“ul li”).css(“color”, “red”);//隐式迭代自动遍历每一个LI。

jQuery 筛选选择器

for instance：(Get the first LI under UL)

1	$("ul li:first").css("color", "red");

jQuery 筛选方法

重点记住：

parent()//找亲爸

children()//找亲儿子

find()//找后代

siblings()//找兄弟

eq()

jQuery 样式操作

操作CSS方法

jQuery 可以使用 css 方法来修改简单元素样式。

参数只写属性名，则是返回属性值
1
>$(this).css(''color'');
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
1
>$(this).css(''color'', ''red'');
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号(对象写法，可以不带引号)
1
2
3
4
5
6
>$(this).css({
   "width": "400px",
   height: 400,
   "color":"white",
   "font-size":"20px"
>});

设置类样式方法

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

添加类
1
$(“div”).addClass(''example'');
移除类
1
$(“div”).removeClass(''example'');
切换类
1
$(“div”).toggleClass(''example'');
==Attention:类操作与className区别==

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

jQuery 效果

可在API文档中查询具体用法：https://jquery.cuishifeng.cn/

jQuery 封装了很多动画效果，例如：

1.显示隐藏效果

1.显示
//（1）speed:字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
//（2）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
//（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
show([speed,[easing],[fn]]);//中括号表示可以省略此参数，无动画直接显示

2.隐藏
//（1）speed:字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
//（2）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
//（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次
hide([speed,[easing],[fn]]);//中括号表示可以省略此参数，无动画直接显示

1 2	3.切换显示和隐藏 toggle([speed,[easing],[fn]];

2.滑动效果

参数意思与显示隐藏参数一致

1 2	1.下滑 slideDown([speed,[easing],[fn]];

1 2	2.上滑 slideUp([speed,[easing],[fn]];

1 2	3.滑动切换 slideToggle([speed,[easing],[fn]];

==事件切换==

//（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
//（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
//（3）如果只写一个函数，则鼠标经过和离开都会触发它
hover([over,]out);

for instance:(The drop-down menu of the navigation bar).

实现效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 0 auto;
            height: 40px;
            border-bottom: 1px solid red;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid red;
            border-right: 1px solid red;
        }
        
        .nav ul li {
            border-bottom: 1px solid red;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">导航一</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">导航二</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">导航三</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">导航四</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            
            ......
        })
    </script>
</body>

</html>

jQuery部分有多种写法：

上滑和下滑分别用鼠标离开和经过来实现

//鼠标经过，下滑
$(".nav>li").mouseover(function() {
    $(this).children("ul").slideDown(200);
});
//鼠标离开，上滑
$(".nav>li").mouseout(function() {
    $(this).children("ul").slideUp(200);
});

用上面说的事件切换来写

//事件切换 hover 就是鼠标经过和离开的复合写法，两个函数对应经过和离开。
$(".nav>li").hover(function() {
    $(this).children("ul").slideDown(200);
}, function() {
    $(this).children("ul").slideUp(200);
});

简化事件切换写法：只写一个函数，鼠标经过和鼠标离开都会触发这个函数

1
2
3

$(".nav>li").hover(function() {
    $(this).children("ul").slideToggle();
});

上述写法的bug：快速经过离开，导航动画等一个结束，另一个才开始

待解决：动画队列（动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。）

解决方法：停止排队

1
2
3

//(1)stop()方法用于停止动画或效果。
//(2)注意:stop()写到动画或者效果的前面，相当于停止结束上一次的动画。只执行最新的一次。
stop();

完整代码：

$(".nav>li").hover(function() {
    // stop 方法必须写到动画的前面，结束上一次的动画
    $(this).children("ul").stop().slideToggle();
});

3.淡入淡出效果

就是透明度从0增加到1的变化。

//参数与上述一致

（1）speed：字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（2）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（3）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

1 2	1.淡入 fadeIn([speed,[easing],[fn]];

1 2	2.淡出 fadeOut([speed,[easing],[fn]];

1 2	3.淡入淡出切换 fadeToggle([speed,[easing],[fn]];

渐进方式调整到指定的不透明度

1 2	//opacity 透明度，取值0~1 fadeTo([[speed],opacity,[easing],[fn]];

4.自定义动画 animate

1
2
3

//params: 想要更改的样式属性，以对象形式传递。属性名可以不用带引号，如果是复合属性则需要采
取驼峰命名法 borderLeft。其余参数都可以省略。
animate(params,[speed],[easing],[fn];

jQuery 属性操作

设置或获取元素固有属性值

元素固有属性就是元素本身自带的属性，比如 a 元素里面的 href ，比如 input 元素里面的 type。

1.获取
prop('属性');
2.设置
prop('属性', '属性值');

设置或获取元素自定义属性值

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。

1.获取
attr('属性');  // 类似原生 getAttribute()
2.设置
attr('属性', '属性值');   // 类似原生 setAttribute()

数据缓存data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。本质上是存放在元素缓存中，一旦页面刷新，之前存放的数据都将被移除。

1.存入数据
data('name','value');   // 向被选元素附加数据
//例如：$('span').data('uname','roydon');
2.获取数据
date('name');  //得到数字型数据，获取H5自定义属性data-index时，直接写index即可

jQuery 内容文本值

主要针对元素的内容还有表单的值操作。

普通元素内容 html()（相当于原生innerHTML)

1.获取元素内容
html()
2.设置元素内容
html("内容")

普通元素文本内容 text() (相当与原生 innerText)

1.获取
text()
2.设置
text("文本内容")

表单的值 val()（相当于原生value)

1.获取
val()
2.设置
val("内容")

保留两位小数：toFixed(2);

jQuery 元素操作

遍历元素

jQuery 隐式迭代只能对同一类元素进行相同操作。

遍历元素可以做到给每个元素添加不同操作。

语法1：

//index 元素索引号
//domEle 是每个DOM元素对象（非jquery对象）；所以要想使用jquery方法，需要将这个dom元素转换为jquery对象 $(domEle)
$("div").each(function (index, domEle) {
    ......
});

例如：统计三个div内容的和

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HTML5</title>
    <script src="./jquery.min.js"></script>
    <script>
        $(function () {
            var sum = 0;
            $('div').each(function (index, domEle) {
                console.log(index);
                console.log(domEle);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
        })
    </script>
</head>

<body>
    <div>2</div>
    <div>3</div>
    <div>5</div>
</body>

</html>

结果：

在这里插入图片描述

语法2：

//$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
//index 元素索引号;element 遍历内容(元素)
$.each(object，function (index, element) {
    ......
});

例如：遍历对象 {name: “roydon”,age: 20}

$(function () {
    var user = { name: "roydon", age: 20 };
    $.each(user, function (i, ele) {
    //i 为属性名；ele 为属性值。遍历数组时i 为下标；ele 为值
        console.log(i + " : " + ele);
    })
})

结果：

在这里插入图片描述

创建元素

1	$("<li></li>");

此时只是创建了，并没有添加到页面元素中

添加元素

1
2
3

1.内部添加（添加过后与原元素程父子关系
element.append(''内容'');//把内容放入匹配元素内部最后面，类似原生 appendChild。
element.prepend(''内容'');//把内容放入匹配元素内部最前面。

1
2
3

2.外部添加（添加过后与原元素程兄弟关系
element.after(''内容'');//把内容放入目标元素后面
element.before(''内容'');//把内容放入目标元素前面

删除元素

1
2
3

element.remove();//删除匹配的元素（本身）
element.empty();//删除匹配的元素集合中所有的子节点
element.html('');//清空匹配的元素内容，也可设置内容

例如：元素如下：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

1.$(“ul”).remove(); 结果：ul连同li全部被删除

2.$(“ul”).empty(); 结果：清空ul里所有的li；.html(‘’’’);与其类似

jQuery 尺寸、位置操作

jQuery 尺寸

参数为空时是取值，参数不为空是设置宽高；

例如：

1 2	$("div").width();//获取div宽度 $("div").width(300);//设置宽300

jQuery 位置

位置主要有三个： offset()、position()、scrollTop()/scrollLeft()

1.offset() 设置或获取元素偏移

offset() 相对于文档的偏移坐标，跟父级没有关系。
该方法有2个属性 left、top 。offset().top 获取距离文档顶部的距离，offset().left 获取距离文档左侧的距离。
可以设置元素的偏移：offset({ top: 50, left: 50 });

2.position() 获取元素偏移

position() 返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
该方法有2个属性 left、top。position().top 获取距离定位父级顶部的距离，position().left 获取距离定位父级左侧的距离。
该方法只能获取。

3.scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

类似于一个小盒子放大图片，图片会显示不全，不全的部分就是scrollTop()/scrollLeft()
加参数表示设置

jQuery 事件

jQuery 事件注册

事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll(页面滚动) 等

语法：

element.事件(function(){})
例如：
$(“div”).click(function(){
    //事件处理程序
})

jQuery 事件处理

1.事件处理 on() 绑定事件在匹配元素上绑定一个或多个事件的事件处理函数。

//1. events: 一个或多个用空格分隔的事件类型，如"click"或"mouseover" 。
//2. selector: 元素的子元素选择器。
//3. fn:回调函数 即绑定在元素身上的侦听函数。
element.on(events,[selector],fn);

🔸当on()绑定多个事件：

$(“div”).on({
    mouseover: function(){}, //事件1
    mouseout: function(){},  //事件2
    click: function(){}      //事件3
});
//若mouseover事件和mouseout事件响应程序相同，则空格隔开写一起
//$(“div”).on(“mouseover mouseout”, function() {
//    ......
//});

🔸事件委派：

//li的处理事件委派给父ul，里面每个li都有了click
$('ul').on('click', 'li', function() {
    alert('hello world!');
});

注意：事件委派现在大多采用⬆️这种写法：
优势在于当动态创建元素时，可以动态自动为其绑定事件

例如：ol里添加li并动态绑定事件
$("ol").on("click", "li", function() {
    alert('hello world!');
})
var li = $("<li>后来创建的li</li>");
$("ol").append(li);

2.事件处理 off() 解绑事件可以移除通过 on() 方法添加的事件处理程序。

当只想让事件触发一次，就会用到解绑事件。（也可以把绑定事件的on()改为one()表示事件只触发一次）

1
2
3

$("p").off(); // 解绑p元素所有事件处理程序
$("p").off( "click");  // 解绑p元素上面的点击事件
$("ul").off("click", "li");  // 解绑事件委托

3.自动触发事件 trigger()

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

例如，div自动触发点击事件：

$(function() {
    $("div").on("click", function() {
        $(this).css("background","red")
    });
    // 自动触发点击事件
    // 方法一： 元素.事件()
    // $("div").click();会触发元素的默认行为
    // 方法二： 元素.trigger("事件")
    // $("div").trigger("click");会触发元素的默认行为
    // 方法三： 元素.triggerHandler("事件") 就是不会触发元素的默认行为
    $("div").triggerHandler("click");
});

jQuery 事件对象

事件被触发，就会有事件对象event的产生。

element.on(events,[selector],function(event) {
    //阻止默认行为：event.preventDefault()  或者 return false;
    //阻止冒泡： event.stopPropagation()
})

概述

jQuery的基本使用

入口函数

jQuery的顶级对象：$

jQuery 对象和DOM对象相互转换

jQuery常用API

jQuery选择器

jQuery 样式操作

jQuery 效果

1.显示隐藏效果

2.滑动效果

3.淡入淡出效果

4.自定义动画 animate

jQuery 属性操作

设置或获取元素固有属性值

设置或获取元素自定义属性值

jQuery 内容文本值

jQuery 元素操作

遍历元素

创建元素

添加元素

删除元素

jQuery 尺寸、位置操作

jQuery 尺寸

jQuery 位置

jQuery 事件

jQuery 事件注册

jQuery 事件处理

jQuery 事件对象

jQuery 其它方法

jQuery的顶级对象：`$`