JQuery—04

最新推荐文章于 2024-08-31 10:44:02 发布

一个没学懂Java的YT

最新推荐文章于 2024-08-31 10:44:02 发布

阅读量109

点赞数

分类专栏： jQuery 文章标签： jQuery 事件绑定动画效果事件传播元素操作

本文链接：https://blog.csdn.net/javajsjsh/article/details/123662915

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#aa{
width:200px;
height:200px;
background-color:yellow;
position: absolute;
top:50px;
left:50px;
}
p{
text-align:center;
background-color:deeppink;
}
.abc{
transform: rotate(360deg);
transition: all 2s;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

<script type="text/javascript">
// 1.1事件
// 加载DOM两种方式

// js会被覆盖
// window.οnlοad=function(){
// console.info("js方式");
// }
// // 可以写多个
// $(function(){
// console.info("jquery1方式");
// })
// $(function(){
// console.info("jquery2方式");
// })
// $(function(){
// console.info("jquery3方式");
// })

// 1.2绑定事件的两种方式(区别)
$(function(){
// $("#aa").on("click",function(){
// alert("嘿嘿嘿");
// })
// $("#aa").bind("mouseover",function(){
// alert("张牛逼别睡觉");
// })
// $("#aa").mouseover(function(){
// alert(1);

// 1.3合成事件/事件切换
// --hover()悬停控制元素[div]的显示和隐藏
// $("#aa").hide();//隐藏
// $("a").hover(function(){//鼠标移出事件
// $("#aa").show();//显示
// },function(){
// $("#aa").hide();
// })

// --toggle()大家控制元素[div]的显示和隐藏[注意版本问题]
// $("#aa").hide();隐藏
// $("a").toggle(function(){
// $("#aa").show();
// },function(){
// $("#aa").hide();
// })
//
// $("#aa").toggle(1000);

// 1. 4 事件的传播(事件冒泡) 小-->中-->大body
// $("p").click(function(){
// console.info("p被点击了");
// })
// $("div").click(function(){
// // console.info("div被点击了");
// return false;//阻止点击
// })
// $("body").click(function(){
// console.info("body被点击了");
// })

//1.5 事件event的坐标[了解: pageX，pageY]
// $("#aa").on("click",function(e){
// console.info(e.pageX,e.pageY);
// })
// 1.6事件的移除
// 按钮只能点击一次[2]
// $("#btn").click(function(){
// console.info(44944);//做一系列事情
// // 讲点击事件进行移除 off
// $("#btn").unbind("click");
// // 讲按钮禁用
// $("#btn").prop("disabled",true);
// })

// 一次事件
// $("#btn").click(function(){
// console.info(44944);
// $("#btn").prop("disabled",true);
// })
// --按钮点击偶数可行奇数用不行
// var i=1;
// $("#btn").click(function(){
// if(i%2==0){
// console.info(44944);
// }
// i++;
// })

//2.动画
// 2.1 基本动画[回调函数]
// $("#aa").hide();//默认隐藏
// $("#xx").click(function(){
// $("#aa").show(1000);
// 回调函数
//alert("来了，老弟")
// })
// $("#yy").click(function(){
// $("#aa").hide(2000);
// })
// $("#zz").click(function(){
// $("#aa").toggle(1000);
// })

// 2.2 滑动动画
// $("#aa").hide();//默认隐藏
// $("#xx").click(function(){
// $("#aa").slideDown(1000);
// })
// $("#yy").click(function(){
// $("#aa").slideUp(2000);
// })
// $("#zz").click(function(){
// $("#aa").slideToggle(1000);
// })
// 2.3 透明度
// $("#aa").hide();//默认隐藏 fade//褪色
// $("#xx").click(function(){
// $("#aa").fadeIn(1000);
// })
// $("#yy").click(function(){
// $("#aa").fadeOut(2000);
// })
// $("#zz").click(function(){
// $("#aa").fadeToggle(1000);
// })

// 2.4 自定义动画
// $("#bb").on("click",function(){
// $("#aa").animate({
// width:"100px",
// height:"300px",
// },1000);
// })

// 移动
// $("#bb").on("click",function(){
// $("#aa").animate({
// left:"100px",
// top:"200px",
// },2000);
// })
// 在自身基础上进行移动
// $("#bb").on("click",function(){
// $("#aa").animate({
// left:"+=5",
// top:"+=10",
// },100);
// })

//
// $("#bb").click(function(){
// // 给div增加abc样式
// $("#aa").addClass("abc");
// })
// })

</script>
</head>
<body>
<input type="button" value="点我试试" id="btn"/>
<a style="text-decoration: none" herf="#">显示</a>
<button id="xx">显示(展开)[淡入]</button>
<button id="yy">隐藏(收缩)[淡出]</button>
<button id="zz">显示/隐藏[淡入]/[淡出]</button>
<button id="bb">变变变</button>
<div id="aa">
</br>
</br>
<p>这是一巴掌</p>
</div>

</body>
</html>

一个没学懂Java的YT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JQuery—04

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #aa{ width:200px; height:200px; background-color:ye...
复制链接

扫一扫

专栏目录