jQuery -- 常用API(上)

news2024/9/20 14:31:52

1. jQuery选择器

1.1 jQuery基础选择器

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

语法:$(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号
在这里插入图片描述

1.2 jQuery层次选择器

在这里插入图片描述
知识铺垫
jQuery设置样式:$(‘div’).css(‘属性’, ‘值’)

1.3 隐式迭代(重要)

遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。

简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。

1.4 jQuery筛选选择器

在这里插入图片描述

1.5 jQuery筛选方法(重点)

在这里插入图片描述

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

1.6 jQuery里面的排他思想

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

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

1.7 链式编程

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

$(this).css('color', 'red').sibling().css('color', '');

使用链式编程一定注意是哪个对象执行样式.

2. jQuery样式操作

2.1 操作css方法

jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式。

  1. 参数只写属性名,则是返回属性值
    $(this).css(‘‘color’’);
  2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
    $(this).css(‘‘color’’, ‘‘red’’);
  3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号,
    $(this).css({ “color”:“white”,“font-size”:“20px”});

2.2 设置类样式方法

作用等同于以前的 classList,可以操作类样式, 注意操作类里面的参数不要加点。

  1. 添加类
    $(“div”).addClass(‘‘current’’);
  2. 移除类
    $(“div”).removeClass(‘‘current’’);
  3. 切换类
    $(“div”).toggleClass(‘‘current’’);

2.3 类操作与className区别

原生 JS 中 className 会覆盖元素原先里面的类名。

jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。

3. jQuery效果

jQuery 给我们封装了很多动画效果,最为常见的如下:
在这里插入图片描述

3.1 显示隐藏效果

1、显示语法规范:show([speed,[easing],[fn]])

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

3、隐藏语法规范:hide([speed,[easing],[fn]])

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

5、切换语法:toggle([speed,[easing],[fn]])

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

3.2 滑动效果

1、下滑效果语法规范:slideDown([speed,[easing],[fn]])

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

3、上滑效果语法规范:slideUp([speed,[easing],[fn]])

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

5、滑动切换效果语法规范:slideToggle([speed,[easing],[fn]])

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

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

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

1、动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

2、停止排队:stop()
(1)stop() 方法用于停止动画或效果。
(2) 注意: stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画

3.5 淡入淡出效果

1、淡入效果语法规范:fadeIn([speed,[easing],[fn]])

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

3、淡出效果语法规范:fadeOut([speed,[easing],[fn]])

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

5、淡入淡出切换效果语法规范:fadeToggle([speed,[easing],[fn]])

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

7、渐进方式调整到指定的不透明度:fadeTo([[speed],opacity,[easing],[fn]])

8、效果参数
(1)opacity 透明度必须写,取值 0~1 之间
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。必须写
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

3.6 自定义动画 animate

语法:animate(params,[speed],[easing],[fn])

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

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

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

相关文章

【毕业设计】基于springboot + vue微信小程序商城

目录 前言一、视频展示二、系统介绍三、项目地址四、运行环境五、创新点/亮点六、设计模块①前台②后台 七、系统功能模块结构图八、 准备阶段①使用真实支付②使用模拟支付九、使用说明十、登录后台十一、后台页面展示十二、微信小程序页面展示关于我 前言 【毕业设计】基于s…

IPsec中IKE与ISAKMP过程分析(快速模式-消息2)

IPsec中IKE与ISAKMP过程分析(主模式-消息1)_搞搞搞高傲的博客-CSDN博客 IPsec中IKE与ISAKMP过程分析(主模式-消息2)_搞搞搞高傲的博客-CSDN博客 IPsec中IKE与ISAKMP过程分析(主模式-消息3)_搞搞搞高傲的博客…

数据结构与算法基础(王卓)(31):折半插入排序、希尔排序

目录 折半插入排序 Project 1: 问题:缺少在插入元素之前的移动元素的操作 Project 2:(最终成品、结果) 希尔排序 Project 1:(个人思路) 标准答案:(PPT答案) 解释说明&#xff…

etcd的Watch原理

在 Kubernetes 中,各种各样的控制器实现了 Deployment、StatefulSet、Job 等功能强大的 Workload。控制器的核心思想是监听、比较资源实际状态与期望状态是否一致,若不一致则进行协调工作,使其最终一致。 那么当你修改一个 Deployment 的镜像…

数据结构篇三:双向循环链表

文章目录 前言双向链表的结构功能的解析及实现1. 双向链表的创建2. 创建头节点(初始化)3. 创建新结点4. 尾插5. 尾删6. 头插7. 头删8. 查找9. 在pos位置前插入10. 删除pos位置的结点11. 销毁 代码实现1.ListNode.h2. ListNode.c3. test.c 总结 前言 前面…

03-WAF绕过-漏洞利用之注入上传跨站等绕过

WAF绕过-漏洞利用之注入上传跨站等绕过 思维导图 一、sql注入绕过 使用sqlmap注入测试绕过 1.绕过cc流量 通过sqlmap对网站进行测试的时候,如果对方有cc流量防护,需要给sqlmap设置一个代理进行注入。 防cc拦截:修改user-agent头代理&…

ADB调试删除手机内置应用

前言 最近手机升级到了鸿蒙3系统,但是内置了两个输入法,我想删掉小艺输入法,于是就有了这篇记录。   本文在B站上ADB调试卸载应用的教程的基础上,去掉了内网穿透相关操作步骤。 前期准备 手机(荣耀10青春版&#x…

3.4 只读存储器

学习目标: 学习只读存储器(ROM)的目标可以包括以下内容: 了解ROM的基本概念、分类以及适用场景。掌握ROM的电路原理、逻辑结构和读取方式。熟悉ROM的编程方式和编程工具。理解ROM与EPROM、EEPROM和闪存的区别和联系。了解ROM在计…

IPsec中IKE与ISAKMP过程分析(快速模式-消息1)

IPsec中IKE与ISAKMP过程分析(主模式-消息1)_搞搞搞高傲的博客-CSDN博客 IPsec中IKE与ISAKMP过程分析(主模式-消息2)_搞搞搞高傲的博客-CSDN博客 IPsec中IKE与ISAKMP过程分析(主模式-消息3)_搞搞搞高傲的博客…

[架构之路-181]-《软考-系统分析师》-19- 系统可靠性分析与设计 - 概览

前言: 可靠性工程是研究产品生命周期中故障的发生、发展规律,达到预防故障,消灭故 障,提高产品可用性的工程技术。 信息系统的可靠性是指系统在满足一定条件的应用环境中能够正常工作的能力,可以按一般工程系统的可靠性…

图像生成论文阅读:GLIDE算法笔记

标题:GLIDE: Towards Photorealistic Image Generation and Editing with Text-Guided Diffusion Models 会议:ICML2022 论文地址:https://proceedings.mlr.press/v162/nichol22a.html 官方代码:https://github.com/openai/glide-…

【算法】回文数

目录 一.回文数 二.求回文数(10000以内) 代码: 翻译: 调试: 三.判断回文数 代码: 调试: 一.回文数 "回文数"是一种数字。 如:12321, 这个数字正读是12321,倒读也是…

C++的类

文章目录 class定义类声明和定义不分离成员函数声明与定义的分离 类的访问限定符类的实例化类对象的大小this指针 引入:什么是类呢? 在C语言阶段,结构体成员只能是它的属性,这个结构体就相当于张三,小时候它只被赋予了名字,性别,家庭住址等属性,但是他没…

docker Mysql部署主从集群

目录 1 docker安装 2 docker mysql 安装配置 远程连接 2.0 配置 2.0.1 文件夹 配置 2.0.2 主库文件配置 my.cnf -> 主库 id 和 开启二进制日志 2.0.3 从库文件配置 -> 从库 id 2.1 mysql 主 -> 第一个端口号和从库不一样 2.1.1 docker run 主库 2.1.2 查看主…

Postman创建项目 对接口发起请求处理

查看本文之前 您需要理解了解 Postman 的几个简单工作区 如果还没有掌握 可以先查看我的文章 简单认识 Postman界面操作 那么 掌握之后 我们就可以正式来开启我们的接口测试 我们先选择 Collections 我们点上面这个加号 多拉一个项目出来 然后 我们选我们刚加号点出来的项目…

用LangChain构建大语言模型应用

用LangChain构建大语言模型应用 自 ChatGPT 发布以来,大型语言模型 (LLM) 广受欢迎。尽管您可能没有足够的资金和计算资源从头开始训练自己的大语言模型,但您仍然可以使用预训练的大语言模型来构建一些很酷的东西,例如: 可以根据…

01-权限提升-网站权限后台漏洞第三方获取

权限提升-网站权限后台漏洞第三方获取 本节课内容主要是权限提升的思路,不涉及技术 当前知识点在渗透流程中的点 前期-中期-后期对应知识关系 当前知识点在权限提升的重点 知识点顺序,理解思路,分类介绍等 当前知识点权限提升权限介绍 …

Java8

Java8 (一)、双列集合(二)、Map集合常用api(三)、Map集合的遍历方式(四)、HashMap(五)、LinkedHashMap(六)、TreeMap(七&a…

Steve:AI创建视频和动画的在线工具

【产品介绍】 steve.ai是一款利用人工智能技术创建视频和动画的在线工具,可以让任何人在几分钟内把文字转换成吸引人的视频。核心功能是根据用户输入的文本,自动选择合适的素材、音乐、字幕和动效,生成高质量的视频。还提供了多种模板、风格和…

Photoshop如何使用滤镜之实例演示?

文章目录 0.引言1.将普通照片制作成油画效果2.使用液化滤镜修出完美身材3.用镜头光晕滤镜制作唯美的逆光人像4.用Camera Raw滤镜对偏色风景照进行调色 0.引言 因科研等多场景需要进行绘图处理,笔者对PS进行了学习,本文通过《Photoshop2021入门教程》及其…