如何使用相同的按钮切换两个元素(无JQuery) - 腾讯云开发者社区

文章/答案/技术大牛

发布

JavaScript 学习-35.jQuery 基础语法与事件

前言 jQuery 是一个轻量级的”写的少，做的多”的 JavaScript 库。...AJAX Utilities 环境准备在网页中使用 jQuery 可以使用以下方法：从 jquery.com 下载 jQuery 库从 CDN 中载入 jQuery, 如从 Google 中加载...基本语法结构美元符号定义 jQuery 选择符（selector）”查询”和”查找” HTML 元素 jQuery 的 action() 执行对元素的操作 $(selector).action()...隐藏和显示 jQuery 提供了隐藏和显示元素的基本方法 hide() 隐藏元素 show() 显示元素 toggle() 切换显示和隐藏示例如果你点击“隐藏” 按钮，我将会消失...，这里的this是你定位的元素对象点我提交按钮 $(document

2.6K1 0

jQuery

jQuery 对DOM的原生方法进行了封装，jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法。...对象只能使用jQuery 封装的方法。...//（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次 hide([speed,[easing],[fn]]);//中括号表示可以省略此参数，无动画直接显示 3.切换显示和隐藏 toggle...//事件切换 hover 就是鼠标经过和离开的复合写法，两个函数对应经过和离开。...---- jQuery 元素操作遍历元素 jQuery 隐式迭代只能对同一类元素进行相同操作。

23K5 0

您找到你想要的搜索结果了吗？

是的

没有找到

【Java 进阶篇】JQuery 事件绑定之事件切换：让页面动起来

无论你是前端小白还是有一定经验的开发者，相信这篇文章都会对你有所帮助。走进事件切换的奇妙世界事件切换是 JQuery 提供的一项强大功能，它使得我们可以在同一个元素上轻松切换不同的事件处理函数。...这个方法接受两个或多个函数作为参数，每次触发事件时，它会依次调用这些函数。这就意味着，你可以在同一个元素上定义多个不同的事件处理逻辑。让我们通过一个简单的例子来看看基本的语法：使用 data 方法来在元素上存储数据。按钮时，根据当前状态不同，会弹出不同的提示框，并修改状态值。另外，我们通过点击事件展示了如何获取当前状态。切换 CSS 类在页面交互中，改变样式是常见的需求之一。...点击 “上一张” 和 “下一张” 按钮时，通过事件切换实现了图片的切换效果。这展示了事件切换在实际项目中的强大应用。小结通过本文的学习，我们深入了解了 JQuery 中的事件切换。

1.1K2 0

【融职培训】Web前端学习第4章 jQuery 2 jQuery常用方法

一、事件概述事件的基本概念上一章我们讲解了使用jQuery选择器获取元素，并通过一些方法来操作元素，本章我们讲解事件的概念，通过事件我们可以加强用户与浏览器的交互性，例如可以实现当用户点击某个元素的时候...结合我们上一章的内容，来实现一个功能，当我们点击按钮的时候，将一张图片切换成另一张图片,代码如下所示。...，也就是img标签，当我们点击img标签的时候，使用attr方法将其src属性设置成另一张了图片的地址，这样就实现了图片的切换。...切换图片找到了列表的索引，我们下一步就要实现图片切换的功能了，首先我们需要了解数组的概念，数组是一个集合，我们将3章图片的路径放到了数组中，这样我们就可以通过数组的下标来获取到数组的元素了。...mouseenter和mouseleave的事件，这样写的效果与上面完全相同。

2.1K1 0

Web前端学习第4章 jQuery 2 jQuery常用方法

2.4K3 0

在 jQuery Mobile 中使用 UI 组件

对列表提供更多功能的一个选项称为拆分按钮列表。拆分按钮列表使您能够在同一个列表项中提供两个可单击的选项。...创建一个拆分按钮列表很简单：在使用 listview data-role 的一个列表项中添加两个彼此相邻的定位点标记（清单 7）。清单 7....使用 jQuery Mobile 进行文本输入，基本上也与原生文本输入相同；然而，您可以使用新的 HTML5 输入类型，如 email、tel 和 number。...创建一个切换开关与创建一个滑块类似，但其中还是有一些较大的差异。输入变成一个 select 元素，并且要添加两个选项。清单 15 提供了切换开关的示例，该开关提供 on/off 功能。...该属性值将一个自定义 jQuery Mobile 选择列表转换为一个切换开关。结束语 jQuery Mobile 框架提供一个为移动网站创建可用 UI 组件的快速解决方案。

12K2 0

插上翅膀：JQuery 插件机制详解

这样，我们就在页面中成功地使用了一个简单的 JQuery 插件。JQuery 插件的原理了解了如何编写一个简单的 JQuery 插件后，让我们深入揭开插件的神秘面纱，了解它是如何工作的。...基于选择器的扩展基于选择器的扩展是通过 $.fn 对象的方式，为所有 JQuery 选择器返回的对象添加新的方法。这种扩展方式通常用于操作一组元素，例如在所有匹配的元素上执行相同的操作。....slider-container，其中包含一个图片容器 .slider 和左右切换按钮 .prev 和 .next。...);在这个插件代码中，我们首先获取了容器、图片轮播、左右按钮等元素，然后初始化了一些参数，包括图片数量、设置图片容器的宽度等。...为插件添加选项在前面的例子中，我们已经展示了如何使用配置对象来自定义插件的行为。现在，我们来扩展插件，允许用户通过选项来设置轮播的速度。

