# jQuery

# 为什么要学 jQuery

究其原因是因为原生 js 在进行 dom 操作时代码量多而且容错性差，不够简练。那么 jQuery 就是为了解决这些问题而出现的。

# jQuery 是什么

jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（或 JavaScript 框架）。jQuery 设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。 目前这个阶段，主要介绍如何来使用 jQuery 操作 DOM，其实就是学习 jQuery 封装好的那些功能方法，这些方法叫做 API（Application Programming Interface 应用程序编程接口）。

# jQuery 的基本使用

• 获取源文件
• 引入页面

// 先下载jQuery源文件
// 引入
// 同时注意引用顺序，引入之后才能使用，否则会报错 $ is not defined
<script src="jquery-3.3.1.min.js" />

# 入口函数

// 何时引入业务代码
$(document).ready(function() {});
$(function() {}); //推荐

# 事件处理

• 事件源
  1. 触发事件的对象
  2. 在 js 中就是 dom 对象
  3. 在 jQuery 中 是包装过的 dom 对象
• 事件
  1. js 中 指的是 onclick , onmouseenter/onmouseleave , onmouseup/onmousedown
  2. jQuery 中 就是 click , mouseenter/mouseleave , mouseup/mousedown
• 事件处理程序

// 1. js中
obj.onclick = function() {
	// 事件处理
};
// jQuery中
$(obj).click(function() {
	// 事件处理
});
// 区别
// obj.onclick  调用属性
// obj.click()  调用方法

# 详细介绍

# $

• 变量命名规则
  1. 字母，数字，\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\_，$
  2. 不能以数字开头
• jQuery 的 两个变量 $ 和 jQuery

# js 和 jQuery 入口函数的区别

• 执行时间

window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。只加载了 dom 框架，对于大的图片需要时间，这个不等。

• 编写个数

window.onload 不能同时编写多个，如果有多个 window.onload 方法，只会执行一个。

$(document).ready()可以同时编写多个，并且都可以得到执行。

# jQuery 的基本选择器

看起来和 css 的选择器没什么两样!

# jQuery 的其他选择器

• 层级选择器(css 也有)

• 属性选择器

• 基本筛选选择器

• 其他选择器

# DOM 对象和 jQuery 对象的相互转换

# jQuery 对象转换为 DOM 对象

• $('#btn')[0]
• $('#btn').get(0)

# DOM 对象转换成 jQuery 对象

var btn = document.getElementById('btn');

$(btn) ====> 把 DOM 对象转成了 jQuery 对象

# DOM 操作

# 样式操作 .css()

• 获取样式
• 设置单个属性样式
• 设置多个属性样式

# 属性操作 .attr()

• 获取属性   $('img').attr('src')  获取 img 的 src 属性值
• 设置属性   $('img').attr({src:'text.jpg',alt:'sorry'})
• removeAttr()   $('img').removeAttr('src')   删除 src 属性

# html 代码/文本/值

• 可以取值,设值
• html()   $('p').html()   $("p").html('html 代码')
• text()   $('p').text()   $('p').text('内容')
• value()   $('input').value()   $('input').value('姓名')
• prop()   $('input').prop('checked')   $('input').prop('checked',false)

# 类名操作

• addClass(); 向被选元素添加一个或多个类
• removeClass(); 从被选元素删除一个或多个类
• toggleClass(); 对被选元素进行添加/删除类的切换操作
• hasClass(); 判断被选元素是否存在类

# dom 筛选过滤/查找

• eq(index);
• find(); 符合条件的后代节点
• siblings(); 除了自己以外的所有兄弟节点
• children(); 所有孩子节点
• next(); 下一个兄弟节点
• nextAll(); 后面的所有兄弟节点
• nextUntil();后面的兄弟节点,直到...
• prev();上一个兄弟节点
• prevAll();
• prevUntil();
• parent(); 父节点
• parents(); 所有父节点
• parentsUntil();

# 案例练习

• 隔行变色

• 高亮显示

• 淘宝精品服饰案例

• tab 栏切换

# jQuery 动画

# 隐藏(hide)/显示动画(show)

