jQuery

第三方库介绍

什么是第三方库？
前端的第三方库往往是用JS语言封装好的一些工具，提供一些API供开发者使用，以提升开发效率一个完整的中型项目中，往往会直接或间接的依赖上千个第三方库
为什么要学习第三方库？
提升开发效率

降低开发难度

面试中会通过第三方库的熟悉程度考察项目经验
第三方库要学习到什么程度？
某些第三方库需要单独作为课程学习，比如jQuery、Bootstrap等大型第三方库

某些第三方库需要在学习其他工具、框架时融合的学习，比如webpack、node、vue、react中涉及的大量第三方库

某些第三方库需要在项目实战开发中边学边练，比如validator、md5、jsonwebtoken等

你需要对大部分第三方库有原理层面的认识

你需要对一些第三方库有源码层面的认识
前端有哪些常用的第三方库？
下面列出前端开发中常用的第三方库

jQuery：传统的dom处理解决方案

Lodash：前端实用函数工具箱

MockJS：数据模拟

BootStrap：快速中后台UI库（可部分用于前台）

moment：时间、日期处理

date-fns：时间、日期处理

validator：数据验证

async-validator：异步数据验证

axios：跨平台的远程通信

umi-request：跨平台的远程通信，并可以跟umi更好的融合

babel：支持JS Next，并对其做兼容处理

postCSS：支持css Next，并对其做兼容处理

ejs：模板引擎

webpack：基于模块化的构建工具

webpack家族中涉及成百上千的第三方库，其中常用的20个以上

vue：JavaScript框架

vue全家桶中涉及十来个常用第三方库，用于解决项目中的常见问题

react：降低前端UI复杂度的库

react全家桶中涉及大大小小几十个第三方库，用于解决项目中的常见问题

node：前端的服务器环境

node中涉及大量的第三方库，用于解决服务器中的常见问题

……

jQuery介绍

jQuery: 一个js类库
作用: 简化原生DOM操作，提供很多工具方法

JavaScript库(第三方库)
仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。

JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解：就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。
常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。
jQuery的概念
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

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

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

学习jQuery本质：就是学习调用这些函数（方法）

jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。
jQuery的优点
1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
3. 链式编程、隐式迭代。
4. 对事件、样式、动画支持，大大简化了DOM操作。
5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
6. 免费、开源。

jQuery的基本使用

引入本地jQuery库也就是把jQuery.js文件下载到本地电脑中

1	<script src="./js/jquery-3.6.3.min.js"></script>

引入在线的jQuery库一般某些网站提供的jQuery库

bootcdn网 https://www.bootcdn.cn/

staticfileCDN网 https://staticfile.org/

1 2	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script src="https://cdn.staticfile.org/jquery/3.6.3/jquery.min.js"></script>

jQuery(javascript Query) 理念: 写得更少,做的更多
1. x.x开头的版本兼容IE浏览器
2. x.x和3.x.x就不兼容IE浏览器
下载jQuery,从官网下载即可

官网: https://jquery.com/
成功引入jQuery以后,全局会多出一个$, 这个$等同于jQuery 使用$更多,因为$更简单

console.log($);
console.log(jQuery);
console.log($ === jQuery);
console.log(window.$);
console.log(window.jQuery);
console.log(window.$ === window.jQuery);

$(“带符号的css选择器”)就可以获取jQuery对象, jQuery对象才可以使用jQuery库提供的api

$(".div1").click(function () {
    console.log(111);
});

$("div").click(function () {
    console.log("哈哈");
    $(this).css("backgroundColor", "skyblue").siblings("div").css("backgroundColor", "pink");

    console.log($(this).index());

    $(this).animate({
        width: 300
    }).siblings("div").animate({
        width: 120
    });
});

jQuery的入口函数

入口函数可以解决获取jQuery对象, DOM结构还未渲染完毕问题

入口函数类似之前学习过的window.onload或者DOMContentLoaded事件

jQuery入口函数更接近DOMContentLoaded事件,因为jQuery入口函数只要DOM结构加载完毕以后就会调用
入口函数写法一 $(匿名函数) 推荐写法

$(function () {
    console.log("入口函数写法一");
    console.log($("div"));
    // jQuery对象的属性
    // length: 选择器返回jQuery对象中元素的个数
    console.log($("div").length);
    console.log($("p").length);
    console.log($("h2").length);
    console.log("");
});

入口函数写法二 document文档对象的ready事件

