jquery-显示隐藏-链式调用

最新推荐文章于 2025-06-25 11:14:47 发布
原创 最新推荐文章于 2025-06-25 11:14:47 发布 · 316 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客主要介绍了jQuery的动画效果及链式调用。包括淡入淡出（fadeIn、fadeout）、淡入切换（fadeToggle）、显示隐藏切换（show、hide、toggle）、向下展开向上卷起切换（slideDown、slideUp、slideToggle）等效果，还提及链式调用及使用slideToggle时的bug修正方法。

小结

标签对象的淡入淡出效果，三个方法
标签对象.fadeOut(),从有到无的淡出
标签对象.fadeIn()，从无到有的淡入
标签对象.fadeToggle()，切换淡入淡出

标签对象的显示与隐藏，三个方法
标签对象.hide()
标签对象.show()
标签对象.toggle()


标签对象的向下展开向上卷起，三个方法
标签对象.slideDown()
标签对象.slideUp()
标签对象.slideToggle()

在这里插入图片描述

在这里插入图片描述

淡入淡出

fadeIn

fadeout

基本

在这里插入图片描述

点击按钮，盒子淡出

在这里插入图片描述

时间参数，运动方式，回调函数
时间参数，【运动方式】，回调函数

在这里插入图片描述

动画结束后会调一下函数

swing运动效果，缓冲，默认

淡入切换

fadeToggle()

显示，隐藏，切换

show
hide
toggle

向下展开，向上卷起，切换

slideDown
slideUp
slideToggle

在这里插入图片描述

在这里插入图片描述

链式调用

在这里插入图片描述

在这里插入图片描述

开始代码

在这里插入图片描述

需用选择器

在这里插入图片描述

在这里插入图片描述

当使用slideToggle时会有bug

通过加入stop来修正

先停止，再开始

在这里插入图片描述

