2021-10-12

最新推荐文章于 2022-01-27 13:12:47 发布

ღฅ月亮ฅ

最新推荐文章于 2022-01-27 13:12:47 发布

阅读量56

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_62022218/article/details/120730070

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

事件
鼠标事件
语法：事件对象(dom元素).事件名称(function(){})
1.鼠标单击事件click()

<style>
.clk{
width:200px;
height:180px;
background-color:red;
}
.active{
background-color:blue;
}
</style>
<divclass="clk"></div>
<script>
$(function(){
$('.clk').click(function(){
$('.clk').toggleClass('active')
})
})
</script>

2.鼠标移出事件mouseout()
3.鼠标滑过事件mouseover()
表单事件
1.聚焦事件(获得焦点事件)focus()
2.失去焦点事件blur()
3.内容改变事件change()
4.表单提交事件submit()
注意:对象是form标签
键盘事件
1.键盘按下事件keydown()
2.键盘弹起事件keyup()
3.键盘按压事件keypress()
键盘码
jq中独有的事件方法
1.事件绑定方法bind()
2.事件解绑方法unbind()
3.只触发一次事件方法one()
4.on()
需要事件委托的元素的事件绑定一般都是动态创建的dom元素需要事件委托
七、动画效果
显示和隐藏
show()显示

<button>显示</button>
<button>隐藏</button>
<divclass="show">显示</div>
<script>
$(function(){
//单击显示按钮div显现
$('button:eq(0)').click(function(){
$('.show').show(2000)
})
})
</script>

hide()隐藏

<button>显示</button>
<button>隐藏</button>
<divclass="show">显示</div>
<script>$(function(){
//单击隐藏按钮div消失
$('button:eq(1)').click(function(){$('.show').hide(2000,function(){$(this).show(1000)
})
})
})
</script>

上拉和下拉
slideUp()上拉
slideDown()下拉
slideToggle()如果元素未显示下拉显示的就是上拉

<button>上拉</button>
<button>下拉</button>
<button>toggle</button>
<divclass="show">div标签</div>
<script>
$(function(){
$("button:eq(0)").click(function(){
$(".show").slideUp(2000)
})
$("button:eq(1)").click(function(){
$(".show").slideDown(2000)
})
$("button:eq(2)").click(function(){
$(".show").slideToggle(2000)
})
})
</script>

淡入和淡出
fadeIn()淡入
fadeOut淡出
fadeToggle()

<button>淡入</button>
<button>淡出</button>
<button>toggle</button>
<divclass="show">div标签</div>
<script>
$(function(){
$("button:eq(0)").click(function(){
$(".show").fadeIn(2000)
})
$("button:eq(1)").click(function(){
$(".show").fadeOut(2000)
})
$("button:eq(2)").click(function(){
$(".show").fadeToggle(2000)
})
})
</script>

自定义动画
animate()

<style>
.show{
width:240px;
height:180px;
background-color:red;
}
</style>
<body>
<divclass="show">div标签</div>
<script>
$(function(){
$(".show").animate({
"margin-top":'200px',
"margin-left":'300px'
},2000)
})
</script>

ღฅ月亮ฅ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-10-12

事件鼠标事件语法：事件对象(dom元素).事件名称(function(){})1.鼠标单击事件click()<style>.clk{width:200px;height:180px;background-color:red;}.active{background-color:blue;}</style><divclass="clk"></div><script>$(function(){$('.clk').clic
复制链接

扫一扫