$(document).ready(function () {
    console.log("入口函数写法二");
    console.log($("p"));
    console.log("");
})

jQuery对象和DOM对象的区别和转换

jQuery对象和DOM对象的区别

通过 $() 或者 jQuery对象的api以后,都会得到jQuery对象 jQuery对象只能使用jQuery对象的API 不能使用DOM的api

1 2	$(".div1").css("color", "red"); $(".div1").style.backgroundColor = "orange"; // 报错 $(".div1")是jQuery对象

通过原生document方式(获取DOM对象的方法)获取的就是DOM对象, DOM对象只能使用DOM对象提供的方法和属性, 不能使用jQuery对象提供的api

1
2
3

var div2 = document.querySelector(".div2");
div2.css("color", "red");// 报错, div2是DOM对象
div2.style.backgroundColor = "orange";

jQuery对象和DOM对象的转换

jQuery对象转成DOM对象的方式有两种
第一种: jQuery对象[索引号]

第二种: jQuery对象.get(索引号)

var $p = $("p"); // jQuery对象的变量名一般我们可以以$开头  这样可以更好的跟DOM对象区分
console.log($p);
console.log($p[0]);
console.log($p.get(0));
console.log(document.querySelector(".p1"));
$p[0].innerText = "我是段落1";

DOM对象转成jQuery对象的方式使用$()包裹DOM对象, 就可以得到jQuery对象 $(DOM对象)

var p1 = document.querySelector(".p1");
console.log(p1);
console.log($(p1));
$(p1).css("fontSize", "30px");

注意: jQuery绑定的事件中,this对象是DOM对象,不是jQuery对象,所以我们可以$(this) 把this的DOM对象转成jQuery对象

$("button").click(function () {
    console.log("this=>", this);
    this.style.backgroundColor = "orange";

    console.log("$(this)=>", $(this));
    $(this).css("backgroundColor", "pink");
});

jQuery选择器

语法：$(“要带符号的CSS选择器”) 获取”所有”符合CSS选择器的元素,得到jQuery对象

$(“CSS选择器”) 里面选择器直接写 CSS 选择器即可，但是要使用引号包括CSS选择器,另外CSS选择器需要带符号

基础选择器

名称	用法	描述
ID选择器	`$("#id")`	获取指定ID的元素
全选选择器	`$("*")`	匹配所有元素
类选择器	`$(".class")`	获取同一类class的元素
标签选择器	`$("div")`	获取同一类标签的所有元素
并集选择器	`$("div,p,li")`	获取多个元素
交集选择器	`$("li.current")`	获取交集元素

层级选择器

层级选择器最常用的两个分别为：后代选择器和子代选择器。

名称	用法	描述
子代选择器	`$("ul>li")`	使用`>`号，获取亲儿子层级的元素；注意，不会获取孙子层级的元素
后代选择器	`$("ul li")`	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

属性选择器

$('[type=email]') // 含有type属性,并且属性值为email的元素
console.log($("input"));
console.log($("input[type='text']"));
console.log($("input[type='radio']"));
console.log("");
console.log("");

$('input[checked]') // 获取有checked属性的input元素
console.log($("input[checked]"));
$('input[name="first_name"]') // name属性为first_name 的 input元素
console.log($("input[name='first_name']"));
$('input[name!="first_name"]') // name属性不等于first_name的元素
console.log($("input[name!='first_name']"));
$('input[name^="first"]') // name属性以first开头的元素
$('input[name$="name"]') // name属性以name结尾的元素
$('input[name*="name"]') // name属性包含name的元素
console.log($("input[type^='r']"));
console.log($("input[type$='t']"));
console.log($("input[type*='o']"));

表单选择器

// ❤$(":input") ：匹配所有 input, textarea, select 和 button 也就是所有的表单元素
console.log($(":input"));
// $("input") ：匹配所有 input标签元素
console.log($("input"));
// $(":text") ：匹配所有的单行文本框
console.log($(":text"));
// $(":password")：匹配所有密码框
console.log($(":password"));
// $(":radio")：匹配所有单选按钮
console.log($(":radio"));
// $(":checkbox")：匹配所有复选按钮
// $(":file")：匹配所有上传框
// $(":submit")：匹配所有提交按钮
// $(":reset")：匹配所有重置按钮
// $(":button")：匹配所有button按钮标签
// ❤$(":checked"): 查找所有选中的单选按钮,复选框以及option元素
console.log($(":checked"));
// ❤$(":selected"): 匹配所有选中的option元素
console.log($(":selected"));
// $(":disabled"): 匹配所有不可用元素,也就是被禁用的元素
console.log($(":disabled"));