jquery-1.11.0.min.js（jQuery下载）
05-07
例如，jQuery通过选择器能够快速选取页面中的元素，并且可以链式操作这些元素，进行样式更改、内容更新等一系列操作。 此外，1.11.0版本的jQuery对于Ajax的支持也非常强大，它提供了一套完整的Ajax方法，方便开发者...
Jquery下載，Jquery-3.5.1
01-19
jQuery 的设计受到了 .NET Framework 中 LINQ（Language Integrated Query）的影响，允许开发者以链式调用的方式来执行一系列操作。例如： ```javascript $("#element").addClass("highlight").slideUp(500).data(...
jQuery链式调用理解
热门推荐
99的博客
02-07 1万+
链式代码 $('input[type="button"]') .eq(0).click(function() { alert('点击我!'); }).end().eq(1) .click(function() { $('input[type="button"]:eq(0)').trigger('click'); }).end().eq(2) .toggle(fun
Jquery链式调用
weixin_61650602的博客
03-03 1355
在jQuery中，如果一直对同一个元素或元素的其他关系元素（兄弟元素，父子元素）进行操作，那么可以使用 .语法(点语法)，一直写下去。 $("#box").css("background", "pink").siblings().css("background", "red"); 总结： 实现链式编程的核心，是对象中的每一个方法都会返回当前对象。 var 对象 = { 方法名:function(){ // … return this; // 实现链式编程的核心this } } 在方法中
jQuery链式调用
kobezzZ的博客
08-20 282
jQuery的核心理念是Write less,Do more(写的更少,做的更多)，那么链式方法的设计与这个核心理念不谋而合。那么从深层次考虑这种设计其实就是一种Internal DSL。 DSL是指Domain Specific Language，也就是用于描述和解决特定领域问题的语言。 我们看一段链式代码： $('input[type="button"]') .eq(0).click(...
jQuery/jquery-1.7.2.min.js jquery-1.7.2.js 文件
04-06
6. **链式调用**：jQuery的API设计支持链式调用，如`$(selector).addClass('active').css('color', 'red')`。 7. **插件生态**：jQuery拥有庞大的插件生态系统，可以方便地扩展功能，如表单验证、轮播图、弹窗等。 ...
jquery-1.8.3.js 、jquery-1.8.3.min.js 【官方jquery包 js】
11-01
jQuery 1.8.3版本在功能上继承了jQuery一贯的优雅特性，包括选择器引擎（Sizzle）、链式调用、DOM操作、事件处理、动画效果和Ajax请求。其中，选择器引擎使得开发者可以通过CSS1-CSS3的选择器轻松选取DOM元素，而...
jquery-1.12.4.min.js
02-11
5. **链式操作**：jQuery对象允许链式调用，例如`$("#element").addClass("active").show()`，这提高了代码的可读性和效率。 6. **插件生态**：jQuery拥有庞大的社区和丰富的插件资源，涵盖表单验证、图像轮播、...
jQuery的链式调用
丁哒哒的博客
12-13 1600
一、什么是链式？ $('div').click(function () { $(this).find(".b").addClass("css"); }) 上面代码实现的是在点击div后，找到div内的类名为class的dom节点，给他们添加名为css的class。 二、jQuery怎么实现的链式？ 上源码： jQuery.fn.extend( { addClass: f...
jQuery 隐式迭代和链式调用
Allenyhy的博客
09-30 2020
jQuery 隐式迭代和链式调用 学过 jQuery 之后，一般是不太有人再愿意写原生 JS 的，甚至有段时间 jQuery 成了 JS 的代名词。原因无他，足够简单方便。可在这简单方便的背后，可少不了两大功臣：隐式迭代和链式调用。 隐式迭代 对于原生 JS 来说，一般我们设置某类元素的样式，都得使用循环设置，而 jQuery 在使用的时候则无需考虑这点，简单示例如下： // 设置 .p...
JQuery链式调用-理解
dlm_bk的博客
03-30 686
当一个参数需要同时调用多个方法时，正常的做法是obj = Obj();  obj.init();  obj.setFlag()；但是如果你在每个方法里面加上return this，返回当前对象function obj(){...return this;}function init(){...return this;}function setFlag(){...return this;}，那你就可以...
jQuery - 链(Chaining)
最新发布
likuoelie的博客
06-25 905
jQuery 的链式调用是一种技术，让你在同一个元素上连续调用多个 jQuery 方法，而无需重复选择器。这行代码会先将 id 为 “myDiv” 的元素颜色改为红色，然后向上滑动 2000 毫秒，最后向下滑动 2000 毫秒。jQuery 是一种流行的 JavaScript 库，简化了网页开发的许多复杂操作。链式调用（Chaining）是 jQuery 中的一个重要特性，指的是在同一个选择器上连续调用多个方法，而无需重复选择元素。根据jQuery 链 | 菜鸟教程。
jquery 链模式调用简易实现
daicooper的博客
11-19 889
<script> var A = function(selector, context){ return new A.fn.init(selector, context); } A.fn = A.prototype = { // 强化构造器 constructor:A, init:function(selector, context){
链模式-jquery链式调用的原理与实现
HRM2454的博客
05-21 2863
链模式（Operate of Responsibility）:通过在对象方法中将当前对象返回，实现对同一个对象多个方法的链式调用。从而简化对该对象的多个方法的多次调用时，对该对象的多次引用...说白了就是可以a().css().attr().on()这样调用方法，而不需要a().css();a().attr();a().on()这样繁琐而且要多次创建对象 jQuery的设计就是通过这种模式使得代码更简洁。这种链模式是基于原型继承的，并且在每一个原型方法的实现上都返回当前对象this，使当前对象一直处于原型
02jQuery之筛选选择器、链式编程、addClass( )、css( )、元素的显示和隐藏
Denial_learn的博客
09-17 423
筛选选择器： 语法 描述 示例 :even 选取索引是偶数的所有元素（index从0开始） $(" li:even" )选取索引是偶数的所有li元素 :odd 选取索引是奇数的所有元素（index从0开始） $(" li:odd" )选取索引是奇数的所有li元素 链式编程： 对一个对象进行多重操作，并将操作结果返回给该对象 示例：（对自己进行操作后，又对下一个兄弟进行操作...
underscore 诞生记（二）—— 链式调用与混入（mixin）
weixin_33962621的博客
04-29 169
上篇文章讲述了 underscore 的基本结构搭建，本文继续讲链式调用与混入。 如果你还没看过第一篇文章，请点击 “underscore 诞生记（一）—— 基本结构搭建” 链式调用 在 JQuery 中，我们经常使用到链式调用，如： $('.div') .css('color', 'red') .show(); 复制代码那么在 underscore 中，是否支持链式调用呢？答案是支持的，...
jQuery-显示自动隐藏的消息提示框
k4nz
04-28 214
原文地址：jQuery-显示自动隐藏的消息提示框（永久地址，保存网址不迷路 ????） 问题描述 我们希望 1）在页面上显示消息提示，以提示用户操作完成，2）但是不想有交互，即消息提示自动消失。 该笔记将记录：如何在页面上显示自动消失的提示消息（类似与 Andorid 的 Toast 方法） 解决方法 我们遇到的多数问题，别人都已经遇到过了，我们只要尽量去搜索答案。 jQuery + Notify.js <script src="http://libs.baidu.com/jqu
定时模式对话框：jquery-timed-dialog jQuery插件介绍
一个典型的jQuery插件结构包含一个或多个方法，每个方法都具有其特定功能，并且可以链式调用。在本例中，jquery-timed-dialog插件添加了一个定时关闭对话框的功能。 3. DOM操作和事件处理 在Web开发中，文档对象...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸鱼编程pyhui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值