Jquery事件大全
Jquery事件大全
事件介绍和支持的对象
| 事件 | 描述 | 支持元素或对象 |
|---|---|---|
| blur( ) | 元素失去焦点 | a, input, textarea, button, select, label, map, area |
| change( ) | 内容改变 仅适用于表单 | input, textarea, select |
| click( ) | 鼠标点击某个对象 | 几乎所有元素 |
| hover() | 鼠标悬浮在某个对象上 | 几乎所有元素 等同 |
| dblclick( ) | 鼠标双击某个对象 | 几乎所有元素 |
| focus( ) | 元素获得焦点 | a, input, textarea, button, select, label, map, area |
| keydown( ) | 某个键盘的键被按下 | 几乎所有元素 |
| keypress( ) | 某个键盘的键被按下或按住 | 几乎所有元素 |
| keyup( ) | 某个键盘的键被松开 | 几乎所有元素 |
| load( ) | 加载外部文件 | html txt … |
| mousedown() | 某个鼠标按键被按下 可以监听 鼠标左右中 | 几乎所有元素 |
| mousemove() | 鼠标在元素内部移动时不断触发 | 几乎所有元素 |
| mouseout( ) | 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 | 几乎所有元素 |
| mouseover( ) | 鼠标被移到某元素之上 持续冒泡 不论鼠标指针穿过被选元素或子元素，都会触发 | 几乎所有元素 |
| mouseenter | 鼠标移入元素范围内触发 该事件不冒泡 即鼠标移到子元素上时不会触发。 也就是触发一次 | 几乎所有元素 |
| mouseleave | 鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到子元素时不会触发。 也就是触发一次 | 几乎所有元素 |
| mouseup( ) | 鼠标点击后被松开 | 几乎所有元素 |
| resize( ) | 窗口或框架被调整尺寸 | window, iframe, frame |
| scroll( ) | 滚动文档的可视部分时 | window |
| select( ) | 文本被选定 | document, input, textarea |
| submit( ) | 表单 提交按钮被点击 | form |
我们来对上面的大部分常用的事件进行演示 没有演示到的自行查百度 还有很多事件在1.8之后被废弃掉了 以上都是能用的事件
常用的窗体事件
load( )加载事件
本质是使用Ajax来完成的
创建一个new_file1.html
<h1>哈哈</h1>
<h1>哈哈</h1>
<p id="p_1">idididididididi</p>
<p class="class_1">123456321</p>
<p class="class_1">asdgf</p>可以使用load 来导入其他html的指定内容 可以通过 class id 和 标签选择器 这三种方式 多个使用逗号隔开
语法: load(‘地址 选择器…’,回调函数 )
$(document).ready(function(){
$("#Div").load('./new_file1.html h1,#p_1,.class_1',function(da){
console.log("加载成功")
});
})resize( ) 窗口大小变动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style> *{ margin: 0; padding: 0; } </style>
</head>
<body>
<div style="width:1500px;height: 1000px;border: 1px saddlebrown solid;"></div>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script> $(window).resize(function() { console.clear() console.log("窗体被调整了") console.log("浏览器窗口可视区域高度___" + $(window).height()); //浏览器时下窗口可视区域高度 console.log("浏览器窗口可视区域宽度___" + $(window).width()); //浏览器时下窗口可视区域宽度 console.log("浏览器窗口文档总高度____" + $(document).outerHeight(true)); //浏览器时下窗口文档body的总高度 console.log("浏览器窗口文档总宽度_____" + $(document).width()); //浏览器时下窗口文档对于象宽度 console.log("获取滚动条到顶部的高度_____" + $(document).scrollTop()); //获取滚动条到顶部的垂直高度 console.log("获取滚动条到左边的宽度___" + $(document).scrollLeft()); //获取滚动条到左边的垂直宽度 }); </script>
</body>
</html>scroll( ) 滚动条发送变化
下面是一些常用的 功能代码
游览器窗口监听 滚动条滚动方向
<div style="width: 1000px; height: 200px; border: 1px salmon solid;">
</div>
<div style="width: 200px; height: 200px; border: 1px cadetblue solid;">
</div>
<div style="width: 200px; height: 200px; border: 1px darkgoldenrod solid;">
</div>
<div style="width: 200px; height: 200px; border: 1px aquamarine solid; background-color: seashell;" id="div_s">
测试区
</div>
<div style="width: 200px; height: 200px; border: 1px sandybrown solid;">
</div>
<div style="width: 200px; height: 200px; border: 1px gold;">
</div>
<div style="width: 200px; height: 200px; border: 1px darkcyan solid;">
</div>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript">
window.onscroll = function(e){
console.clear()
scrollFunc();
if(scrollDirection == 'down'){
//页面向下滚动要做的事情
console.log("下")
}
if(scrollDirection == 'up'){
//页面向上滚动要做的事情
console.log("上")
}
if(scrollDirection == 'left'){
//页面向左滚动要做的事情
console.log("左")
}
if(scrollDirection == 'right'){
//页面向右滚动要做的事情
console.log("右")
}
}
var scrollAction = {x: 'undefined', y: 'undefined'}, scrollDirection;
function scrollFunc() {
if (typeof scrollAction.x == 'undefined') {
scrollAction.x = window.pageXOffset;
scrollAction.y = window.pageYOffset;
}
var diffX = scrollAction.x - window.pageXOffset;
var diffY = scrollAction.y - window.pageYOffset;
if (diffX < 0) {
// Scroll right
scrollDirection = 'right';
} else if (diffX > 0) {
// Scroll left
scrollDirection = 'left';
} else if (diffY < 0) {
// Scroll down
scrollDirection = 'down';
} else if (diffY > 0) {
// Scroll up
scrollDirection = 'up';
} else {
// First scroll event
}
scrollAction.x = window.pageXOffset;
scrollAction.y = window.pageYOffset;
}
</script>自己查看控制台 看效果
查询 带滚动条的元素 的滚动方向
一般就只有上滚动和下滚动 而不允许左右滚动
$("#texts_1").scroll(function(){
console.clear()
var oScrollTop=$(this).scrollTop();
if ( oScrollTop > 80) {
sign = oScrollTop;//更新scrollTop
console.log('向下');
}
if ( oScrollTop< 80) {
sign = oScrollTop//更新scrollTop
console.log('向上');
}
})当div 超出可视部分 和离开可视部分 那么就会触发****打开控制台查看结果
可视部分就是游览器能看见内容的区域 会随着调整游览器窗体大小而变化
<div style="width: 1000px; height: 200px; border: 1px salmon solid;">
</div>
<div style="width: 200px; height: 200px; border: 1px cadetblue solid;">
</div>
<div style="width: 200px; height: 200px; border: 1px darkgoldenrod solid;">
</div>
<div style="width: 200px; height: 200px; border: 1px aquamarine solid; background-color: seashell;" id="div_s">
测试区
</div>
<div style="width: 200px; height: 200px; border: 1px sandybrown solid;">
</div>
<div style="width: 200px; height: 200px; border: 1px gold;">
</div>
<div style="width: 200px; height: 200px; border: 1px darkcyan solid;">
</div>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript"> // 第一种情况 由于元素随页面向上滚动, 整个页面滚动的距离 大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出 // 第二种情况 由于元素随页面向下滚动, 整个页面滚动的距离 小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出 // 第三种情况 就是 元素 在可视 区域 //需要判断的元素 var en=document.getElementById("div_s"); $(document).scroll(function() { console.clear() // 1.元素距离页面顶部的距离 var mainOffsetTop = $(en).offset().top; console.log("元素距离页面顶部的距离 " + mainOffsetTop) // 2.元素的高度 var mainHeight = $(en).height(); console.log("元素的高度" + mainHeight) // 3.页面滚动的距离 var windowScrollTop = $(window).scrollTop(); // 4.浏览器可见区域的高度 var windowHeight = $(window).height(); console.log("浏览器可见区域的高度" + windowHeight) var pd1 = windowScrollTop > (mainOffsetTop + mainHeight) var pd2 = windowScrollTop < (mainOffsetTop - windowHeight) var pd3 = windowScrollTop < mainOffsetTop && !(windowScrollTop < (mainOffsetTop - windowHeight + mainHeight)) var pd4 = windowScrollTop > (mainOffsetTop - windowHeight + mainHeight) && !(windowScrollTop > mainOffsetTop) if (pd1) { console.log("元素被上面完全盖住了") } if (pd2) { console.log("元素被下面完全盖住了") } scrollFunc(); //开启滚动检测 if (scrollDirection == 'up') { //页面向上滚动要做的事情 if (pd3) { //必须元素完整的从上面显示出来 console.log("元素从上面完整显示出来了") } } if (scrollDirection == 'down') { //页面向下滚动要做的事情 if (pd4) { //必须元素完整的从下面显示出来 console.log("元素从下面完整显示出来了") } } if (pd1 == false && pd2 == false) { //只要元素漏出一点点都可以 算是在可视区域 console.log("元素在可视区域") } }) var scrollAction = { x: 'undefined', y: 'undefined' }, scrollDirection; function scrollFunc() { if (typeof scrollAction.x == 'undefined') { scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset; } var diffX = scrollAction.x - window.pageXOffset; var diffY = scrollAction.y - window.pageYOffset; if (diffX < 0) { // Scroll right scrollDirection = 'right'; } else if (diffX > 0) { // Scroll left scrollDirection = 'left'; } else if (diffY < 0) { // Scroll down scrollDirection = 'down'; } else if (diffY > 0) { // Scroll up scrollDirection = 'up'; } else { // First scroll event } scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset; } </script>我们一般情况能用到的
// 元素被上面完全盖住了
var pd1 = windowScrollTop > (mainOffsetTop + mainHeight)
//元素被下面完全盖住了
var pd2 = windowScrollTop < (mainOffsetTop - windowHeight)
// 元素从上面完全显示出来
var pd3 = windowScrollTop < mainOffsetTop && !(windowScrollTop < (mainOffsetTop - windowHeight + mainHeight))
// 元素从下面完全显示出来
var pd4 = windowScrollTop > (mainOffsetTop - windowHeight + mainHeight) && !(windowScrollTop > mainOffsetTop)
//元素被下面盖住一半
var pd5 =windowScrollTop < (mainOffsetTop - (windowHeight-(mainHeight/2) ))
//元素从下面显示出来
var pd6=windowScrollTop < (mainOffsetTop - (windowHeight-mainHeight ))
//元素从上面显示出来
var pd7=windowScrollTop < (mainOffsetTop+mainHeight)
// 元素被上面盖住了一半
var pd8 = windowScrollTop > (mainOffsetTop + (mainHeight/2))我们想要完成 某些功能 可以从上面的代码中 提取 出你想要的功能 来组合
比如:
我们可以根据 元素 进入到可视部分 和 离开可视部分 写一个 显示和隐藏动画
当元素从 不可视 到 可视 执行一次显示动画
当元素从 可视 到 不可视 执行一次隐藏动画
以页面底部为基准
我们可以定义二个变量 第一个变量来作为显示限制只执行一次 第二个变量作为隐藏限制只执行一次
以一半为基准隐藏 以开头为基准 显示
下面案例 使用的是Jquery 自带的 淡入 淡出 动画
<div style="width: 1000px; height: 200px; border: 1px salmon solid;">
</div>
<div style="width: 200px; height: 200px; border: 1px cadetblue solid;">
</div>
<div style="width: 200px; height: 200px; border: 1px darkgoldenrod solid;">
</div>
<div style="width: 200px; height: 200px; border: 1px aquamarine solid; background-color: seashell;" id="div_s">
测试区
<div style="display: none; width: 100px;height: 100px;background-color: black;" id="div_s_1">
</div>
</div>
<div style="width: 200px; height: 200px; border: 1px sandybrown solid;">
</div>
<div style="width: 200px; height: 200px; border: 1px gold;">
</div>
<div style="width: 200px; height: 200px; border: 1px darkcyan solid;">
</div>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript"> var shwo1 = true, hide1 = true; // 第一种情况 由于元素随页面向上滚动, 整个页面滚动的距离 大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出 // 第二种情况 由于元素随页面向下滚动, 整个页面滚动的距离 小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出 // 第三种情况 就是 元素 在可视 区域 //需要判断的元素 var en = document.getElementById("div_s"); $(document).scroll(function() { console.clear() // 1.元素距离页面顶部的距离 var mainOffsetTop = $(en).offset().top; console.log("元素距离页面顶部的距离 " + mainOffsetTop) // 2.元素的高度 var mainHeight = $(en).height(); console.log("元素的高度" + mainHeight) // 3.页面滚动的距离 var windowScrollTop = $(window).scrollTop(); // 4.浏览器可见区域的高度 var windowHeight = $(window).height(); console.log("浏览器可见区域的高度" + windowHeight) //元素被下面盖住一半 var pd5 = windowScrollTop < (mainOffsetTop - (windowHeight - (mainHeight / 2))) //元素从下面显示出来 var pd6 = windowScrollTop < (mainOffsetTop - (windowHeight - mainHeight)) scrollFunc(); //开启滚动检测 if (scrollDirection == 'up') { //页面向上滚动要做的事情 if (pd5 && hide1) { console.log("元素一半开始隐藏") $("#div_s_1").hide(500) hide1 = false shwo1 = true // alert("隐藏") } } if (scrollDirection == 'down') { //页面向下滚动要做的事情 if (pd6 && shwo1) { //必须元素完整的从下面显示出来 console.log("开始显示") $("#div_s_1").show(500) shwo1 = false hide1 = true // alert("显示") } } }) var scrollAction = { x: 'undefined', y: 'undefined' }, scrollDirection; function scrollFunc() { if (typeof scrollAction.x == 'undefined') { scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset; } var diffX = scrollAction.x - window.pageXOffset; var diffY = scrollAction.y - window.pageYOffset; if (diffX < 0) { // Scroll right scrollDirection = 'right'; } else if (diffX > 0) { // Scroll left scrollDirection = 'left'; } else if (diffY < 0) { // Scroll down scrollDirection = 'down'; } else if (diffY > 0) { // Scroll up scrollDirection = 'up'; } else { // First scroll event } scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset; } </script>
我博客文章模块 使用的就是这效果 完成的 只是动画是自己写的 但是差不到哪里去
http://boke.huitoushian.cn/
常用表单事件
focus( )获取焦点
<input type="text" />
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript"> $("input").focus(function() { $(this).val("获取焦点了") }) </script>鼠标点击文本框 显示获取焦点了
第二种用法是 设置焦点
<input type="text" />
<button>激活焦点</button>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript">
$("button").click(function() {
$("input").focus()
})点击button 激活文本框
blur( )元素失去焦点
<input type="text"/>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript"> $("input").blur(function(){ alert("焦点消失") }) </script>你鼠标点击文本框激活后 在点击其他地方就会触发
change( )内容改变
<input type="text" value="+++++"/>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript"> $("input").change(function(){ alert("内容发送变化了") }) </script>修改文本框内容后 点击其他地方 就会触发
focus( )获取焦点
<input type="text" />
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript"> $("input").focus(function() { $(this).val("获取焦点了") }) </script>鼠标点击文本框 显示获取焦点了
第二种用法是 设置焦点
<input type="text" />
<button>激活焦点</button>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript">
$("button").click(function() {
$("input").focus()
})点击button 激活文本框
select()文本被选中
<input type="text" value="1111111"/>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript">
$("input").select(function(){
alert("文本已选中!");
});
</script>还可以这样
页面加载 自动选中文本
<input type="text" value="1111111"/>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").select()
})
</script>submit( )表单提交
必须有<form>标签 才能触发 submit( )事件
return false 可以阻止表单提交事件
<form action="https://www.baidu.com" method="get" id="form_1">
<input type="text" id="text_1"/>
<input type="submit" />
</form>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript">
$("#form_1").submit(function(){
var name=$("#text_1").val()
if(name==""||name.trim().length==0){
alert("不能为空")
return false
}
})
</script>还可以这样使用
自己美化一个按钮 然后当点击这个按钮后 触发 表单内的提交按钮
<form action="https://www.baidu.com" method="get" id="form_1">
<input type="text" id="text_1"/>
<input type="submit" style="display: none;" id="sub_1"/>
<button style="background-color: aquamarine;" id="button_1">提交</button>
</form>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript"> //当点击button 触发 隐藏的submit按钮 $("#button_1").click(function(){ $("#sub_1").submit(); }) </script>常用鼠标事件
click( )点击某个元素
click事件只能监听左键
<p>点击我</p>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript"> $("p").click(function(){ alert("点击了") }) </script>鼠标点击 触发
mousedown()点击某个元素
可以检测
1.鼠标左键 button = 0
2.鼠标右键 button = 2
3.鼠标滑轮 button = 1
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript">
//键盘操作
$(document).mousedown(function(e) {
var event = e || window.event;
if (event.button == 0) {
alert('左键');
} else if (event.button == 1) {
alert('滑轮');
} else if (event.button == 2) {
alert('右键');
}
});
</script>hover()鼠标悬浮
<div style="width: 100px; height:100px; border: 1px saddlebrown solid;"></div>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript"> $("div").hover(function(){ $(this).text("悬浮了") }) </script>鼠标悬浮 在div 显示悬浮了
dblclick( )鼠标双击某个对象
<div style="width: 100px; height:100px; border: 1px saddlebrown solid;"></div>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript"> $("div").dblclick(function(){ $(this).text("双击了") }) </script>鼠标双击div 显示双击了
mouseleave 鼠标离开某个元素
<div id="div_1" style="width: 100px;height: 100px;border: 1px saddlebrown solid;"> </div>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript"> $("#div_1").mouseleave(function() { $(this).text("离开了") }); </script>常用键盘事件
1、keydown()：在键盘按下时触发。 (常用)
2、keyup()：是按下键盘起来后的事件。
3、keypress()：在敲击按键时触发，我们可以理解为按下并抬起同一个按键
查询ASCII 码
https://tool.oschina.net/commons?type=4
如果上面网站失效自己 去百度查询
我们也可以自己获取键盘码
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript">
//在键盘按下时触发
$(document).keydown(function(event) {
// 获取按下的 键盘码
alert(event.keyCode);
});
</script>上面例子中，event.keyCode 可以帮助我们获取到我们按下了键盘上的什么按键,它返回的就是 ASCII 码,
比如 上 下 左 右 键, 分别是38,40,37,39；
也可以用if(event.keyCode==”编码”){ 来判断用户按下了什么键来执行对应的操作 }
案例:
小说网站中常见的按左右键来实现上一篇文章和下一篇文章
按 ctrl+enter或者enter 实现表单提交（以此提高用户体验）；
如果我们要实现 ctrl+enter 提交表单，可以这样：
event.ctrlKey事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住。
event.altKey 事件属性可返回一个布尔值，指示当事件发生时，Alt 键是否被按下并保持住。
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).keydown(function(event) {
if (event.ctrlKey && event.keyCode == 13) {
alert('Ctrl+Enter');
}else if (event.keyCode == 13) {
alert('Enter');
};
switch (event.keyCode) {
case 37:
alert('方向键-左');
break;
case 39:
alert('方向键-右');
break;
};
return false;
});
</script>绑定和解除事件
绑定事件 有bind ,on ,live , one 这些绑定事件的方法 但是最长用的是bind绑定事件
和unbind解除绑定事件 以及 on(委托事件)
bind 绑定事件有三个参数 type事件类型 [date]可选参数 fn处理函数 其中data不是必须的
语法:绑定事件
$对象.bind(“类型”,function(){ })
语法:清除绑定事件
$对象.unbind()清除全部
$对象.unbind(“事件名”) //清除指定事件 多个事件用空格隔开
$对象.unbind(“事件名”,函数名称) //清除绑定到指定事上的函数
演示需要的HTMl
<p>asa</p>
<p>asfas</p>
<button type="button" id="gg">事件</button>
<button type="button" id="hh">解除事件</button>下面会将可以使用到的 事件绑定和解除绑定的方法 都演示一下
// 绑定事件 和 解除事件
$(document).ready(function(){
//绑定事件 每次绑定单个事件但是可以连续绑定
$("#gg").bind("click",function(){//点击时变红
$("p").css("color","red")
}).bind("mouseout",function(){//鼠标移开恢复黑色
$("p").css("color","black")
})
//解除clic和 mouseout事件
$("#hh").click(function(){
$("#gg").unbind("click mouseout");
})
})// 同时绑定多个事件
$(document).ready(function(){
$("[type='button']").bind
(
{
mouseover:function(){ //移入
$("p").css("color","red")
},
mouseout:function(){ //移除
$("p").css("color","black")
}
}
)
})我们还可以这样使用 让每个绑定到元素上的事件就执行一次
//也就是当鼠标进去 后出触发特效的同时 关闭了事件 下次进去了就没有此事件效果了
$(document).ready(function(){
$("[type='button']").bind
(
{
mouseover:function(){
$("p").css("color","red")
$(this).unbind("mouseover") //当执行完一次后 解除mouseover事件
},mouseout:function(){
$("p").css("color","black")
}
}
)
})比如多个 click 我只想解除其中 click事件中的 其中一个事件方法 需要在定义事件函数的时候设置变量
$(document).ready(function() {
$("#gg").bind
(
{
mouseover: xf = function() {
$("p").css("color", "red")
},
mouseout: function() {
$("p").css("color", "black")
}
}
)
//解除事件
$("#hh").click(function(){
$("#gg").unbind("mouseover",xf);
})
})解除 全部事件 不用指定清除的事件 直接清除所有已有的事件
$(document).ready(function() {
$("#gg").bind
(
{
click: xf = function() {//点击
$("p").css("color", "red")
},
dblclick: function() {//双击
$("p").css("color", "aquamarine")
}
}
)
$("#hh").click(function() {
$("#gg").unbind();
})
})动画事件
需要用到的HTML
<p>asa</p>
<p>asfas</p>
<button type="button" id="gg">显示</button>
<button type="button" id="hh">隐藏</button>元素显示和隐藏
show()显示 ,hide隐藏 动画 他们都有两个参数 但不是必须的
show()第一个参数是时间 规定元素从显示到隐藏完全不可见的速度 默认为0 hide()相反
第二个参数 回调函数 也就是执行完成后会自动执行的函数
我们来演示:
什么都不设置 就直接0秒 隐藏 和 显示 没有动画效果
$("#hh").click(function(){
$("p").hide()
})
$("#gg").click(function(){
$("p").show()
})只设置时间 有逐渐显示 和 逐渐隐藏的动画效果
$("#hh").click(function(){
$("p").hide(2000)
})
$("#gg").click(function(){
$("p").show(2000)
})执行设置时间 和 函数(可以用来事后改变样式等等)
$("#hh").click(function(){
$("p").hide(1000,function(){
alert("隐藏了")
})
})
$("#gg").click(function(){
$("p").show(1000,function(){
alert("显示了")
})
})淡入淡出 显示和隐藏 动画
淡入 fadeOut() 淡出 fadeIn()
都有两个可选的参数 第一个参数时间 第二个参数 回调函数 也就是执行完成后会自动执行的函数
用法和上面案例 差不多 这里就简单的演示下
//淡入 fadeOut()
$("#hh").click(function(){
$("p").fadeOut(1000,function(){
alert("我隐藏了")
})
})
//淡出 fadeIn()
$("#gg").click(function(){
$("p").fadeIn(1000,function(){
alert("我显示了")
})
})改变元素高度的显示和隐藏 动画
slideDown()从上到下展开 的动画 显示
slideUp()从下到上展开 的动画 隐藏
都有两个可选的参数 第一个参数时间 第二个参数 回调函数 也就是执行完成后会自动执行的函数
//从下到上
$("#hh").click(function(){
$("p").slideUp(1000,function(){
alert("我隐藏了")
})
})
//从上到下
$("#gg").click(function(){
$("p").slideDown(1000,function(){
alert("我显示了")
})
})自定义动画animate
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 “margin:30px”）。
字符串值无法创建动画（比如 “background-color:red”）。虽然不会报错但是不会执行 需要使用二进制颜色
也就是只能动画 长宽高 边框的边距 以及位置的变化
animate() 他有三个参数
第一个参数 添加的样式 (必须的) 可以添加多个样式 而参数可以使用变量 还可以使用+= -= 意思就是在原有的基础上 每次 加减
第二个参数 逐渐变化时间 ,
第三个 执行完 后回调的函数 也就是执行完成后会自动执行的函数
需要用到的HTML
<div style="width: 300px;height: 300px;border: 1px solid cadetblue;"></div>
<button id="gg">点击变化</button>单向 动画
var c=100;
var b=100;
$("#gg").click(function(){
//缩放后直接恢复 初始状态
$("div").animate({"width":"200px","height":c+b},2000,function(){
//恢复初始大小 没有动画效果0秒恢复
$(this).css({"width":"300px","height":"300"})
})
})双向 动画
var c=100;
var b=100;
$("#gg").click(function(){
// 动态 缩放 扩展
$("div").animate({"width":"200px","height":c+b},2000,function(){
alert("缩放")
}).animate({"width":"300px","height":"300px"},2000,function(){
alert("扩展")
})
})注意事项 在自定义动画中改变了原本属性 那么在后来的 指定执行的函数中就不可以使用
addClass() 来改原本的属性 只能用于设置除了定义中使用的属性之外的 所有 (可以自己试试,不是很准确) 主要是addClass比较简便 不用一行一行的添加
css 可以改变原本属性
还可以是用引用当前的元素.属性来改变当前的属性
停止当前正在运行的动画：
$(动画元素).stop() 停止当前动画 如果此元素绑定了多个动画 那么后续的动画还是会执行的
$(动画元素).stop (true) 停止被选元素的所有加入队列的动画。 不管此元素绑定了多少动画 都停止
你可以使用上面的 双向动画案例试试
添加下面这段代码
<button id="stop">停止动画</button>$("#stop").click(function(){
$("div").stop(); //试试 加true和不加true的区别
});复合事件
需要用到了HTML和CSS
<style> .read{
color: fuchsia;
}
</style><p>asa</p>
<p>asfas</p>
<button type="button" id="gg">事件</button>复合事件 hover 相当于mouseenter(鼠标移入),和mouseleave(鼠标移出)
$("#gg").hover(function(){
// 鼠标移入
$("p").css("background-color","yellow");
},function(){//鼠标移出
$("p").css("background-color","pink");
});复合事件 toggle方法 显示 和 隐藏
元素处于可见 就隐藏 元素处于隐藏 就显示
在jQuery中分为带参和不带参
不带参 0秒显示 0秒隐藏
带参数的方法 就是逐渐显示 和逐渐隐藏 的延迟动画
//不带参
$(document).ready(function(){
$("#gg").click(function(){
$("p").toggle()
})
})//带参数
$(document).ready(function(){
$("#gg").click(function(){
$("p").toggle(3000) //延迟逐渐3秒后 消失或者显示
})
})toggleClass()类样式的 添加样式 和 取消样式
简单来说 就是如果此元素 没有这个Class样式 那么就是添加 如果有这个样式了那么就是删除
$("#gg").hover(function(){
$("p").toggleClass("read")
},function(){
$("p").toggleClass("read")
})获取鼠标点击元素的各项参数
需要的HTML
<ul>
<li id="hh1" class="c1" name="n1">ghjaskdfd</li>
<li id="hh2" class="c2" name="n2" >asdsfdgfhgjhgf</li>
<li id="hh3" class="c3" name="n3">rgbhjmyutyndb</li>
</ul>作用范围 整个 页面
获取鼠标点击 元素 的 id class name text…
$(document).click(function(e) {
console.clear()
//获取鼠标点击的元素属性的值 id
var v_id = $(e.target).attr('id');
console.log(v_id)
//获取鼠标点击的元素属性的值 class
var v_class = $(e.target).attr('class');
console.log(v_class)
//获取鼠标点击的元素信息 name
var v_name = $(e.target).attr('name');
console.log(v_name)
//获取鼠标点击的文本信息 text() 或者html()
var v_text = $(e.target).text();
console.log(v_text)
})获取鼠标点击标签 获取标签名称的三种方法
//获取鼠标点击标签 获取标签名称的三种方法
$(document).click(function(e) {
console.clear()
var v_id1 = $(e.target).prop("tagName");
var v_id2 = $(e.target)[0].tagName;
var v_id3 = $(e.target).get(0).tagName
console.log(v_id1)
console.log(v_id2)
console.log(v_id3)
})//作用指定标签范围内 //
同级别
$("li").click(function(){
var a=$("li").index(this); //不能使用this 代替$("li")里的 li 否则获取的都是 0
console.log(a)
})父子级 比如 当前点击的ul 标签下 的 某个li标签 获取此标签的的下标 那么 选择器就是 父级是ul 也就是他的上一级
$("ul li").click(function(){
var c=$(this).index();
console.log(c)
})注意: 下标是从0开始的
获取鼠标点击的坐标
$("li").click(function(e) {
console.clear()
var y = $(this).offset().top;
var x = $(this).offset().left;
console.log(y)
console.log(x)
});点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_45203607/article/details/120247949
内容来源于网络，如有侵权，请联系作者删除！
相关文章
热门标签
更多最新文章
更多- 浏览(825) 发布于 2022-10-16
- 浏览(481) 发布于 2022-02-16
- 浏览(1130) 发布于 2022-02-07
- 浏览(417) 发布于 2021-11-19
- 浏览(531) 发布于 2021-09-25