jQuery 基本语法手册 – PUJI 实验室

概述

什么是 jQuery

JavaScript 库是一个封装好的特定集合，包含了属性与方法，从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面。

jQuery 是一个快速、简洁的 JavaScript库，快速方便的操作 DOM，里面基本都是函数（方法）。倡导写更少的代码做更多的事。

jQuery 的优点

轻量级，核心文件才几十kb，不会影响页面加载速度
跨浏览器兼容，基本兼容了现在主流的浏览器
链式编程，隐式迭代
对事件、样式、动画支持，大大简化了 DOM 的操作
支持插件扩展开发，有着丰富的第三方插件
免费，开源

jQuery 的基本使用

引用 jQuery

下载 jQuery 文件并引入需要使用网页中。

<script src="jquery.min.js"></script>

// 等待 DOM 元素加载完成后执行 js 代码，相当于 js 原生中的 DOMContentLoaded

// 方法 1
$(document).ready(function () {
  ...
})

// 方法 2 (推荐)
$(function () {
  ..
})

jQuery 对象声明

$ 是 jQuery 的别称，在代码中可以使用 $ 或 jQuery 两种形式，为了更方便通常使用 $ 。把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法。

jQuery 对象与 DOM 对象

DOM 对象是用原生 JS 获取来的，使用 jQuery 方式获取的元素就是 jQuery 对象。jQuery 对象利用 $ 对 DOM 对象包装后产生的对象（伪数组形式存储）。jQuery 对象只能使用 jQuery 的方法。DOM 对象只能使用原生 JS 的属性和方法。

// jQuery 获取对象的方法
$('div');

jQuery 对象与 DOM 对象相互转换

因为原生 JS 比 jQuery 功能更多，一些原生 JS 的属性和方法 jQuery 并没有给我们封装，想要使用这些属性和方法需要把 jQuery 对象转换为 DOM 对象才能使用。

// 直接声明得到就是 jQuery 对象
$('div');

// 将 DOM 对象转换为 jQuery 对象
var div = document.querySelector('div');
$(div);

// jQuery 对象转换为 DOM 对象 ( 将 jQuery 对象转换为数组形式，然后使用 DOM 中的属性和方法，其中括号内的数字是索引号 )
$('div');
$('div')[0]; 或 $('div')get(0);

jQuery编程特点

隐式迭代

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。简单的说，就是给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化操作，方便调用。

// html 代码
<div>1</div>
<div>2</div>
<div>3</div>

// js 代码
$('div').css('background-color', 'blue');

// 以上过程，jQuery 给匹配到的所有元素进行了循环遍历并执行相同的属性

链式编程

链式编程是为了节省代码量

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

jQuery 选择器

类似原生 JS 的各种获取元素的方法，如 getElementById / querySelector 等，jQuery 提供了一种统一的获取元素标准 “$(‘选择器名称’)”。

基本方式

// 语法结构
$('选择器'); 

// 不同类型示例
$('#id'); // ID选择器，获取指定ID的元素
$('*'); // 全选选择器，匹配所有元素
$('.class'); // 类选择器，获取同一类名的元素
$('div'); // 标签选择器，获取同一类型标签的所有元素
$('div,p,li'); // 并集选择器，获取多个元素
$('li.current'); // 交集选择器
$('ul>li') // 子代选择器
$('ul li') // 后代选择器

筛选选择器

$('li:first'); // 获取第一个 li 元素
$('li:last'); // 获取最后一个 li 元素
$('li:eq(2)'); // 获取到的 li 元素中，选择索引 (index)号为2的元素，索引号从0开始
$('li:odd'); // 获取到的 li 元素中，选择索引号为奇数的元素
$('li:even'); // 获取到的 li 元素中，选择索引号为偶数的元素

父子元素选取

$('li').parent(); // 查找父级
$('li').parents('目标'); // 指定目标向上查找
$('ul').children('li'); // 相当于 $('ul > li');
$('ul').find('li'); // 相当于 $('ul li');
$('.first').siblings('li'); // 查找兄弟节点，不包含自己本身
$('.first').nextAll(); // 查找当前元素之后所有的同级元素
$('.last').prevAll(); // 查找当前元素之前的所有的同级元素
$('div').hasClass('main'); // 检查当前的元素是否含有某个特定的类，如果有，则返回 true
$('li').eq(2); // 相当于 $('li:eq(2)')

修改样式

$(this).css('color'); // 返回属性值
$(this).css('color','blue'); // 修改行内样式
$('div').css({
    'width': '300px',
    'height': '300px',
    'background-color': 'blue'
}); // 修改多个行内样式

操作类名

$(this).addClass('current'); // 添加类名
$(this).removeClass('current'); // 删除类名
$(this).toggleClass('current'); // 切换类名，如果没有就加上，如果有就删除
$(this).hasClass('current'); // 判断是否有此类名，如果有返回 true

常用事件

$(this).click();
$(this).mouseover();
$(this).mouseout();
$(this).mouseenter();
$(this).mouseleave();
$(this).hover([over,]out);
$(this).change();

其他常用方法

$(this).index(); // 获取当前元素索引号
$(this).substr(); // 截取字符串
$(this).toFixed(); // 保留小数点后几位数

属性操作

// 操作内置属性
$(this).prop('属性名'); // 获取属性值
$(this).prop('属性名','属性值') // 设置属性

// 操作自定义属性 ( 包括H5自定义属性 )
$(this).attr('属性名'); // 获取自定义属性值
$(this).attr('属性名','属性值') // 设置自定义属性

// 数据缓存 (数据是存放在元素的缓存里，不会在 DOM 中显示)
$(this).data();

