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.mfbz.cn/a/469222.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

算法打卡day21|回溯法篇01|理论知识,Leetcode 77.组合

回溯法理论知识 回溯法也可以叫做回溯搜索法&#xff0c;它是一种搜索的方式。回溯是递归的副产品&#xff0c;只要有递归就会有回溯。所以回溯函数也就是递归函数&#xff0c;指的都是一个函数。 回溯法的效率 回溯法并不是什么高效的算法。因为回溯的本质是穷举&#xff0c;…

打靶记录(个人学习笔记)

一、信息收集 1、主机发现 通过nmap对此网段进行扫描&#xff0c;可以确定靶机ip为192.168.189.144 2、端口扫描 确定了靶机ip之后&#xff0c;我们来扫描端口 发现80端口开放&#xff0c;先访问80端口 用插件识别出一些信息 Wappalyzer插件获得信息&#xff1a;Web服务&am…

jquery 列表框可以手动修改(调用接口修改)

类似于这种 直接上代码 列表框 <td>//目的主要是获取属性名的(要更改的属性名) 在下面juqery的这一行(var field $(thisobj).prev(input).attr(name);)有体现<input type"hidden" name"voyage" value"${M_PSI_PERIOD_INFO.port}">…

卓越巨人wzy

解法&#xff1a; 向下取整同理&#xff0c;f(n)20230416-n 当n20230416时&#xff0c;f&#xff08;n&#xff09;0&#xff0c;之后由于向上取整&#xff0c;结果恒为0. #include<iostream> #include<algorithm> #include<vector> using namespace std; …

关系型数据库mysql(1)基础认知和安装

目录 一.数据库的基本概念 1.1数据 1.2表 1.3数据库 1.4 DBMS 数据库管理系统 1.4.1基本功能 1.4.2优点 1.4.3DBMS的工作模式 二.数据库的发展历史 2.1发展的三个阶段 第一代数据库 第二代数据库 第三代数据库 2.2mysql发展历史 三.主流数据库 四.关系型数据库和…

Windows三大认证! NTLM_Relay攻击

Windows有三大认证 NTLM本地认证NTLM网络认证Kerberos域认证 1.Kerberos域认证 对于Kerberos域认证&#xff0c;我之前讲过很多的文章 所以这里就不再赘述了 2.NTLM本地认证 其实就是windows本地登录认证&#xff0c;我之前也讲过&#xff0c;于是也不再赘述了 hhh&#x…

【Lexus】Executive Sedan

文章目录 【基础信息】车漆颜色历年指导价2.5L车型保养 【缺点】混动车型缺点负面 【对比】ES200 vs ES200 龙年限定ES200 vs ES260ES200 vs ES300hES200 vs NX260ES200 vs BMW 325i M 运动曜夜 【Buy】【尺寸】 【基础信息】 丰田&#xff0c;雷克萨斯&#xff0c;1997推出第…

android studio 安装lombok插件

android studio 安装lombok插件 由于 AS 不是基于 IDEA release 版本进行开发的&#xff0c;因此lombok对idea的插件可能再as中无法查看到。因此再as中通过plugins管理无法安装lombok插件。这就导致再gradle引入lombok后&#xff0c;虽然编译可能会通过&#xff0c;但是代码在查…

分布式接口幂等性解析

一、概述 幂等性定义&#xff1a;用户对于同一操作发起的一次请求或者多次请求的结果是一致的&#xff0c;不会因为多次点击而产生了副作用。【同一操作指的是同一个浏览器&#xff0c;发送相同的请求】。 常见场景&#xff1a; 提交订单接口。返回提交结果时网络出现故障&am…

电子元器件行业发展势头强劲,钧崴电子IPO上市抢占市场份额

电子元器件处于电子信息产业链上游&#xff0c;是通信、计算机及网络、数字音视频等系统和终端产品发展的基础&#xff0c;对电子信息产业的发展起着至关重要的作用。近年来中国电子工业持续高速增长&#xff0c;带动电子元器件产业强劲发展。目前&#xff0c;我国许多门类的电…

linux系统------------Mysql数据库

