jQuery 常用API

一、jQuery 选择器

1.1 jQuery 基础选择器

原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。

1.2 jQuery 层级选择器

jQuery 设置样式

1.3 隐式迭代(重要)

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

1.4 jQuery 筛选选择器

1.5 jQuery 筛选方法(重点)

重点记住: parent() children() find() siblings() eq()

1.6 jQuery 里面的排他思想

想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。

1.7 链式编程

链式编程是为了节省代码量,看起来更优雅。

二、jQuery 样式操作

2.1 操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式。
1. 参数只写属性名,则是返回属性值
2. 参数是 属性名,属性值,逗号分隔, 是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号。
3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号

2.2 设置类样式方法

作用等同于以前的 classList,可以操作类样式, 注意操作类里面的参数不要加点。
1. 添加类
2. 移除类
3. 切换类

2.3 类操作与className区别

原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。

三、jQuery 效果

jQuery 给我们封装了很多动画效果,最为常见的如下:

3.1 显示隐藏效果

1. 显示语法规范

显示参数
(1)参数都可以省略, 无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
2.隐藏语法规范
隐藏参数:
(1)参数都可以省略, 无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
3.切换语法规范
切换参数:
(1)参数都可以省略, 无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
建议:平时一般不带参数,直接显示隐藏即可。

3.2 滑动效果