9751 0

前端开发JS——jQuery常用方法

，还是会实现所绑定的事件；任何鼠标按钮都会实现所绑定的事件；用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3 3、jQuery...通过off()方法移除绑定（off和unbind也是一样的，推荐使用off）绑定两个事件 $ele.on("mouseover mouseout", function(){}) 解除其中一个事件...important重写样式 2、jQuery中显示与隐藏切换toggle方法（改变样式display:none/block) toggle方法是上述两个方法的切换 $ele.toggle()...因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面 4、jQuery中上卷下拉切换slideToggle方法（改变元素的高度) slideToggle 方法是上述两个方法的切换 $ele.slideToggle...因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面 6、jQuery中淡出淡入切换fadeToggle方法（改变元素的透明度) fadeToggle 方法是上述两个方法的切换 $ele.fadeToggle

6.3K2 0

JQuery高级应用

先慢，中间快，最后又慢 linear：动画执行时速度是匀速的 fn：在动画完成时执行的函数，每个元素执行一次。...jq的遍历方式 jq对象.each(callback) 语法： jquery对象.each(function(index,element){}); index：就是元素在集合中的索引 element：就是集合中的每一个元素对象...}) ; //使用off解除btn按钮的单击事件 $("#btn2").click(function (...的功能如何定义插件：（看下面两个案例） $.fn.extend(object) 增强通过Jquery获取的对象的功能 $("#id") ?...a : b; } }) // 使用这两个方法 alert($.max(10, 8));

7.7K3 0

前端开发者都应知道的 jQuery 小技巧

回到顶部按钮预加载图片检查图片是否加载完毕自动修复损坏的图片 Hover 上的 Class 开关禁用 input 字段停止链接加载淡入淡出/滑动开关简单的折叠效果将两个 Div 设为相同高度...在新窗口打开外部链接找到文本元素切换可视与隐藏的触发器 Ajax 调用的错误处理链式操作回到顶部按钮通过使用 jQuery 中的 animate 和 scrollTop 方法...Hover 上的 Class 切换如果用户的鼠标悬停在页面上某个可点击元素时，你想要改变这个元素的视觉表现。...淡入淡出与滑动是我们经常使用 jQuery 做成的动画效果。...通过文本找到元素通过使用 jQuery 中的 contains() 选择器，你可以找到某个元素中的文本。

3.5K3 0

Jump Start Bootstrap 第4章