01-jQuery属性选择器与jQuery表单选择器.html

筛选选择器

筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。

常见如下 :

语法	描述	举例
`:first`	获取第一个li元素	`$("li:first")`
`:last`	获取最后一个li元素	`$("li:last")`
`:eq(index)`	获取索引号为2的li元素	`$("li:eq(2)")`
`:odd`	获取索引号为奇数的li元素	`$("li:odd")`
`:even`	获取索引号为偶数的li元素	`$("li:even")`

筛选方法

方法	描述	举例
`parent([selector])`	获取最近一级的父元素	`$(element).parent(selector)`
`children([selector])`	获取子元素	`$(element).children(selector)`
`find(selector)`	获取后代元素	`$(element).find(selector)`
`siblings([selector])`	获取除自身之外的所有兄弟元素	`$(element).siblings(selector)`
`nextAll([selector])`	查找当前元素之后所有的同辈元素	`$(element).nextAll(selector)`
`prevAll([selector])`	查找当前元素之前所有的同辈元素	`$(element).prevAll(selector)`
`hasClass("类名")`	是否含有指定类名	`$(element).hasClass("类名")`
`eq(index)`	获取指定索引号的元素，索引号从0开始	`$(element).eq(index)`

注意: .eq(index)会比:eq(index)使用的更频繁

1
2
3

var myIndex = 4;
$("ul li:eq(" + myIndex + ")").css("color", "blue");
$("ul li").eq(myIndex).css("font-style", "italic");

过滤方法与过滤选择器

方法	描述	示例代码
`.first()`	找到第一个元素	`$("ul li").first().css("backgroundColor", "pink");`
`.last()`	找到最后一个元素	`$("ul li").last().css("backgroundColor", "skyblue");`
`:contains("文本内容")`	找到包含指定文本内容的子代或后代元素	`$("ul li:contains('傻瓜')").css("color", "red");`
`.next([选择器])`	获取匹配的元素集合中每一个元素下一个同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。	`$("ul li").eq(2).next().next().css("backgroundColor", "orange");`
`.prev([选择器])`	获取一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。如果提供一个选择器，那么只有紧跟在前面的兄弟元素满足选择器时，才会返回此元素。	`$("ul li").eq(2).prev().css("backgroundColor", "orange");`

.slice( start [,end] )
根据指定的下标范围，过滤匹配的元素集合，并生成一个新的 jQuery 对象。
参数说明:
start 一个整数，从 0 开始计数的下标。代表将要被选择的元素的起始下标。如果指定的下标是一个负数，那么代表从末尾开始计数。

end (可选) 一个整数，从 0 开始计数的下标。代表将要被选择的元素的结束下标（不包含end）。如果指定的下标是一个负数，那么代表从末尾开始计数。如果忽略此参数，则选择的范围是从 start 开始，一直到最后。
1
2
3
4
$("ul li").slice(2).css("fontWeight", "bold");
$("ul li").slice(2, 4).css("fontWeight", "bold");
$("ul li").slice(-3).css("fontWeight", "bold");
$("ul li").slice(-5, -3).css("fontWeight", "bold");
:gt与:lt 选择匹配集合中所有大于/小于给定index（索引值）的元素。索引值可以为负
1
2
$("ul li:gt(3)").css("font-style", "italic");
$("ul li:lt(3)").css("font-style", "italic");

jQuery操作

jQuery样式操作

jQuery中常用的样式操作有两种：css() 和设置类样式方法

方法1: css方法

jQuery 可以使用 css 方法来获取设置设置元素样式

常见以下几种形式:

1.参数只写属性名，则是返回属性值

获取第一个div元素的单个color属性值

1	var strColor = $("div").css('color');

获取第一个元素的多个css属性样式值

1	var strColor = $('div').css( ["width", "height", "color", "background-color"] );

参数是属性名,属性值,逗号分隔,是设置一组样式,属性名必须加引号,属性值如果是数字可以不用跟单位和引号

1	$("div").css("color", "red");

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开,属性名必须加引号，如果是数字可以不用跟单位和引号;

$("div").css({
    "backgroundColor" : "skyblue",
    "fontSize" : "20",
    "fontWeight" : "bold"
});

注意: 如果是复合属性可以采取驼峰命名法,比如font-size写成fontSize;如果属性值不是数字，则需要加引号

