复合事件与显示效果
时间:2019-12-22
本文章向大家介绍复合事件与显示效果,主要包括复合事件与显示效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
复合事件与显示效果
复合事件
hover(f1,f2):切换使用mouseover和mouseout()
toggle(f1,f2,f3,fn):版本问题(jquery1.9以前支持)
多个click()事件,toggle()还有其他含义(隐藏与显示)
$(function(){
$("#h1").mouseover(function(){
alert("悬浮");
});
});
$("#h1").hover(function(){alert("悬浮")},function(){alert("离开")});
/*$("body").toggle(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","yellow");
},function(){
$(this).css("background-color","green");
});*/
显示效果
形式:hide([速度],[回调函数]);
其中速度:可以是数字(毫秒),也可以是单词(fast normal slow,注意加双引号)
hide():隐藏
show:显示
toggle:切换隐藏与显示
淡入淡出 (透明度)
fadeIn():淡入 显示
fadeout:淡出 隐藏
控制高度
slideDown():下拉,显示
slideUp():上拉 隐藏
总结显示问题:
显示:show() fadeIn() slideDown()
隐藏:hide() dadeout() slideUp()
function myShow(){
// $("h3").show(3000,myCallBack);
//$("h3").slideDown(3000);//下拉
//$("h3").fadeIn(3000);//淡入
}
function myCallBack(){
// alert("显示完毕");
};
function myHide(){
// $("h3").hide(3000);
//$("h3").slideUp(3000);//上拉
//$("h3").fadeOut(3000);//淡出
}
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body >
<h1 id="h1">我是h1</h1>
<h3>h3h3</h3>
<p id="color1">color1</p>
<p id=""></p>
<button onclick="myShow()">显示</button>
<button onclick="myHide()">隐藏</button>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#h1").mouseover(function(){
alert("悬浮");
});
});
$(document).ready(function(){
$("#h1").hover(function(){alert("悬浮")},function(){alert("离开")});
//hover:等效于mouseover与mouseout
//toggle循环单击事件click
/*$("body").toggle(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","yellow");
},function(){
$(this).css("background-color","green");
});*/
//toggle:还具备隐藏于显示
/*hide:隐藏
show:显示
toggle:隐藏于显示*/
$("#color1").css({"color":"red","font-size":"100px","background-color":"gray"})
});
// 显示与隐藏:
function myShow(){
// $("h3").show(3000,myCallBack);
//$("h3").slideDown(3000);//下拉
//$("h3").fadeIn(3000);//淡入
}
function myCallBack(){
// alert("显示完毕");
};
function myHide(){
// $("h3").hide(3000);
//$("h3").slideUp(3000);//上拉
//$("h3").fadeOut(3000);//淡出
}
//控制高度
/*slideDown:下拉 显示
slideUp:上拉 隐藏*/
//操作DOM
/* a.样式操作(设置css)
jquery对象.css("属性名","属性值");
jquery对象.css({"属性名":"属性值","属性名":"属性值",...,"属性名":"属性值"});
*/
/*ii.追加或移除样式class
addClass("x");
addClass("x x x");
removeClass("x);
removeClass("x x x"");
removeClass();移除全部样式*/
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/x-i-n/p/12080020.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SAP Spartacus CmsPage的加载逻辑
- JUnit 5 测试 Spring 引擎的时候提示 junit-vintage 错误
- SAP Spartacus activeBaseSite的设置逻辑
- SAP Spartacus取语言设置的入口程序
- 几行 Python 代码实现文字识别,你敢信?
- SAP Spartacus的navigation初始化
- 大数据ETL实践探索 ---- 笔试面试考点
- jQuery 效果
- jQuery 样式操作
- Nginx 限制资源的访问
- 如何设计一个秒杀系统
- Linux下登录凭证窃取技巧
- kali修改root密码
- PPT画成这样,述职答辩还能过吗?
- 详解 Cookie,Session,Token