// 获取 H5 自定义属性 (以下两种写法都可以获取 H5 自定义属性，前一种需写上 data- , 后一种可以不用写，返回的值前者是字符串型，后者是数字型 )
$(this).attr('data-index');
$(this).data('index');

内容操作

// 类似原生 innerHTML
$(this).html(); // 获取内容
$(this).html('内容字符'); // 替换内容

// 类似原生 innerText
$(this).text();
$(this).text('内容字符');

// 类似原生 value
$(this).val();
$(this).val('内容字符');

遍历元素与数据

遍历元素

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

$(this).each(function (index, domEle) {
  ...
})

each() 方法遍历匹配的每一个元素。主要用 DOM 处理。
回调函数有2个参数第一个 index 是每个元素的索引号，名称可以自定义，如 index , i 等
domEle 是每个 DOM 元素对象而不是 jQuery 对象。
所以想要使用 jQuery 方法，需要给这个 DOM 元素转换为 jQuery 对象 $(domEle)

// 示例
<div>1</div>
<div>2</div>
<div>3</div>

var arr = ['red', 'green', 'blue'];
$('div').each(function(i, domEle) {
    $(domEle).css('color', arr[i]);
})

遍历数据

$.each() 和 each() 同样都可以遍历对象，但 $.each() 还可以遍历数据 ( 数组或对象 )

$.each(&(arr), function(i, value) {
  ...
})

操作元素

创建元素

$('<div></div>');

添加元素

内部添加

// 将元素放入匹配元素内部的最后面，类似原生 appendChild
$(this).append();

// 将元素放入匹配元素内部的最前面
$(this).prepend();

var div = $('<div></div>');
$('.test').append(li);

外部添加

// 将元素放在匹配元素同级的前面
$(this).before();

// 将元素放在匹配元素同级的后面
$(this).after();

删除元素

// 删除匹配的元素（本身）
$(this).remove();

// 删除匹配的元素集合中所有的子节点
$(this).empty();

// 清空匹配的元素内容
$(this).html('');

获取元素类型

$(this).get(0).tagName; // 0 为序号
$(this).prev().prop('tagName');

尺寸操作

// 取得匹配元素宽度、高度值（只包含 width / height）
width() / height()

// 取得匹配元素宽度、高度值（包含 padding）
innerWidth() / innerHeight()

// 取得匹配元素宽度和高度值（包含padding、border）
outerWidth() / outerHeight()

//取得匹配元素宽度和高度值（包含padding、border、margin）
outerWidth(true) / outerHeight(true)

位置操作

// 设置或返回被选元素相对于文档的偏移坐标
offset()

// 返回被选元素相对于带有定位的父级元素偏移坐标（只读）
position()

// 设置或返回被选元素被卷去的头部和左侧
scrollTop() / scrollLeft()

内置动画效果

show(); // 显示
hide(); // 隐藏
toggle(); // 切换显示或隐藏

slideDown(); // 下拉滑动
slideUp(); // 上拉滑动
slideToggle(); // 上下滑动切换

fadeIn(); // 淡入
fadeOut(); // 淡出
fadeToggle(); // 淡入淡出切换
fadeTo(); // 修改元素的透明度

// 自定义动画
animate(params, [speed [, easing] [, fn]]);

params：想要更改的样式属性，以对象形式传递，必填。

停止动画排队

当一组元素同时执行多个动画的时候，会影响交互效果，使用 stop() 方法可以立即结束之前的动画后再执行新的动画。

stop();
// stop()方法必须写在动画的前面

$(this).children('ul').stop().slideToggle();

事件

目标

能够说出4种常见的注册事件
能够说出 on 绑定事件的优势
能够说出 jQuery 事件委派的优点以及方式
能够说出绑定事件与解绑事件

事件处理

on() 绑定事件

可以同时处理一个或者多个事件与多个处理事件的处理程序。

$(this).on(events, [selector, ] fn)
// event: 一个或多个用空格分隔的事件类型，如'click'或'keydown'
// selector: 元素的字元素选择器
// fn: 回调函数 即绑定在元素身上的侦听函数

$(this).on('mouseenter mouseleave', function() {
  $(this).toggleClass('current');
})

$(this).on({
  mouseenter: function() {},
  click: function() {}
});

on() 绑定事件同时还可以实现事件的委派操作，事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上。

// click事件绑定在ul上，但触发的对象是在他子元素li
$('ul').on('click', 'li', function() {
  ..
})

未来动态创建的元素，click() 没有办法绑定事件，on() 可以给动态生成的元素绑定事件

off() 解绑事件

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

$(this).off(); // 解除该元素的所有事件
$(this).off('event'); // 解除该元素里的指定的事件
$(this).off('event','childeElement') // 解除事件委托

one() 单次事件

如果有的事件只想触发一次，可以使用 one() 来绑定事件，即该事件执行后就进行解绑。

trigger() 自动触发事件

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

// 方法 1 ( 简写形式 )
$(this).on('click',function() {
  ..
})
$(this).click();

// 方法 2
element.trigger('type')

$(this).on('click',function() {
  ..
})
$(this).trigger('click');

// 方法 3 （不会触发元素的默认行为）
element.triggerHandler('click')

$(this).on('click',function() {
  ..
})
$(this).triggerHandler('click');

事件对象

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

element.on(events, [selector, ] function(event) {})

拷贝对象

如果想要把某个对象拷贝（合并）给另一个对象使用，此时可以使用 $.extend()方法

$.extend([deep], target , object1, [objectN])
deep: 如果设为true为深拷贝，默认为 false
target 要拷贝的目标对象
object1 需要拷贝对象到的对象

参考链接

中文手册:
https://jquery.cuishifeng.cn/

Bilibili 视频教程：
https://www.bilibili.com/video/BV1a4411w7Gx

https://blog.csdn.net/w36680130/article/details/107517805