注意：css() 多用于样式少时操作，多了则不太方便。

$("button").eq(0).click(function () {
    console.log($("div").css()); // 报错, .css()方法中至少需要一个参数
});
$("button").eq(1).click(function () {
    console.log($("div").css("width"));
    console.log($("div").css("height"));
    // 属性名可以使用驼峰法或者短横杠连接法
    console.log($("div").css("background-color"));
    console.log($("div").css("backgroundColor"));
});
$("button").eq(2).click(function () {
    $("div").css("color", "red");
    $("div").css("text-align", "center");

    // 属性名可以使用驼峰法或者短横杠连接法
    // $("div").css("font-size", 20);
    $("div").css("fontSize", "20px");
});
$("button").eq(3).click(function () {
    // 注意: 如果属性名有短横杠,那么需要加上引号; 或者直接使用驼峰法,驼峰法可以不写引号  属性值如果单位是px的话,可以省略px,写数值即可  也可以写 "数值px"
    $("div").css({
        color: "red",
        "text-align": "center",
        fontSize: 20
    });
});

方法2: 操作类名方法

jquery常用的三种设置类样式方法：

方法	描述
`jQuery对象.addClass("类名")`	添加类到元素
`jQuery对象.removeClass("类名")`	从元素中删除类
`jQuery对象.toggleClass("类名")`	切换元素的类，如果存在则删除，不存在则添加

jQuery文本内容操作

常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

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

1
2
3

html("") // 获取元素的内容
html("内容") // 设置元素的内容
console.log($("div").html());

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

1
2
3

text() // 获取元素的文本内容
text("内容") // 设置元素的文本内容
console.log($("div").text());

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

1
2
3

val() // 获取表单的值
val("内容") // 设置表单的值
console.log($("div").val());

注意：html() 可以解析HTML标签，text() 无法解析标签。

jQuery属性操作

自定义属性一般以 data- 开头
操作元素固有属性(自带属性)使用prop()方法
注意: prop()方法只能操作自带属性,不能操作自定义属性
操作元素自定义属性使用attr()方法
注意: attr()方法可以操作自带属性,也可以操作自定义属性,更推荐attr()只操作自定义属性
jQuery对象.removeAttr(“属性名”) 可以删除自定属性也可以删除自定义属性

$("button").eq(0).click(function () {
    // 获取自带属性
    console.log($("div").prop("class"));
    console.log($("div").prop("id"));
    console.log($("div").prop("data-index"));
});

$("button").eq(1).click(function () {
    // 设置自带属性
    $("div").prop("class", "myDiv");
    $("div").prop("id", "qwe");
    $("div").prop("data-nav", 30);
});

$("button").eq(2).click(function () {
    console.log($("div").attr("class"));
    console.log($("div").attr("id"));
    console.log($("div").attr("data-index"));
});

$("button").eq(3).click(function () {
    $("div").attr("class", "myDiv");
    $("div").attr("id", "qwe");
    $("div").attr("data-index", 12);
    $("div").attr("data-nav", 30);
});

$("button").eq(4).click(function () {
    // jQuery对象.removeAttr("属性名")   可以删除自定属性也可以删除自定义属性
    $("div").removeAttr("class");
    $("div").removeAttr("id");
    $("div").removeAttr("data-index");
});

$("button").eq(5).click(function () {
    // 获取复选框的选中状态
    console.log($("input").prop("checked"));
    console.log($("input").attr("checked"));
    console.log("");
});

$("button").eq(6).click(function () {
    $("input").prop("checked", false);
    // $("input").attr("checked", false);
});

09-jQuery属性操作.html

jQuery元素操作

创建元素 “会返回jQuery对象”
$(“<标签名></标签名>”)

$(“<标签名>标签内容</标签名>”)
内部添加(内部添加元素,生成之后,它们是父子关系)

方法描述

append() 把内容放入匹配元素内部最后面,类似原生中的appendChild

prepend() 把内容放入匹配元素内部最前面
外部添加(外部添加元素,生成之后,它们是兄弟关系)

方法描述

before(“内容”) 把内容放入目标元素前面

after(“内容”) 把内容放入目标元素后面

方法	描述
append()	把内容放入匹配元素内部最后面,类似原生中的appendChild
prepend()	把内容放入匹配元素内部最前面

方法	描述
before(“内容”)	把内容放入目标元素前面
after(“内容”)	把内容放入目标元素后面

