jQuery

1、javascript 库

​ javascript 库即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了许多预先定义好的函数。

​ 常见的 javascript 库：

  • jQuery
  • Prototype
  • YUI
  • Dojo
  • Ext js
  • 移动端的 zepto

2、jQuery概述

​ 优点：轻量，跨浏览器兼容，链式编程、隐式迭代，扩展性强等。

3、jQuery 入口函数

​ 等待页面 DOM 加载完毕再执行 js 代码，相当于原生 js 中的 DOMContentLoaded

$(document).ready(function() {
    ...
})

// 或

$(function() {
    ...
})

4、jQuery 顶级对象

​ （1）$ 是 jQuery 的别称，在代码汇总可以使用 jQuery 代替 $

​ （2）$ 是 jQuery的顶级对象，相当于原生 js 中的 window

5、jQuery 对象和 DOM 对象

​ DOM 对象：用原生 js 获取的对象

​ jQuery对象：用 jQuery 获取的对象，本质是对 DOM 对象的封装

​ 注：两种不同的对象只能使用各自对应的属性和方法

6、jQuery 对象和 DOM 对象的互相转化

var div = document.querySelector('div');
$(div).hide();	// 此时就已经转化为 jQuery 对象


// 使用索引转化为 DOM 对象
$('video')[0].play();
$('video').get(0).play();

7、jQuery 基本和层级选择器

$('选择器') // 填入 CSS 选择器即可

8、jQuery 隐式迭代

​ 遍历内部 DOM 元素（伪数组存储）的过程就叫做隐式迭代。

​ 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用手动再进行循环，简化我们的操作，方便我们调用。

// 使用 jq 获取多个 div 元素
var divs = $('div');

// 将它们的背景都设为天蓝色，这里就是隐式迭代
divs.css('background', 'pink');

9、jQuery 筛选选择器

语法用法描述
:first$('li:first')获取第一个 li 元素
:last$('li:last')获取最后一个 li 元素
:eq(index)$('li:eq(index)')获取到的 li 元素中，选择索引为 2 的元素，索引从 0 开始
:odd$('li:odd')获取到的 li 元素中，选择索引号为奇数的元素
:even$('li:even')获取到的 li 元素中，选择索引号为偶数的元素
:checked$('input:checked')获取到的 input 元素中，选择被选择的表单元素

10、jQuery 筛选方法

语法用法说明
parent()$('li').parent()查找父级
children(selector)$('li').children()相当于$('ul>li')，最近一级
find(selector)$('ul').find('li')相当于$('ul li')，后代选择器
siblings(selector)$('.first').siblings('li')查找兄弟节点，不包括自己
nextAll([selector])$('.first').nextAll()查找当前元素之前的同辈元素
prevAll([selector])$('.last').prevAll()查找当前元素之后的同辈元素
hasClass(className)$('div').hasClass('protected')检查当前的元素是否含有某个特定的类，如果有，返回 true
eq(index)$('li').eq(2)相当于$('li:eq(2)')
parents()$('div').parents()返回指定选择器条件的父级，无参数返回所有父级

​ 注：更推荐使用 eq(index) 的写法，因为 index 为变量时不需要字符串转化

​ 注：获取元素当前索引号可使用 $(this).index()

11、jQuery 链式编程

$(this).css('color', 'blue');
$(this).siblings().css('color', '');

// 可简写为：

$(this).css('color', 'blue').siblings().css('color', '');

12、jQuery 样式操作

（1）操作 CSS 方法
// 参数只写属性名，则返回值
returnVal = $(this).css('color');

// 参数是属性名，属性值；则是设置属性
$(this).css('color', 'blue');

// 参数可以是对象形式，可设置多组样式
$(this).css({
    backgroundColor: "skyblue",
    "font-size": "20px",
    width: 200,
    height: 200,
})
（2）设置类样式
$('div').addClass('current');		// 添加类名

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

$('div').toggleClass('current');	// 切换类，无则添加，有则删除

​ 注：jQuery 的类操作与原生 JS 的不同在于：只是对指定类操作，不会影响其他类名

13、jQuery 效果

（1）显示隐藏效果
// 显示效果语法规范，其他类似
$('div').show([speed, [easing], [callback]]);

...
$('div').hide(...)
$('div').toggle(...)

​ 注：参数都可省略，即无动画直接显示

​ a. speed：三种预定速度之一的字符串（"show"，"normal"，"fast"）或动画时长的毫秒数值（如：1000）

​ b. easing：（Optional）用来指定切换效果，默认为 "swing"，可用参数 "linear"

​ c. callback：回调函数，动画完成时执行的函数，每个元素执行一次。

（2）滑动效果
$('div').slideUp(speed, callback);

...
$('div').slideDown(speed, callback);
$('div').slideToggle(speed, callback);

// 参数含义与显示隐藏效果类似
（3）事件切换
// 此时经过触发 fn1, 离开触发 fn2
$('div').hover(fn1, fn2);

// 此时经过和离开都只触发 fn
$('div').hover(fn);
（4）停止动画排队函数

​ a. 动画或动画队列及其停止排队方法

​ 动画或者效果一旦触发就会执行，如果短时间内触发多个动画或效果，将会造成它们的同时执行。

​ 解决方法：

$('div').stop()...[后面跟动画效果]

// ep:
$('div').hover(function() {
    $(this).children('ul').stop().slideToggle(200);
})

​ 关于 stop() 函数：

参数描述
stopAll可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

​ 对应四种情况：

​ stop(true)等价于stop(true,false): 停止被选元素的所有（包括当前动画）加入队列的动画。