目录 一、数据库基本概念 1.1数据(Data) 1.2表 1.3数据库 1.4数据库管理系统(DBMS) 数据库管理系统DBMS原理 1.5数据库系统&#xff08;DBS) 二、数据库发展史 1、第一代数据库 2、第二代数据库 3、第三代数据库 三、关系型数据库 3.1关系型数据库应用 3.2主流的…

实现:mysql-5.7.42 到 mysql-8.2.0 的升级(rpm方式)

实现&#xff1a;mysql-5.7.42 到 mysql-8.2.0 的升级&#xff08;rpm方式&#xff09; 1、升级准备1、使用mysql-shell 检查工具检查兼容性 2、操作环境3、备份数据库、my.cnf文件&#xff0c;停止mysql服务&#xff08;重要&#xff09;4、上传、解压安装包5、查看已安装的my…

问GPT:将Excel中一行转换为一列的方法

问GPT&#xff1a;将excel中一行转换为一列的方法 函数&#xff1a; TRANSPOSE(A2:E2)

基于SpringBoot+MYSQL的课程作业管理系统

目录 1、前言介绍 2、主要技术 3、系统流程分析 3.1、操作流程 3.2、添加信息流程 3.3、删除信息流程 4、系统设计 5、数据库设计 6、数据表 6、运行截图(部分) 6.1、管理员功能模块 6.2、教师功能模块 7、源码获取 基于springboot的课程作业管理系统 1、前言介绍 …

VBA之Word应用:利用Bookmark属性返回选择区域的开始和结束位置

《VBA之Word应用》&#xff08;版权10178982&#xff09;&#xff0c;是我推出第八套教程&#xff0c;教程是专门讲解VBA在Word中的应用&#xff0c;围绕“面向对象编程”讲解&#xff0c;首先让大家认识Word中VBA的对象&#xff0c;以及对象的属性、方法&#xff0c;然后通过实…

2024年新算法:基于牛顿-拉夫逊优化器NRBO的城市三维无人机路径规划(复杂地形三维航迹路径规划)

摘要&#xff1a;本文提出了一种利用牛顿-拉夫逊优化器&#xff08;Newton-Raphson-based optimizer&#xff0c;NRBO&#xff09;来解决城市环境下无人机三维路径规划问题的方法。这种方法将复杂的无人机航迹规划任务转化为一个优化问题&#xff0c;然后运用牛顿-拉夫逊优化器…

文件包含漏洞之包含SESSION(CTF题目)

这次使用的环境是ubuntunginxphpmysql 首先四个文件源码在以下链接中&#xff1a; 一道CTF题&#xff1a;PHP文件包含 | Chybeta 我们注册一个用户名111密码111&#xff0c;然后登录查看cookie和linux的session&#xff0c;因为我们的de服务器 是手动搭建的&#xff0c;所以…

论文阅读:Face Deblurring using Dual Camera Fusion on Mobile Phones

今天介绍一篇发表在 ACM SIGGRAPH 上的文章&#xff0c;是用手机的双摄系统来做人脸去模糊的工作。这也是谷歌计算摄影研究组的工作。 快速运动物体的运动模糊在摄影中是一个一直以来的难题&#xff0c;在手机摄影中也是非常常见的问题&#xff0c;尤其在光照不足&#xff0c;…

第十三届蓝桥杯省赛真题 Java C 组【原卷】

文章目录 发现宝藏【考生须知】试题 A: 排列字母试题 B: 特殊时间试题 C: 纸张尺寸试题 D: 求和试题 E : \mathbf{E}: E: 矩形拼接试题 F: 选数异或试题 G: GCD试题 H: 青蛙过河试题 I: 因数平方和试题 J \mathrm{J} J : 最长不下降子序列 发现宝藏 前些天发现了一个巨牛的人…

关于防火墙

文章目录 一、安全技术和防火墙1、安全技术2、防火墙的分类2.1 按保护范围划分2.2 按实现方式划分2.3 按网络协议划分2.3.1 包过滤防火墙2.3.2 应用层防火墙 二、Linux 防火墙的基本认识1、Netfilter2、防火墙工具介绍2.1 Iptables2.2 Firewalld2.2.1 软件包2.2.2 管理工具 2.3…
最新文章