注意: 在添加元素的时候, 如果元素已经在当前页面中存在, 那么实现的效果是移动, 不是新增

删除元素与清空标签内容语法

方法	描述
`.remove()`	删除指定的jQuery元素本身
`.empty()`	删除指定的jQuery元素集合中所有的子节点
`.html("")`	清空指定的jQuery元素内容
`.text("")`	清空指定的jQuery元素内容
`.val("")`	清空指定的表单元素value值

克隆元素

jQuery对象.clone([true]) 谁调用这个方法就会将当前的元素进行克隆一份

参数说明： true：可缺省的，如果带true这个参数，表示克隆元素的本身的同时还会将该元素身上绑定的事件也会克隆.

但是如果没有带true这个参数或者参数为false，它只会克隆元素本身不会克隆其事件。

替换元素

jQuery对象.replaceWith( 提供的content内容 ) 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

jQuery对象.replaceWith( 提供的content内容 ) 也即是将所有匹配的元素替换成指定的HTML或DOM元素。

语法：jQuery对象.replaceWith(content) content接受一个用来插入的内容，可以是HTML字符串，DOM元素，或者jQuery对象。

比如：$('div.second').replaceWith('<h2>New heading</h2>');

$("button").eq(0).click(function () {
    // content是一个普通字符串
    // $("p").replaceWith("aaa");
    // content是一个HTML字符串
    $("p").replaceWith("<h2>我是标题2</h2>");
});

$("button").eq(1).click(function () {
    // 获取b标签的DOM对象
    var objB = document.querySelector("b");
    // content是一个DOM对象
    $("p").replaceWith(objB);
});

$("button").eq(2).click(function () {
    // content是一个jQuery对象
    $("p").replaceWith($("i"));
});

11-jQuery替换元素.html

jQuery尺寸操作

jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。

方法	描述
`.width()`	获取匹配元素的宽度值，只计算内容区域的宽度（不包含padding、border）
`.height()`	获取匹配元素的高度值，只计算内容区域的高度（不包含padding、border）
`.width(值)`	设置匹配元素的宽度值，只计算内容区域的宽度（不包含padding、border）
`.height(值)`	设置匹配元素的高度值，只计算内容区域的高度（不包含padding、border）
`.innerWidth()`	获取匹配元素的宽度值，包含padding
`.innerHeight()`	获取匹配元素的高度值，包含padding
`.outerWidth()`	获取匹配元素的宽度值，包含padding和border
`.outerHeight()`	获取匹配元素的高度值，包含padding和border
`.outerWidth(true)`	获取匹配元素的宽度值，包含padding、border和margin
`.outerHeight(true)`	获取匹配元素的高度值，包含padding、border和margin

注意:

以上参数为空，则是获取相应值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不必写单位
有了这套 API 我们将可以快速获取和设置的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

03-jQuery尺寸操作.html

jQuery位置操作

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

offset()”设置”或”获取”元素相对页面(body,文档)的偏移
position()”获取”元素偏移(一般是给定位元素使用的,会得到相对”非静态定位父辈元素”的偏移距离)

04-jQuery位置操作(上).html

scrollTop()/scrollLeft() 设置或获取元素被卷去的头部距离和左侧距离
- scrollTop() 方法设置或返回被选元素被卷去的头部
- 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部

04-jQuery位置操作(下).html

jQuery事件

jQuery事件注册

jQuery事件注册简单用法

jQuery对象.不带on的事件类型(匿名函数)

比如

$(“div”).click(function(){});

$(“p”).mouseover(function(){});

缺点1: 绑定之后, 通过动态添加的元素, 这种方法无法给这些新添加的元素绑定的

缺点2: 并不是所有事件都可以使用这种方式绑定

$("ul li").click(function () {
    $(this).css("backgroundColor", "skyblue");
});
$("ul li").mouseover(function () {
    $(this).css("backgroundColor", "lightgreen");
});
$("ul li").mouseout(function () {
    $(this).css("backgroundColor", "pink");
});
var btn = document.querySelector("button");
var objUl = document.querySelector("ul");

btn.onclick = function () {
    var newLi = document.createElement("li");
    newLi.innerText = "李狗蛋";
    objUl.appendChild(newLi);
}

jQuery对象中没有input()这个方法 ,所以使用的时候,会报错

$("input").input(function () {
    console.log(this.value);
}); //报错

$("input").on("input", function () {
    console.log(this.value);
});

