JavaScript 库
jQuery 本质是 JavaScript 库(library)
JavaScript 库: 一个封装特定方法或函数的集合
常见的 JavaScript 库:
- jQuery
- Prototype
- YUI
- Dojo
- Ext JS
- 移动端的 zepto
jQuery 基本使用
jQuery 库包含以下功能：
- HTML 元素选取及操作
- HTML 事件函数
- CSS 操作
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
jQuery 版本
文档就绪事件是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作
$(function(){
... // 此处是页面 DOM加载完毕的入口
});
// 等价
$(document).ready(function(){
...
});
相当于原始 JS 中的 DOMContentLoaded
不同于原生的 JS 中 load 事件
$ 是 jQuery 的顶级对象，它代指 jQuery
jQuery(function(){
... // 此处是页面 DOM加载完毕的入口
});
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作
基础语法：
$(selector).action()
- 美元符号定义 jQuery
- 选择器 selector: “查询”和”查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
选择器基于已经存在的 CSS 选择器，适用于大多数 CSS 选择器书写只需要以字符串形式
常用: 全选择器, ID 选择器, 类选择器, 标签选择器, 并集选择器, 交集选择器, 子选择器, 后代选择器 …
比如：
$('.name');
$('#user');
$('div');
$('div span');
$("ul li:first-child");
注意：jQuery 对象只能使用 jQuery 方法，DOM 对象使用原生的 JavaScript 属性或方法
jQuery 对象 与 DOM 对象 转换
$(DOM对象);
jQuery对象[index];
// 或
jQuery对象.get(index);
jQuery 常用 API
jQuery 设置样式
$(selector).css('属性', '值');
$(selector).css('属性'); // 不给值，就是单纯返回对应值
多属性赋值，可以以对象形式传入
$(selector).css({
width: 400,
height: 400
});
设置类样式方法:
- addClass(“className”): 添加
- removeClass(“className”): 移除
- toggleClass(“className”): 切换
className 类名，不需要 .
不影响原本的类名，与原生 JS 不同
筛选选择器:
:first: 获取第一个元素:last: 获取最后一个元素:eq(index): 指定索引号 index 的元素:odd: 索引号为奇数的元素:even: 索引号为偶数的元素
筛选方法:
- parent(): 查找父元素
- children(selector): 查找子元素
- find(selector): 查找后代元素
- siblings(selector): 查找同级元素，不包括自身
- nextAll([expr]): 查找当前元素之后的同级元素
- prevtAll([expr]): 查找当前元素之前的同级元素
- hasClass(class): 检查当前元素是否含有某种特定的类名，有返回 true
- eq(index): 使用 index 检索
隐式迭代: 自动遍历内部【伪数组形式存储】 DOM 元素的过程
链式编程
$("button").css("color", "red").siblings().css("color", "blue");
显示隐藏
- show()
show([speed,[easing], [fn]])
- 参数都可以省略
- speed: 动画时长(ms), 预设速度 (“slow”, “normal”, “fast”)
- easing: 指定切换效果，默认 “swing”, 可用参数 “linear” 匀速
- fn: 回调函数
- hide()
hide([speed,[easing], [fn]])
- toggle()
toggle([speed,[easing], [fn]])
- slideDown()
slideDown([speed,[easing], [fn]])
- slideUp()
slideUp([speed,[easing], [fn]])
- slideToggle()
slideToggle([speed,[easing], [fn]])
事件切换
- hover()
hover([over,] out)
- over: 鼠标移到元素上触发
- out: 鼠标离开元素上触发
动画排队
- stop(): 停止上一次动画
淡入淡出
- fadeIn(): 淡入
fadeIn([speed,[easing], [fn]])
- fadeOut(): 淡出
fadeOut([speed,[easing], [fn]])
- fadeToggle(): 切换
fadeToggle([speed,[easing], [fn]])
- fadeTo(): 透明度修改
fadeTo([speed, opacity, [easing], [fn]])
- opacity: 透明度 (0 ~ 1)
自定义动画
- animate()
animate(params, [speed, [easing], [fn]])
- params: 想要修改的样式属性，以对象形式传入 注意：属性名不可以带引号，如果是复合属性使用小驼峰命名法
类似 css 样式获取
自带元素属性
- prop(“属性”): 获取
- prop(“属性”, “属性值”): 设置
自定义元素属性
- attr(“属性”): 获取
- attr(“属性”, “属性值”): 设置
数据缓存 data(): 可以在指定元素上存取数据，并不会修改 DOM 元素架构
页面刷新，数据将被移除
- data(“name”): 获取
- data(“name”, “value”): 存储
同时可以获取 HTML5 自定义属性 data-index 得到的是数字型
- 普通元素内容 html(): 等价原生 inner HTML
- 普通元素文本内容 text(): 等价原生 inner Text
- 表单的值 val(): 等价原生 value
遍历元素 each(fn(index, domEle)(){…})
- each() 方法遍历匹配每一个元素
- 回调函数 fn 中两个参数 index 索引号，domEle 是每个 DOM 元素对象
- 使用 jQuery 方法，需要给这个 dom 元素转化为 jQuery 对象
遍历元素另一种方法使用 $.each(对象, fn) 方法，可以遍历任何对象
$("HTML 标记语句");
let li = $(" xxx "); // 创建元素
- 内部添加: 父子
- append(elem): 添加元素 elem 内部最后面
- prepend(elem): 添加元素 elem 内部最前面
- 外部添加: 兄弟
- before(): 前
- after(): 后
/**
*
* \\ xxx 添加
*
*/
let li = $(" xxx "); // 创建元素
$("ul").append(li);
- element.remove(): 删除元素本身
- element.empty(): 删除匹配元素所有子元素
-
element.html(“”): 清空匹配元素
-
width()/height()
- innerWidth()/innerHeight(): 包含 padding
- outerWidth()/outerHeight(): 包含 padding, border
- outerWidth(true)/outerHeight(true): 包含 padding, border, margin
注意：
- 参数为空，只是读其对应值
- 参数为数字，即对应数字修改
- 参数不用单位
设置：传入对象即可
jQuery 事件
语法：
element.事件(function(){})
on() 方法在匹配元素上绑定一个或多个事件处理函数
element.on(events, [selector], fn)
- events: 1~n 个用空格分隔的事件类型
- selector: 元素的子元素选择器
- fn: 回调函数
$(selector).on({
mouseover: function(){},
click: function(){}
});
// 如果事件处理程序相同
$(selector).on("mouseover click", function(){
... // 事件处理程序
});
on() 方法可以实现事件委派
事件委派：把原来给子元素的事件绑定到父元素上
$("ul").on("click", "li", function(){
... // 事件处理程序
});
// "li" 起到触发作用，"click" 是绑定在 "ul" 上
on() 方法 可以为动态创建的元素绑定事件
off() 方法可以解绑事件，移除on() 方法绑定的事件处理程序
$(selector).off(); // 解绑所有事件
$(selector).off("click"); // 解绑指定事件
$(selector).off("click", "li"); // 解绑事件委托
如果只执行一次，使用 one() 绑定事件
自动触发事件 trigger()
element.click(); // 简写
element.trigger("type"); // 会触发元素默认行为
element.triggerHandler(type); // 不会触发元素默认行为
事件被触发，就会有事件对象产生
element.on(events, [selector], function(event){})
event 事件对象
- preventDefault(): 阻止默认行为
- stopPropagation(): 阻止冒泡
jQuery 其它方法
使用 $.extend() 方法
$.extend([deep], target, object, [objectN])
// object --> target
- deep: 拷贝模式，true 为深拷贝，默认 false 浅拷贝
- target: 目标对象
- object: 待拷贝对象
- objectN: 其它拷贝对象
注意：
- 拷贝会覆盖原有内容
使用不同库， $ 可能存在冲突
解决方案
- 方案一:
$–>jQuery - 方案二: jQuery 变量规定新的名称: $.noConfict()
var xx = $.noConfict();
插件网址：
图片懒加载：只显示可视部分的图片，减少服务器的压力，推荐插件实现
全屏滚动: fullpage.js
Original: https://www.cnblogs.com/shadow-/p/16558862.html
Author: shadow_D
Title: jQuery 基础
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/564478/
转载文章受原作者版权保护。转载请注明原作者出处！