45 jQuery中的常用API
2024-06-02 18:22:05
技术交流QQ群:1027579432，欢迎你的加入！
欢迎关注我的微信公众号：CurryCoder的程序人生
1.jQuery基础选择器
- 原生JS获取元素的方式很多、很杂，而且兼容性情况不一致。因此，jQuery给我们做了封装，使获取元素统一标准。
- 语法格式：
$('选择器') // 里面选择器直接写CSS选择器即可，但是要加引用
2.jQuery层级选择器
3.jQuery隐式迭代
- jQuery设置样式：
$('div').css('属性','值'); - 隐式迭代：遍历内部DOM元素(伪数组形式存储)的过程。简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
4.jQuery筛选选择器
5.jQuery筛选方法[重点]
- 重点记忆：parent()、children()、find()、siblings()、eq()。
6.jQuery中的排他思想
- 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
7.jQuery中的样式操作
7.1 操作css方法
- jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式。
- 参数只写属性名，则是返回属性值。
$(this).css("color"); - 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用加单位和引号。
$(this).css("color", "red"); - 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号分隔开，属性名可以不用加引号。如果是复合属性必须采取驼峰名命名。如果属性值不是数字，必须加引号。
$(this).css({"color": "red", "font-size": "14px"});
7.2 设置类样式方法[重点]
- 作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
- 添加类
$('div').addClass("current"); - 删除类
$('div').removeClass("current"); - 切换类
$('div').toggleClass("current");
7.3 类操作与className区别
- 原生JS中的className会覆盖元素原先里面的类名。
- jQuery里面的类操作只是对指定类进行操作，不影响原先的类名。
8.jQuery动画效果
- jQuery给我们封装了很多的动画效果，最常见的如下所示：
8.1 显示、隐藏与切换效果
- 显示语法规范：
show([[speed], [easing], [fn]]) - 显示参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 隐藏语法规范：
hide([[speed], [easing], [fn]]) - 隐藏参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 切换语法规范：
toggle([[speed], [easing], [fn]]) - 切换参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
8.2 滑动效果
- 下拉滑动效果语法规范：
slideDown([[speed], [easing], [fn]]) - 下拉滑动效果参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 上拉滑动效果语法规范：
slideUp([[speed], [easing], [fn]]) - 上拉滑动效果参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 切换滑动效果语法规范：
slideToggle([[speed], [easing], [fn]]) - 切换滑动效果参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
8.3 事件切换
- 事件切换语法规范：
hover([over,]out) - 事件切换参数说明：
- over：鼠标移动到元素上要触发的函数(相当于mouseenter)
- out：鼠标移出元素要触发的函数(相当于mouseleave)
8.4 动画队列及其停止排队方法
- 动画或效果队列：动画或效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。
- 停止排队：
stop() - 停止排队说明：
- stop()方法用于停止动画或效果。
- 注意：stop()写到动画或效果的前面，相当于停止结束上一次的动画。
8.5 jQuery淡入淡出效果
- 淡入效果语法规范：
fadeIn([[speed],[easing], [fn]]) - 淡入效果参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 淡出效果语法规范：
fadeOut([[speed],[easing], [fn]]) - 淡出效果参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 淡入淡出切换效果语法规范：
fadeToggle([[speed],[easing], [fn]]) - 淡入淡出切换效果参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 渐进方式调整到指定的透明度语法规范
fadeTo([[speed],opacity, [easing], [fn]]) - 渐进方式调整到指定的透明度参数说明：
- opacity透明度必须写，取值0~1之间。
- speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒值(如：1000)，必须写。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
8.6 自定义动画animate[重点]
- 语法规范：
animate(params, [speed], [easing], [fn]) - 参数说明：
- params: 想要修改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果复合属性则需要采用驼峰命名法borderLeft，其余参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
9.资料下载
- 笔记及代码，欢迎 star,follow,fork…
45 jQuery中的常用API相关推荐
- jQuery中的常用内容总结(一)
jQuery中的常用内容总结(一) 前言 不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写的:同时闲谈几句:在这里建议各位开发的童鞋,如果有疾病尽快治 ...
- 前端的第二十四天（jQuery入门、常用API）
前端的第二十四天(jQuery入门.常用API) 一.jQuery入门 1.jQuery 概述 2.jQuery 的基本使用 官网地址:点我跳转 各个版本的下载:点我跳转 二.jQuery常用API ...
- Html中Select的增删改查排序，和jQuery中的常用功能
这里主要通过select引出常用的jquery 前台页面 <select class="form-control" id="commonSelect"&g ...
- TensorFlow2中的常用API速查速记
这篇博客为<深度学习与TensorFlow 2入门实战>的部分笔记,为上一篇"TensorFlow2中的Tensor的常用操作速查速记"的后续,今天也正好看见龙龙老师的 ...
- Jquery中对常用控件赋值的方法
场景 通过Jquery进行ajax请求数据后将返回的数据给页面中的 控件进行赋值. 实现 1.对input进行赋值$("#id").val("赋值");2.对l ...
- JQuery中一些常用函数的运用
一.JQuery的效果介绍 二.定时弹出广告图片JQ部分代码 <script type="text/javascript">var time;$(function(){ ...
- 《十四》微信小程序中的常用 API之登录、获取用户信息、支付、提现、跳转小程序、网络请求、弹框、导航、数据缓存、图片、查看文档、音频、拨打电话、剪贴板、滚动、WXML
微信小程序提供了 wx 这个全局变量,通过这个全局变量可以调用微信小程序的 API. 登录: wx.login():获取登录凭证 code.通过登录凭证 code 进而换取用户登录态信息,包括用户在当 ...
- jQuery中的常用事件
这里介绍一些jQuery常用的事件 jQuery事件是对JavaScript事件的封装,常用事件如:鼠标事件,键盘事件,表单事件,绑定事件,复合事件等等 1.鼠标事件 方法如下 click() :单击 ...
- jquery 获取id最大的元素_超全整理！JQuery中的选择器集合
JQuery的选择器总结 选择器是获取元素并进行操作的一种方式,在使用CSS选择器时,开发人员有时候需要考虑浏览器是否支持某些选择器.而在JQuery中,使用选择器则不需要考虑这些问题,与传统的JS获 ...
最新文章
- Docker Desktop添加对Kubernetes的支持
- 美国防承包商博思艾伦泄露五角大楼相关敏感文件
- 机器学习基础专题：高斯判别分析
- 如何使用Twitter Bootstrap获得中心内容？
- html对象属性大全
- 流星，刹那间划过天际
- 信号转化java_Java基础知识回顾-7
- 分而治之：Oracle 18c 及 12.2 分区新特性的 N 种优化实践（含PPT）
- Zabbix主机处于check_ping_icmpping状态问题解决
- ANSYS_APDL——实例002-模态分析
- 阿辉DirectX 11学习笔记二
- windows文件夹图标只显示一半，另一半被白框遮挡解决办法
- 2016-2017-1(实变函数56, 点集拓扑56)
- 苹果系统自带的计算机怎么恢复出厂设置,苹果电脑MacBook如何将系统恢复出厂设置...
- H5跳转微信公众号关注页面
- 软考分类精讲-知识产权与标准化
- 老板要如何去激励自己的员工?
- js接收java数组对象_js接收并转化Java中的数组对象的方法
- C++打开文件夹中的多个文件并计算文件中数据的平均值
- LA@二次型和标准化