• $(selector).show(2000);
• $(selector).show(slow); slow/normal/fast
• $(selector).show(2000,function(){});
• $(selector).show();

# 滑入滑出动画

• $(selector).slideDown(speed,callback);
• $(selector).slideUp(speed,callback);
• $(selector).slideToggle(speed,callback);

# 淡入淡出动画

• $(selector).fadeIn(speed,callback);
• $(selector).fadeOut(speed,callback);
• $(selector).fadeToggle(speed,callback);
• $(selector).fadeTo(speed,opacity); 调节透明度

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400 毫秒

# 自定义动画

$(selector).animate(styles,speed,ease,callback)

• 第一个参数表示：要执行动画的 CSS 属性（必选）
• 第二个参数表示：执行动画时长（可选）
• 第三个参数表示: 运动函数 'swing'和'linear'
• 第四个参数表示：动画执行完后立即执行的回调函数（可选）

# 停止动画

• stop(); 停止当前动画

为什么要停止动画？如果多个动画同时作用于一个单位上面，那么多个动画会进入排队。后一个动画的执行必须等前面的执行完毕。

• stop(stopAll,goToEnd)

stopAll:是否全部停止动画(停止队列中所有动画),默认 false goToEnd: 是否将停止的动画,停在当前动画的最后一个状态

# 插入节点

• append()

  • 参数 jq对象 或 标签字符串 或 DOM对象
  • 作用：在被选元素内部从后面插入。
  • 如果是页面中存在的元素，那么调用 append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了。(剪切)
  • 如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去。

• appendTo()

作用：把$(selector)追加到node中去

$(selector).appendTo(node);

• prepend()

作用：在被选元素内部从前面追加内容或节点。

• after()

作用：在被选元素之后，作为兄弟元素插入内容或节点

$(selector).after(node);

• before()

作用：在被选元素之前，作为兄弟元素插入内容或节点

$(selector).before(node);

对于这些添加方法，node 可以是jq对象 或 标签字符串 或 DOM对象。

# 清空元素

$(selector).empty();
$(selector).html('');
$(selector).remove();  //会把自己也删除

# 复制元素

$(selector).clone();

# BOM 相关

• height()
• height(200)
• width()
• width(100) 取值类型为 num 可以直接参与运算

# 坐标值操作

• offset()
  • 作用：获取或设置元素相对于文档的位置
  • $(selector).offset();
  • $(selector).offset({left:100, top: 150});
• position()
  • 作用：获取相对于其最近的具有定位的父元素的位置。
  • $(selector).position();
  • 注意：只能获取，不能设置。
• scrollTop()
  • 作用：获取或者设置元素垂直方向滚动的位置
  • $(selector).scrollTop();
  • $(selector).scrollTop(100);

// 高度和宽度操作;
console.log($(".box").height()); // 100 盒子高度 ,不包括 padding  border
$(".box").height(200);

console.log($(".box").width()); // 100 盒子宽度 ,不包括 padding  border
$(".box").width(200);

// offset()
// 作用：获取或设置元素相对于文档的位置
// $(selector).offset();
// $(selector).offset({left:100, top: 150});

console.log("box相对于文档的位置 left", $(".box").offset().left); // 30
console.log("box相对于文档的位置 top", $(".box").offset().top); // 30
$(".box").offset({
	left: 60,
	top: 60,
});

console.log("innerbox相对于文档的位置 left", $(".inner-box").offset().left); // 30

// position()
// 作用：获取相对于其最近的具有定位的父元素的位置。
// 	$(selector).position();
// 注意：只能获取，不能设置。
console.log("innerbox position位置 left", $(".inner-box").position().left);
console.log("innerbox position位置 top", $(".inner-box").position().top);

// scrollTop()
// 作用：获取或者设置元素垂直方向滚动的位置
// 	$(selector).scrollTop();
// 	$(selector).scrollTop(100);

// scrollLeft()
// 作用：获取或者设置元素水平方向滚动的位置
// $(selector).scrollLeft(100);
$(".top").click(function() {
	console.log($(document.documentElement).scrollTop());
	// $(document.documentElement).scrollTop(0);
	$(document.documentElement).animate({
		scrollTop: 0,
	});
});