我们将会看到如何添加下拉菜单到导航栏、切换按钮的状态、当点击按钮时漂亮的警告信息会在显示一段时间后消失等等功能。...要通过JQuery触发下拉插件，你需要使用方法dropdown(); $().dropdown('toggle'); 在页面加载后，我们可以使用这个方法把下拉插件的从关闭状态切换到开启状态。...让我展示一个如何使用这些事件的例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态，并打印每个事件触发时的状态。按钮在前面的章节中，我们看到了如何创建各种类型的按钮。这里，我们将看到使用Bootstrap的JavaScript插件如何在不同的状态使用它们，并且让它们切换状态。...Bootstrap按钮有两个状态；active和inactive,active状态有一个类”active”,但inactive状态没有关联类；相反的，你可以用下面的代码创建一个简单的按钮并切换状态。

35K4 0

每个程序员都会的 35 个 jQuery 小技巧

如果使用了两个CSS列，使用此种方式可以是两列的高度相同。...鼠标悬停(hover)切换 class 属性假如当用户鼠标悬停在一个可点击的元素上时，你希望改变其效果，下面这段代码可以在其悬停在元素上时添加 class 属性，当用户鼠标离开时，则自动取消该 class...禁用 input 字段有时你可能需要禁用表单的 submit 按钮或者某个 input 字段，直到用户执行了某些操作（例如，检查“已阅读条款”复选框）。...jQuery 中经常使用的动画效果，它们可以使元素显示效果更好。...DIV 高度相同有时你需要让两个 div 高度相同，而不管它们里面的内容多少。

5.3K1 0

收集的35个 jQuery 小技巧代码片段，可以帮你快速开发.

列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。....鼠标悬停(hover)切换 class 属性假如当用户鼠标悬停在一个可点击的元素上时，你希望改变其效果，下面这段代码可以在其悬停在元素上时添加 class 属性，当用户鼠标离开时，则自动取消该 class...16.禁用 input 字段有时你可能需要禁用表单的 submit 按钮或者某个 input 字段，直到用户执行了某些操作（例如，检查“已阅读条款”复选框）。...fade/slide fade 和 slide 是我们在 jQuery 中经常使用的动画效果，它们可以使元素显示效果更好。...DIV 高度相同有时你需要让两个 div 高度相同，而不管它们里面的内容多少。

6.2K2 0

jQuery Cheat—Sheet（jQuery学习笔记）

jQuery 2.0 不再支持IE 6/7/8 了，但是 jQuery 1.9 会继续支持 jQuery可以下载使用，有两个版本的 jQuery 可供下载 jquery-X.X.X.min.js...下面是两个具体的例子：试图隐藏一个不存在的元素获得未完全加载的图像的大小提示：简洁写法（与以上写法效果相同）: $(function(){ // 开始写 jQuery 代码... })...() 通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。...3em }); $(“#stop”).click(function(){ //无参数的暂停，一次点击，暂停一个animate动画，点击两次暂停两个动画 $(“div”).stop...**Chaining 允许我们在一条语句中运行多个 jQuery 方法**（在相同的元素上） ### jQuery 方法链接有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery

18.3K3 0

jQuery

jQuery 对象是经过包装的dom对象（伪数组形式存储） jQuery对象才能使用jQuery方法,不能混用 1.1.4 jQuery对象和Dom对象转换 // DOM对象转换成jQuery对象...$s(“Ii.current”) 交集元素 2.1.2 层级选择器名称用法描述子代选择器 $(“ul>li”); 使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素后代选择器...$(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 2.1.3 筛选选择器名称用法描述 :first $(‘li:first’) 获取第一个li元素 :last...div加定位，否则无效 3.2.5 事件切换 jQuery中有hover()事件，功能类似于css中的hover hover(function,function) 传入2个参数，第一个参数是鼠标移入是触发的函数...页面刷新缓存清除 data('myName','ljc');//向元素添加数据 data('myName');//向元素读取数据 4.1.4 全选按钮通过:checked选择器，可以以数组形式返回被选中的元素

10.3K1 0

与Ajax同样重要的jQuery（2）

表单选中元素配合基本过滤选择器，缩小选中的范围 4.jQuery的DOM操作使用jQuery的九种选择器可以基本选中需要操作的对象，但是为了提高jQuery的查询效率，可以结合jQuery的内置查找函数一起使用...]) 获取下一个兄弟元素 prev([expr]) 获取前一个兄弟元素 siblings([expr]) 获取所有兄弟元素在XML 解析中 find 方法使用最多对查找结果进行遍历操作 each(function...{ alert($(this).text()); }); // 使用remove方法删除 p元素，连同事件一起删除 // var $p = $("p").remove(); // 使用detach删除，...练习1： ² 为页面内所有p 元素绑定一次性事件，点击打印p元素中内容 ² 页面内有两个按钮，点击按钮1，触发按钮2的 click事件执行元素中内容 $("p").one("click",function(){ alert($(this).text()); }); //页面内有两个按钮，点击按钮1，触发按钮2的 click事件执行 $