jQuery事件注册 on()方法

之前的jQuery绑定事件方式( jQuery对象.不带on的事件绑定) 有两个缺点
1. 某些事件无法绑定比如 input事件
  1
  $("input").input(function () {})
  on()方法可以给input文本框绑定oninput事件
  1
  2
  3
  $("input").on("input", function () {
  console.log($(this).val());
  });
2. 动态创建的新元素,无法绑定事件
使用on()方法给jQuery对象绑定事件,语法如下:
jQuery对象.on(“不带on的事件类型” [, 后代或者子代元素或者要带符号的CSS选择器] , 回调函数 )

注意: on()方法绑定多个事件的时候,可以使用对象形式传递参数

$("div").on({
    "click": function () {
        console.log("div的click事件");
    },
    "mouseover": function () {
        console.log("div的mouseover事件");
    },
    "mouseout": function () {
        console.log("div的mouseout事件");
    }
});

注意: on()绑定事件的时候,如果多个事件的处理函数是相同的,可以把多个事件写在一起, “空格”隔开

1
2
3

$("p").on("mouseover mouseout click", function () {
    console.log("鼠标移上或者移出p段落了");
})

注意: on()方法实现事件委托(事件代理)

$("ul").on("click", "li", function () {
    console.log("this=>", this);
    $(this).css("backgroundColor", "pink").siblings("li").css("backgroundColor", "");
})

one()方法绑定事件

one()使用方式跟on()几乎一样,one()主要用于给jQuery对象绑定一次事件,总共只能触发一次

1
2
3

$("p").one("click", function () {
            console.log("p被点击了");
        });

off()解绑事件

语法	描述
`$("p").off()`	解绑所有p元素的事件处理程序
`$("p").off("click")`	解绑p元素上的点击事件
`$("p").off("mouseover mouseout")`	解绑p元素上的指定多个事件（多个事件名称用空格隔开）
`$("ul").off("click", "li")`	解绑事件委托（在ul元素上绑定的事件，并指定委托的子元素li）

手动触发事件

有些时候，在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;

语法	举例
`jQuery对象.不带on事件类型()`	$(“div”).click();
`jQuery对象.trigger("不带on事件类型")`	$(“input”).trigger(“focus”);
`jQuery对象.triggerHandler("不带on事件类型")`	$(“input”).triggerHandler(“focus”);

注意: 语法一和语法二触发效果一样, 但是语法三triggerHandler模式不会触发元素的默认行为

页面绑定滚动事件

给页面绑定滚动事件(可以给document对象或者window对象绑定的页面滚动事件, 更推荐window对象绑定 )

window.onscroll = function () {
    console.log("页面滚动中");
};

$(document).scroll(function () {
    console.log("页面滚动中");
});

jQuery事件对象

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

语法

jQuery对象.on(events,[selector],function(event) {})

阻止默认行为：event.preventDefault()

阻止冒泡： event.stopPropagation()

注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。

隐式迭代

介绍：对于原生 JS 来说，给某类元素设置样式需要使用循环逐个设置，而在 jQuery 中无需考虑这点，简单示例如下

概念：因为大部分的jQuery方法都支持隐式迭代，隐式迭代的原理是方法的内部存在看不见的遍历，它会对匹配到的所有元素进行循环遍历，执行相应的方法，而无需我们再手动地进行循环，方便我们使用

js方式给所有div设置样式和事件

var divs = document.querySelectorAll("div");
for (var i = 0; i < divs.length; i++) {
    divs[i].style.backgroundColor = "pink";
    divs[i].onclick = function () {
        console.log("div被点击了");
    }
}

jQuery方式给所有div设置样式和事件

$("div").css("backgroundColor", "pink");
$("div").click(function () {
    console.log("div被点击了~~~");
});

jQuery获取索引号 index()

jQuery对象.index( [selector] )
搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

如果参数是DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
注意细节:

1、不传递参数,返回这个元素在同辈(所有类型的兄弟元素)中的索引位置( 不传递参数这种方式用的最多 )

2、传递一个DOM对象,返回这个对象在原先集合中的索引位置

3、传递一个jQuery对象,返回这个对象在原先集合中的索引位置

4、传递一组jQuery对象,返回这组对象中第一个元素在原先集合中的索引位置

