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"{言语过于单薄,于此引用心声}"