首页 > 其他分享> > jQuery 基础

jQuery 基础

2022-08-07 13:03:16 作者：互联网

jQuery 基础

jQuery 入门

JavaScript 库

jQuery 本质是 JavaScript 库(library)

JavaScript 库: 一个封装特定方法或函数的集合

常见的 JavaScript 库:

jQuery
Prototype
YUI
Dojo
Ext JS
移动端的 zepto

jQuery 基本使用

jQuery 库包含以下功能：

HTML 元素选取及操作
HTML 事件函数
CSS 操作
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

jQuery 版本

1x: 兼容 IE 678 等低版本浏览器，不再维护
2x: 不兼容 IE 678 等低版本浏览器，不再维护
3x: 不兼容 IE 678 等低版本浏览器，目前维护

jQuery 的入口函数

文档就绪事件是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作

$(function(){
    ...         // 此处是页面 DOM加载完毕的入口
});

// 等价
$(document).ready(function(){
    ...
});

相当于原始 JS 中的 DOMContentLoaded

不同于原生的 JS 中 load 事件

$ 是 jQuery 的顶级对象，它代指 jQuery

jQuery(function(){
    ...         // 此处是页面 DOM加载完毕的入口
});

jQuery 语法

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

CSS 相关

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");

jQuery 效果

显示隐藏

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: 想要修改的样式属性，以对象形式传入
  
  注意：属性名不可以带引号，如果是复合属性使用小驼峰命名法

jQuery 控制元素属性

类似 css 样式获取

自带元素属性

prop("属性"): 获取
prop("属性", "属性值"): 设置

自定义元素属性

attr("属性"): 获取
attr("属性", "属性值"): 设置

数据缓存 data(): 可以在指定元素上存取数据，并不会修改 DOM 元素架构

页面刷新，数据将被移除

data("name"): 获取
data("name", "value"): 存储

同时可以获取 HTML5 自定义属性 data-index 得到的是数字型

jQuery 控制元素内容

普通元素内容 html(): 等价原生 inner HTML
普通元素文本内容 text(): 等价原生 inner Text
表单的值 val(): 等价原生 value

jQuery 控制元素操作

遍历元素 each(fn(index, domEle)(){...})

each() 方法遍历匹配每一个元素
回调函数 fn 中两个参数 index 索引号，domEle 是每个 DOM 元素对象
使用 jQuery 方法，需要给这个 dom 元素转化为 jQuery 对象

遍历元素另一种方法使用 $.each(对象, fn) 方法，可以遍历任何对象

创建元素

$("HTML 标记语句");

let li = $("<li> xxx </li>");   // 创建元素

内部添加: 父子
- append(elem): 添加元素 elem 内部最后面
- prepend(elem): 添加元素 elem 内部最前面
外部添加: 兄弟
- before(): 前
- after(): 后

/**
 * <ul>
 *     \\ <li> xxx </li> 添加
 * </ul>
*/

let li = $("<li> xxx </li>");   // 创建元素
$("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

注意：

参数为空，只是读其对应值
参数为数字，即对应数字修改
参数不用单位

位置

offset(): 相对于文档的偏移数值
pasition(): 带有定位的父级偏移数值
scrollTop()/scrollLeft(): 对于滚动条，卷去的数值

设置：传入对象即可

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);   // 不会触发元素默认行为

jQuery 事件对象

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

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();
```

jQuery 插件

插件网址：

图片懒加载：只显示可视部分的图片，减少服务器的压力，推荐插件实现

全屏滚动: fullpage.js

标签：jQuery,元素,基础,selector,事件,选择器,fn
来源： https://www.cnblogs.com/shadow-/p/16558862.html