// 1. index()前面的jQuery对象是"单个"
console.log($("#bar").index());
console.log("");
console.log("");
// 2. index()前面的jQuery对象是"一组"
console.log($("ul li").index());
console.log("");
console.log("");
// 3. 传递一个DOM对象,返回这个对象在原先集合中的索引位置
var baz = document.querySelector("#baz");
console.log($("ul li").index(baz));
console.log("");
console.log("");
// 4. 传递一个jQuery对象,返回这个对象在原先集合中的索引位置
console.log($("ul li").index($("#bar")));
console.log("");
console.log("");
// 5. 传递一组jQuery对象,返回这组对象中第一个元素在原先集合中的索引位置
console.log($("ul li").index($(".abc")));
console.log("");
console.log("");

$("ul li").click(function () {
    // console.log("this=>", this);
    // console.log("$(this)=>", $(this));
    console.log($(this).index());
});

jQuery动画效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

方法	描述
`show()`	显示元素
`hide()`	隐藏元素
`toggle()`	切换元素的显示和隐藏状态
`slideDown()`	滑动方式显示元素
`slideUp()`	滑动方式隐藏元素
`slideToggle()`	切换元素的滑动显示和隐藏状态
`fadeIn()`	淡入显示元素
`fadeOut()`	淡出隐藏元素
`fadeToggle()`	切换元素的淡入淡出状态
`fadeTo()`	将元素的透明度动画过渡到指定的值
`animate()`	在元素上执行自定义动画效果，如位置、大小、颜色等

xxxxxxxxxx

// 与v-for同级的ref 返回值都是列表渲染出来当前元素数组集合

//v-for 内部的ref 返回值也是列表渲染出来当前元素数组集合 -span 没用的a

<button @click=”showRefList”>click

html

speed 动画速度,动画时长的毫秒数值 (如：1000) 取值三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值
easing 指定切换效果，默认是”swing”，可用参数”linear”
fn 在”动画完成时”执行的函数，每个元素执行一次。

显示隐藏

$("button").eq(0).click(function () {
    // $("div").show();
    // $("div").show("slow");
    // $("div").show("fast");
    // $("div").show(2000);
    // $("div").show(2000, "linear");
    /* $("div").show(function () {
                console.log("显示完毕");
            }); */

    $("div").show(2000, "linear", function () {
        console.log("显示完毕");
        $(this).css("backgroundColor", "skyblue");
    });
});

$("button").eq(1).click(function () {
    $("div").hide();
});

$("button").eq(2).click(function () {
    // $("div").toggle();
    // $("div").toggle(500);
    // $("div").toggle(500, "linear");
    $("div").toggle(500, "linear", function () {
        console.log("切换完毕~");
    });
});

[16-jQuery 动画效果-显示与隐藏.html](....\web\每日代码\32_jQuery\16-jQuery 动画效果-显示与隐藏.html)

滑入滑出

// jQuery对象.slideUp( speed, ease , fn );
// jQuery对象.slideDown( speed, ease , fn );
// jQuery对象.slideToggle( speed, ease , fn );
$("button").eq(0).click(function () {
    // $("div").slideUp();
    // $("div").slideUp(800);
    // $("div").slideUp(800, "linear");
    $("div").slideUp(2000, "linear", function () {
        console.log("上滑完毕");
    });
});

$("button").eq(1).click(function () {
    $("div").slideDown(400, "linear", function () {
        console.log("下滑完毕");
    });
});

$("button").eq(2).click(function () {
    $("div").slideToggle(400);
});

01-jQuery动画效果-上滑下滑.html

淡入淡出

// 淡入 jQuery对象.fadeIn( [speed, easing, fn] )
// 淡出 jQuery对象.fadeOut( [speed, easing, fn]  )
// 淡入淡出切换 jQuery对象.fadeToggle( [speed, easing, fn] )
// 指定透明度 jQuery对象.fadeTo( speed, opacity [,easing, fn] )

$("button").eq(0).click(function () {
    $("div").fadeIn();
});

$("button").eq(1).click(function () {
    // $("div").fadeOut();
    // $("div").fadeOut(1000);
    $("div").fadeOut(1000, "linear", function () {
        console.log("淡出完毕");
    });
});

$("button").eq(2).click(function () {
    $("div").fadeToggle();
});

$("button").eq(3).click(function () {
    // $("div").fadeTo(0.5); // 无效,至少需要前两个参数
    // $("div").fadeTo(400, 0.5);
    $("div").fadeTo(400, 0.2);
});

02-jQuery动画效果-淡入淡出.html

事件切换hover以及停止动画队列