​ stop(true,true): 停止被选元素的所有加入队列的动画，但允许完成当前动画。

​ stop()等价于stop(false,false): 停止被选元素当前的动画，但允许完成以后队列的所有动画。

​ stop(false,true): 立即结束***当前的动画*** 到最终效果，然后完成***以后队列*** 的所以动画。

（5）淡入淡出效果
fadeIn([speed, easing], [callback]);
fadeOut(...);
fadeToggle(...);

fadeTo([speed], opacity, [easing], [callback]);
（6）自定义动画效果
animate(params, [speed], [easing], [callback]);

// 示例：
$('div').animate({
    left: 200px,
    right: 100px
}, fast, linear)

​ 参数说明： params：想要更改的样式属性，必须写，以对象形式传递。符合属性使用驼峰命名法。

​ 其他参数类似上面的函数。

14、jQuery 属性操作

// 获取固有属性或设置
$('div').prop('width');
$('div').prop('width', 200);

// 获取自定义属性值
$('div').attr('index');
$('div').attr('index', 2);

// 设置元素数据缓存，注意数据缓存是不在 DOM 树中体现的
$('div').data('name', 'melodyEcho');

// 获取元素 h5 新 data 类属性
// 如获取 属性 data-index:
$('div').data('index');
15、jQuery 获取内容文本值
// 获取设置元素内容，类似 innerHTML
$('div').html();
$('div').html('<a href="glowmem.com">点击</a>')

// 获取设置元素文本内容，类似 innerText()
$('div').text();
$('div').text('只是一段文本内容');

// 获取设置表单值
$('input').val();
$('input').val(32);

16、jQuery 元素操作

（1）jQuery 遍历对象 each 方法
// 写法
$('div').each(function(index, domEle) { xxx; });


// 示例：
var colorArr = ['red', 'green', 'blue'];
$('div').each(function(i, domEle) {
    console.log(i);	// 打印索引
    
    // 注意返回的是 dom 对象，要进行转化
    $(domEle).css('color', arr[i]);
})
（2）jQuery 遍历处理数据

​ $.each() 主要用于遍历元素中的数据值，如获取数组或对象中的数据

// 写法
$.each(object, function(index, element) { xxx });

// 示例：
// 遍历数组：
arr = [1, 2, 3]
$.each(arr, function(i , val) {
    console.log(i);
    console.log(val);
})
// 遍历对象：
$.each({
    name: "melodyEcho",
    age: 18
}), function(i, val) {
    console.log(i);		// 输出属性名
    console.log(val);	// 输出属性值
}
（3）创建、添加和删除元素
// 创建元素
var span = $('<span>创建的一个 span 元素</span>');
var p = $('<p>创建的 p 元素</p>');

/* 添加元素 */
// 内部添加
$('div').append(span, p);
$('div').prepend(span, p);

// 外部添加（同级）
$('div').before(p, span);
$('div').after(p, span);

// 删除元素
$('div').remove();
$('ul').empty()		// 删除内部所有子节点
$('ul').html('');	// 也是删除内部所有子节点

17、jQuery尺寸、位置操作

（1）尺寸
语法用法
width() / height()只计算 width、height
innerWidth() / innerHeight()含 padding
outerWidth() / outerHeight()含 padding、border
outerWidth(true) / outerHeight(true)含 padding、border、margin
（2）位置

​ 1. Offset 方法

$('div').offset();

$('div').offset({
    top: 10,
    left: 30
})

​ 注：a. offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系

​ b. 该方法有 2 个属性：left、top，可直接使用 offset.top() 或 offset.left()

​ c. 可用于设置元素偏移

​ 2. position 方法

$('div').position();

​ 注：a. 用于返回被选择元素相对于带有定位的父级偏移坐标

​ b. 不能用于设置偏移

​ 3. scrollTop、scrollLeft 方法

console.log(window.scrollTop());

18、jQuery 事件

（1）事件注册

​ 1. 单个事件注册方式：

// 这种方式一次只能注册一个事件
$('div').click(function() {
    $(this).css('backgroundColor', 'skyblue');
})

​

​ 2. 使用 on() 方法

$('div').on(events, [selection], fn);

​ events：一个或多个事件分隔的事件类型，如 "click keydown"

​ selector：元素的子元素选择器

​ fn：回调

// 传入对象参数
$('div').on({
    mouseenter: function() {
        $(this).css('background', 'skyblue');
    },
    click: function() {
        $(this).css('background', 'pink');
    }
})

// 普通方式
$('div').on('mouseenter click', function() {
    $(this).toggleClass('current');
})

​ 使用 on 方法实现事件委派（委托）：

// 注意：事件绑定在了 ul 上，由 li 来冒泡触发
$('ul').on('click', 'li', function() {
    alert('你点击了 li!')
})

​ 使用 on 方法的事件委派，可对后来动态添加元素绑定事件

// 后来动态添加的 li 依然可以触发事件
$('ol').on('click', 'li', function() {
    alert('你点击了 li!')
})
$('ol').append($('<li>一个 li 元素</li>'));

​ 综上：on 方法的优势：可实现对多个事件响应的统一定义，可实现事件委派，又可通过事件委派来实现动态元素的事件。

（2）事件解绑

​ 使用 off() 方法

$('p').off();			// 解绑所有事件处理程序
$('p').off('click');		// 解绑点击事件
$('p').off('click', foo)	// 移除指定侦听函数的事件
$('ul').off('click', li)	// 解除以 ul 委托的，li 的事件

​ 事件若只触发一次，可使用 one() 方法

$('p').one('click', function() {
    alert('Hello World!');
})

Q.E.D.

f"{言语过于单薄，于此引用心声}"