# 案例练习

• 固定导航栏

• 手风琴案例(防抖)

• 表格的增删改查

# on 方式绑定事件

• target.on(type,[selector],[data],fn); 在选择元素上绑定事件处理函数

• target：选择元素（jq 对象）

• type：事件类型

• selector：一个选择器字符串,用来过滤选定的元素（target 的后代）,如果省略,则 target 所有后代元素都会触发事件

• data：当一个事件被触发时要传递 event.data 给事件处理函数。可以省略。

• fn：该事件被触发时执行的函数。

# 事件委托

使用 on 方式，将事件委托给父级元素代理。

# off 解绑事件

• .off() 方法移除用.on()绑定的事件处理程序
• .off(); 解除所有绑定的事件
• .off('click'); 解绑所有绑定的 click 事件，元素本身的事件不会被解绑
• .off( 'click', “xx” );
• .off( 'click', “xx” ,fn);

# 事件对象 Event

• event.data 传递给事件处理程序的额外数据
• event.currentTarget 事件绑定的对象(事件源),和 this 相同
• event.pageX 鼠标相对于文档左部边缘的位置
• event.target 实际触发事件的对象，不一定===this
• event.stopPropagation()； 阻止事件冒泡
• event.preventDefault(); 阻止默认行为
• event.type 事件类型：click，mouseover…
• event.which 鼠标的按键类型：左 1 中 2 右 3
• event.keyCode 键盘按键代码

$(".box").click(function(event) {
	console.log("我是外部盒子");
	console.log(event);
	console.log("this", this);
	// currentTarget   this  指向一样 事件绑定的对象
	// target  实际触发的对象
	console.log("target", event.target);
	console.log("currentTarget", event.currentTarget);
});
$("input").keyup(function(event) {
	//    keycode 获取点击的 按键  回车===13
	console.log(event.keyCode);
	$("p").text($(this).val());
	// 敲回车背景色变成绿色
	if (event.keyCode == 13) {
		$("p").css("background-color", "green");
	}
});

# jQuery 补充

# 链式编程

• 链式编程原理：return this; 调用”任何”一个方法都是返回了对象本身
• 通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

$(".inner-box").click(function() {
	$(this)
		.css("width", "80px")
		.css("font-size", "40px")
		.parent()
		.css("width", "200px")
		.end()
		.css("background-color", "black");
	// 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。
});

# 隐式迭代

• 隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
• 如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

$(".btn").click(function() {
	console.log($(".box").text());
});

# each

• 大部分情况下是不需要使用 each 方法的，因为 jQuery 的隐式迭代特性。

• 如果要对每个元素做不同的处理，这时候就用到了 each 方法

• 作用：遍历 jQuery 对象集合，为每个匹配的元素执行一个函数

• $(selector).each(function(index,element){});

• Element 是一个 js 对象，需要转换成 jquery 对象

$("li").each(function(index, ele) {
	// ele  当前正在遍历的 dom对象
	// index 当前正在便利的dom对象   的下标
	console.log("index=====>", index);
	console.log("ele=====>", ele);
	// 下标大于3 的 绑定点击事件
	if (index > 3) {
		ele.onclick = function() {
			alert("点击事件");
		};
	}
});

# 多库共存

• 此处多库共存指的是：jQuery 占用了$ 和 jQuery 这两个变量。当在同一个页面中引用了 jQuery 这个 js 库，并且引用的其他库（或者其他版本的 jQuery 库）中也用到了$或者 jQuery 这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。
• $.noConflict();让 jQuery 释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用 jQuery 来调用 jQuery 提供的方法

# 插件机制

• jQuery 这个 js 库，虽然功能强大，但也不是面面俱到包含所有的功能。
• jQuery 是通过插件的方式，来扩展它的功能：
• 当你需要某个插件的时候，你可以“安装”到 jQuery 上面，然后，使用。
• 当你不再需要这个插件，那你就可以从 jQuery 上“卸载”它。

# 案例练习

• 五角星评分案例

• jq-color 插件使用

• lightBox 插件使用

• swiper 轮播插件使用

• Echarts 插件使用(数据可视化)