7.4K5 0

WEB入门之十八动画特效

所以这几个函数都有一个参数来设置动画的速度，该参数的取值有： Ø 无参数：元素将直接显示/隐藏，没有动画特效 Ø slow：慢速（在600ms内）显示/隐藏 Ø normal：正常速度（在400毫秒内）...除了show和hide函数外，jQuery还提供了一个显示/隐藏切换动画函数toggle。该函数可以自动进行显示/隐藏的切换，同样可以使用一个参数来设置动画速度。...该函数可以自动进行向上/向下滑动的切换，同样可以使用一个参数来设置动画速度。...（0到1范围内的小数） fadeToggle( ) 元素淡入/淡出切换动画特效下面我们使用fadeIn、fadeOut和fadeTo来实现对图片的淡入淡出动画，参考代码如下所示。...，图片会在淡入和淡出动画之间进行切换，单击下面的单选按钮时可以使用fadeTo函数对图片的透明度进行精确控制 8.1 自定义动画在前面讲过的诸多动画函数中，基本上都是通过改变元素的高度、宽度和透明度来实现动画的

1.3K1 0

WEB入门之十八动画特效

1.2K1 0

一些好用的jquery技巧

1、返回顶部按钮通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画： // Back to top $('.top').click(function...5、悬停切换类假设你希望当用户将鼠标悬停在可点击的元素上时，它会改变颜色。...这就要在阻止默认动作上做文章了： $('a.no-link').click(function (e) { e.preventDefault(); }); 8、淡入/滑动切换滑动和淡入都是我们用jQuery...10、让两个div高度相同有时候，你需要让两个div无论包含什么内容都拥有相同的高度： $('.div').css('min-height', $('.main-div').height()); 设置...修复的时候要小心这个问题。 12、通过文本查找元素通过使用jQuery中的contains() 选择器，你可以找到元素内容的文本。

5.6K6 0

程序员都会的 35 个 jQuery 小技巧

列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。...15.鼠标悬停(hover)切换 class 属性假如当用户鼠标悬停在一个可点击的元素上时，你希望改变其效果，下面这段代码可以在其悬停在元素上时添加 class 属性，当用户鼠标离开时，则自动取消该...16.禁用 input 字段有时你可能需要禁用表单的 submit 按钮或者某个 input 字段，直到用户执行了某些操作（例如，检查“已阅读条款”复选框）。...fade/slide fade 和 slide 是我们在 jQuery 中经常使用的动画效果，它们可以使元素显示效果更好。...DIV 高度相同有时你需要让两个 div 高度相同，而不管它们里面的内容多少。

3.2K0 0

点击加载更多

JavaScript 学习-35.jQuery 基础语法与事件

jQuery

【Java 进阶篇】JQuery 事件绑定之事件切换：让页面动起来

【融职培训】Web前端学习第4章 jQuery 2 jQuery常用方法

Web前端学习第4章 jQuery 2 jQuery常用方法

在 jQuery Mobile 中使用 UI 组件

插上翅膀：JQuery 插件机制详解

前端开发JS——jQuery常用方法

JQuery高级应用

前端开发者都应知道的 jQuery 小技巧

Jump Start Bootstrap 第4章

每个程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧代码片段，可以帮你快速开发.

jQuery Cheat—Sheet（jQuery学习笔记）

jQuery

与Ajax同样重要的jQuery（2）

WEB入门之十八动画特效

WEB入门之十八动画特效

一些好用的jquery技巧

程序员都会的 35 个 jQuery 小技巧

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