首页 > 其他分享 >JQuery事件绑定3事件切换

JQuery事件绑定3事件切换

时间:2022-08-23 09:34:09浏览次数:51  
标签:JQuery function 绑定 toggle 事件 backgroundColor 切换

JQuery事件绑定3事件切换

事件切换: toggle

      jq对象,toggle(fn1,fn2)

      当单击jq对象对应的组件后,会执行fn1,第二个点击会执行fn2...

  案例:

    

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(function () {
//获取按钮,调用toggle方法
$("#btn").toggle(function () {
//改变div背景色backgroundColor 颜色为 green
$("#myDiv").css("backgroundColor","green");
},function () {
//改变div背景色backgroundColor 颜色为 pink
$("#myDiv").css("backgroundColor","pink");
});
});

</script>
</head>
<body>

<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色,再次点击红色
</div>
</body>
</html>

标签:JQuery,function,绑定,toggle,事件,backgroundColor,切换
From: https://www.cnblogs.com/ssr1/p/16615010.html

相关文章

  • 全局事件总线
    1.引入库在src/until/event-bus.jsimport{HYEventBus}from'hy-event-store'consteventBus=newHYEventBus()exportdefaulteventBus 2.使用 ......
  • 关于ul点击事件委托给li时的鼠标拖动问题
    网上查看后发现Click可以被两个事件触发:mouseUp与mouseDown,即点击和松开时都会触发一次。随后当我从一个li点击拖动到其他li松开时,触发的事件对象因为冒泡变成了父元素ul,......
  • WPF绑定
    初学者。博客仅做个人的理解整理,不到位的地方欢迎大佬们指出,感谢。 1.绑定使用的关键字:Binding2.为什么要?把界面上的控件的属性和后台的变量绑定起来,达到效果:在后代修......
  • 关于jQuery的几条常用代码
    1、next();//获取当前元素的下一个兄弟元素 2、nextAll();//获取当前元素后面所有的兄弟元素 3、prev();//获取当前元素的前一个兄弟元素 4、pr......
  • JQuery_遍历_for循环、JQuery_遍历2_each方法
    JQuery_遍历_for循环2.遍历1.js的遍历方式*for(初始化值;循环结束条件;步长)2.jq的遍历方式1.jq对象.each(callback)2.$.each(object,[callback])3.for..of: ......
  • JQuery_MOD操作_CRUD操作
    JQuery_MOD操作_CRUD操作CRUD操作:1.append():父元素将子元秦追加到末尾*对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾2.prepend():父元素将子元......
  • 日常开发记录-elementUI表格特殊值标红,利用插槽,vue动态绑定类名
    代码:<template><el-table:data="tableData"style="width:100%"><el-table-columnprop="date"label="日期"width="150"></......
  • JQuery_选择器_层级选择器、JQuery_选择器_属性选择器
    JQuery_选择器_层级选择器层级选择器Ⅰ1.后代选择器*语法:$("AB")选择A元秦内部的所有B元素2.子选择器*语法:$("A>B")选择A元素内部的所有B子元素JQuery_选择器_属性选择......
  • JQuery事件绑定&入门函数&样式控制、JQuery_选择器_基本选择器
    JQuery事件绑定&入门函数&样式控制选择器:筛选具有相似的特征的元素(标签)基本语法学习:1事件的绑定2入口函数3样式控制window.on......
  • jQuery快速入门、jQuery对象与js对象区别&转换
    jQuery快速入门1下载jQuery有三个大版本∶1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项自来说,使用1.x版本就可以了,最终版本:1.12.4(2016年5月2......