1. 下滑效果语法规范
下滑效果参数:
(1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
2. 上滑效果语法规范
上滑效果参数:
(1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
3. 滑动切换效果语法规范
滑动切换效果参数
(1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

3.3 事件切换

(1)over:鼠标移到元素上要触发的函数(相当于mouseenter)
(2)out:鼠标移出元素要触发的函数(相当于mouseleave)
(3)如果只写一个函数,则鼠标经过和离开都会触发它

3.4 动画队列及其停止排队方法

1. 动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
2. 停止排队
(1)stop() 方法用于停止动画或效果。
(2) 注意: stop() 写到动画或者效果的 前面, 相当于停止结束上一次的动画。

3.5 淡入淡出效果

1. 淡入效果语法规范
淡入效果参数:
(1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
2. 淡出效果语法规范
淡出效果参数:
(1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
3. 淡入淡出切换效果语法规范
淡入淡出切换效果参数;
(1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
4. 渐进方式调整到指定的不透明度
效果参数:
(1) opacity 透明度必须写,取值 0~1 之间。
(2) speed: 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。 必须写
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

3.6 自定义动画 animate

1. 语法:

2. 参数
(1) params: 想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft。 其余参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

四、jQuery 属性操作

4.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href ,比如 <input> 元素里面的 type。
1. 获取属性语法
2. 设置属性语法

4.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性,我们称为自定义属性。 比如给 div 添加 index =“1”。

1. 获取属性语法:

2. 设置属性语法
改方法也可以获取 H5 自定义属性

4.3 数据缓存 data()

data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。

1. 附加数据语法

2. 获取数据语法
同时,还可以读取 HTML5 自定义属性 data-index ,得到的是数字型

五、jQuery 内容文本值

主要针对元素的 内容 还有 表单的值 操作。
1. 普通元素内容 html()( 相当于原生inner HTML)
2. 普通元素文本内容 text() (相当与原生 innerText )
3. 表单的值 val()( 相当于原生value)

六、jQuery 元素操作

主要是 遍历 创建、 添加、删除元素操作。

6.1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历。
语法1:
1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
2. 里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个 DOM元素对象,不是jquery对象
3. 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象 $(domEle)
语法2:
1. $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
2. 里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容

6.2 创建元素

语法:

动态的创建了一个 <li>

6.3 添加元素

1. 内部添加

把内容放入匹配元素内部最 后面, 类似原生 appendChild。
把内容放入匹配元素内部最 前面。
2. 外部添加
① 内部添加元素,生成之后,它们是父子关系。
② 外部添加元素,生成之后,他们是兄弟关系。

6.4 删除元素

① remove 删除元素本身。
② empt() 和 html('''') 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。

七、jQuery 尺寸、位置操作

7.1 jQuery 尺寸

以上参数为空,则是获取相应值,返回的是数字型。
如果参数为数字,则是修改相应值。
参数可以不必写单位。

7.2 jQuery 位置

位置主要有三个: offset() 、position()、scrollTop()/scrollLeft()。
1. offset() 设置或获取元素偏移
① offset() 方法设置或返回被选元素相对于 文档 的偏移坐标,跟父级没有关系。
② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
③ 可以设置元素的偏移:offset({ top: 10, left: 30 });
2. position() 获取元素偏移
① position() 方法用于返回被选元素相对于 带有定位的父级 偏移坐标,如果父级都没有定位,则以文档为准。
② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离。
③ 该方法只能获取。
3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
① scrollTop() 方法设置或返回被选元素被卷去的头部。
② 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/755800.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

魔搭×函数计算:一键部署,缩短大模型选型到生产的距离

引言 面对魔搭 ModelScope 社区提供的海量模型&#xff0c;用户希望快速进行选型并生产使用起来&#xff0c;但在此之前&#xff0c;却一定会面临算力管理难、模型部署难等一系列问题&#xff0c;那么能否实现快速把选定的模型部署在云端功能强大的 GPU 上&#xff0c;由云端负…

详析中间人问题

详析中间人问题 正常情况 中间人 如何解决呢&#xff1f; 加证书 证书也有公钥和私钥 具体步骤如下&#xff1a; 1.服务器生成非对称密钥对 私钥和公钥的生成&#xff1a;服务器使用非对称加密算法&#xff08;如RSA、ECDSA&#xff09;生成一对密钥&#xff0c;包括一个私钥…

最新Java面试题2【2024初级】

下载链接&#xff1a;博主已将以上这些面试题整理成了一个面试手册&#xff0c;是PDF版的 互联网大厂面试题 1&#xff1a;阿里巴巴Java面试题 2&#xff1a;阿里云Java面试题-实习生岗 3&#xff1a;腾讯Java面试题-高级 4&#xff1a;字节跳动Java面试题 5&#xff1a;字…

安卓RecyclerView简单用法

废话不多说上代码 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.com/apk/res-auto"xmlns:tools"http://schem…

nuxt3项目总结

nuxt3项目总结 仓库 前言 大半年的时间&#xff0c;项目从秋天到春天&#xff0c;从管理后台到APP再到数据大屏&#xff0c;技术栈从vue3到uniApp再到nuxt3&#xff0c;需求不停的改&#xff0c;注释掉代码都快到项目总体的三分之一。 一、准备-搭建项目架子 1.1 创建一个…

弱电工程是什么意思

一、弱电工程的基本概念 智能建筑中的弱电主要有两类&#xff0c;一类是国家规定的安全电压等级及控制电压等低电压电能&#xff0c;有交流与直流之分&#xff0c;交流36V以下&#xff0c;直流24V以下&#xff0c;如24V直流控制电源&#xff0c;或应急照明灯备用电源。 另一类…

php沧州市人民医院患者就诊信息管理系统flask-django-nodejs-python

根据现实需要&#xff0c;此系统我们设计出一下功能&#xff0c;主要有以下功能模板。 前台功能&#xff1a;首页、流程图、门诊部、公告信息、后台管理。 用户功能&#xff1a;首页、个人中心、就诊预约管理、诊断信息管理、重新排号管理、检查信息管理、患者病历管理、处方信…

MediaBox音视频终端SDK已适配鸿蒙星河版(HarmonyOS NEXT)

2024年1月&#xff0c;HarmonyOS NEXT 鸿蒙星河版系统开发者预览版开放申请&#xff0c;该系统将只能安装为鸿蒙开发的原生应用&#xff0c;而不再兼容安卓应用。对此&#xff0c;阿里云MediaBox音视频终端SDK产品已实现功能的鸿蒙化迁移和重构&#xff0c;全面适配鸿蒙系统Har…

代码算法训练营day8 | 344.反转字符串、 541. 反转字符串II、卡码网:54.替换数字、151.翻转字符串里的单词、卡码网:55.右旋转字符串

day8:剩下的两题 151.翻转字符串里的单词卡码网&#xff1a;55.右旋转字符串 151.翻转字符串里的单词 题目链接 状态&#xff1a;不ok 文档&#xff1a;programmercarl.com 思路&#xff1a; 我们将整个字符串都反转过来&#xff0c;那么单词的顺序指定是倒序了&#xff0c;只不…

【2024.3.19练习】统计子矩阵

题目描述 题目分析 这道题一开始没有思路&#xff0c;使用蛮力枚举的方法时间复杂度为&#xff0c;显然超时。 参考题解后学会了化二维问题为一维问题&#xff0c;先使用的复杂度限制子矩阵的高度&#xff0c;再考虑列&#xff0c;这样就将子矩阵的和问题转变为了连续子序列的…

拿捏指针(三)

✨✨欢迎&#x1f44d;&#x1f44d;点赞☕️☕️收藏✍✍评论 个人主页&#xff1a;秋邱博客 所属栏目&#xff1a;C语言 &#xff08;感谢您的光临&#xff0c;您的光临蓬荜生辉&#xff09; 前言 在这之前我们学习了《拿捏指针&#xff08;一&#xff09;》&#xff0c;《拿…

重学SpringBoot3-函数式Web

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-函数式Web 函数式Web编程简介RouterFunctionRequestPredicateServerRequestServerResponse 好处示例结论 随着响应式编程范式的兴起和 Java 函数式编程能…

Spring之@Value注解

前言 Value注解在Spring的依赖注入中占据重要地位,这里对Value注解的作用进行演示以及扩展 作用 注入字符串注入属性注入bean其他 代码准备 创建两个普通的bean Component public class ValueComponent { } Component public class Foo {private String sign;public Foo…

day-24 不同路径

思路&#xff1a;动态规划&#xff0c;因为只能向下或向右移动&#xff0c;所以第一行和第一列的路径数皆为1&#xff0c;其余位置的路径数dp[i][j]dp[i-1][j]dp[i][j-1] 最后返回dp[m-1][n-1]即可 code: class Solution {public int uniquePaths(int m, int n) {int dp[][]n…

【通用知识】HttpServletRequest接口方法

一、前端知识概述 说明&#xff1a; 1、Headers和Payload为前端传给后端的请求头和请求参数信息。Preview和Response为后端返回的数据。 2、Payload标签内为前端传给后端的参数。其中&#xff0c;Query String Parameters中为问号传参&#xff0c;对应后端RequestParam方式&…

MNN createRuntime(二)

系列文章目录 MNN createFromBuffer&#xff08;一&#xff09; MNN createRuntime&#xff08;二&#xff09; MNN createSession 之 Schedule&#xff08;三&#xff09; MNN createSession 之创建流水线后端&#xff08;四&#xff09; MNN Session::resize 之流水线编码&am…

C# Onnx Yolov9 Detect 物体检测

目录 介绍 效果 项目 模型信息 代码 下载 C# Onnx Yolov9 Detect 物体检测 介绍 yolov9 github地址&#xff1a;https://github.com/WongKinYiu/yolov9 Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information …

软件工程-第6章 面向对象方法UML

UML是一种图形化语言&#xff0c;简称画图。 6.1 表达客观事物的术语 6.2 表达关系的术语 1.关联 表达关联语义相关术语&#xff1a;关联名、导航、角色、可见性、多重性、限定符、聚合、组合。 2.泛化 3.细化 6.3 组织信息的一种通用机制-包 6.4 模型表达工具 一个用况图包含6…

Springboot+Redis:实现缓存 减少对数据库的压力

&#x1f389;&#x1f389;欢迎光临&#xff0c;终于等到你啦&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;持续更新的专栏Redis实战与进阶 本专栏讲解Redis从原理到实践 …

【Vue3】走进Pinia,学习Pinia,使用Pinia

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…