jquery对象.hover(函数1, 函数2) 鼠标移上触发函数1, 鼠标移出触发函数2

/*jquery对象.hover(function(){

}, function(){

})*/

$("div").hover(function () {
    console.log("鼠标移上div了");
}, function () {
    console.log("鼠标移出div了");
});

jquery对象.hover(函数) 鼠标移上或者鼠标移出都触发这个函数

/*jquery对象.hover(function(){

})*/

$("div").hover(function () {
    console.log("鼠标移上或者鼠标移出div了");
});

jQuery中, 如果有多个动画需要执行,这多个动画就会形成一个动画队列, 按动画队列的顺序依次执行默认需要上一个动画执行完毕才可以执行下一个动画

jQuery对象.stop() 清除之前的动画队列一般stop()需要写在动画函数的前面

$(".nav > li").hover(function () {
    // $(this).find("ul").toggle();
    // $(this).find("ul").slideToggle();
    // $(this).find("ul").fadeToggle();

    // $(this).find("ul").slideToggle().stop();
    $(this).find("ul").stop().slideToggle();
});

03-事件切换hover以及停止动画队列.html

自定义动画

自定义动画animate语法

jQuery对象.animate( obj [, speed, easing, fn] )

注意: 参数1 obj 是需要做动画的 css 属性键值对,obj参数的取值是一个”对象”

$("div").click(function () {
    $("div").animate({
        width: 400,
        height: 100
    }, 1000, "linear", function () {
        $("div").css("textAlign", "center");
        $("div").animate({
            "background-color": "rgb(0,255,0)",
            "border-color": "purple",
            color: "purple",
            fontSize: 50
        })
    });
});

注意: 默认animate()方法也是不支持颜色相关属性值的动画变化但是引入一个jQuery插件(jQuery插件就是基于jQuery开发的增强功能的第三方库) jquery.color.js只能解决部分颜色的动画问题,不是所有颜色

1
2
3

<script src="./js/jquery.min.js"></script>
<!-- 注意: jquery.color.js是基于jQuery.js的,所以需要在jQuery引入之后引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>

带有动画的返回顶部

方法	描述
`scrollTop()`	页面直接回到Y轴指定位置(不带动画)
`scrollLeft()`	页面直接回到X轴指定位置(不带动画)

$("button").click(function () {
    // 页面直接回到指定位置(不带动画)
    // $(window).scrollTop(数值);
    // $(window).scrollTop(500);

    // $(window).scrollLeft(数值);
    // $(window).scrollLeft(200);

    // 页面动画滚动,需要使用html标签对象
    $("html").stop().animate({
        scrollTop: 500,
        scrollLeft: 200
    });
});

05-带有动画的返回顶部.html

jQuery遍历元素(难点,重点)

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

jQuery对象.each( 函数 )方法遍历匹配每一个元素,主要用于DOM处理

// 参数index是当前正在遍历索引号, domElement是正在遍历dom对象  this是正在遍历dom对象
$("div").each(function (index, domElement) {
    // console.log("index=>", index);
    // console.log("domElement=>", domElement);
    // console.log("this=>", this);
    // console.log("");

    console.log($(domElement).html());
    console.log($(this).html());
    console.log($(this).css("backgroundColor"));
    console.log("");
});

12-jQuery遍历元素(难点,重点).html

$.each()方法用的不多

$.each()是jQuery构造函数的静态方式

$.each( object , function( index , element ) {} )方法主要用于遍历数据(遍历数组或者自定义对象或者jQuery对象)

// 使用$.each()遍历数组
var arr = [10, 20, 50, 75, 62];
$.each(arr, function (index, item) {
    console.log("index=>", index);
    console.log("item=>", item);
    console.log("");
});

// 使用$.each()遍历自定义对象
var obj = {
    id: 2,
    uname: "zhangsan",
    age: 23,
    sex: "男"
};
$.each(obj, function (key, val) {
    console.log("key=>", key);
    console.log("val=>", val);
    console.log("");
});
// 使用$.each()遍历jQuery对象
$.each($("button"), function (index, domElement) {
    console.log("index=>", index);
    console.log("domElement=>", domElement);
    console.log("");
});

13-$.each()方法用的不多.html方法用的不多.html)

第三方库介绍

什么是第三方库？

为什么要学习第三方库？

第三方库要学习到什么程度？

前端有哪些常用的第三方库？

jQuery介绍

JavaScript库(第三方库)

jQuery的概念

jQuery的优点