jQuery事件方法

常用的jQuery事件方法

(1)$(document).ready()
( d o c u m e n t ) . r e a d y ( ) 允 许 我 们 在 文 档 完 全 加 载 后 完 成 执 行 函 数 等 价 于 (document).ready()允许我们在文档完全加载后完成执行函数等价于 (document).ready()允许我们在文档完全加载后完成执行函数等价于(function () {})
(2)click()
click()方法当按钮点击事件被触发的时候会调用一个函数,该函数在用户点击HTML元素的时候执行。
(3)blur()
失去焦点时触发,一般input输入框,当光标离开(失去焦点)就会触发。
(4)hover
鼠标悬停在元素上面触发。

显示与隐藏
hide()隐藏,将高度,宽度,透明度变成0
show()显示,将高度,宽度,透明度变成初始值
toggle() 开关 同时有隐藏和显示两种功能

<script type="text/javascript">
			$('#hide').click(function() {
				$('.p1').hide();
			})
			$('#show').click(function() {
				$('.p1').show();
			})
			$('#toggle').click(function() {
				$('.p1').toggle('fast');//快 fast 慢 slow
			})
		</script>
1
2
3
4
5
6
7
8
9
10
11

淡入(fadeIn)和淡出(fadeOut)

1
2
3
4
5
6
7
8
9
10
11
12
13
14


上滑(slideUp)和下拉(slideDown)

<script type="text/javascript">
			$('#slideUp').click(function() {
				$('#div1').slideUp(2000);
			})
			$('#slideDown').click(function() {
				$('#div1').slideDown(2000);
			})
			$('#slideToggle').click(function() {
				$('#div1').slideToggle();
			})
		</script>
1
2
3
4
5
6
7
8
9
10
11
捕获与设置
js获取文本内容:innerTex、,innerHTML、textContent

1
2
3
4
5
6


动画
animate()有三个参数,第一个参数就是你要改变的样式,第二个参数就是显示的速度(‘fast’,’slow’,毫秒数),第三个是回调函数

$('#start').click(function() {
			$('#div1').animate({height:'100px',opacity:'0.4',fontSize:'16px'},"slow");
			$('#div1').animate({width:'100px',opacity:'0.8',fontSize:'30px'},"slow");
			$('#div1').animate({height:'200px',opacity:'0.4',fontSize:'6px'},"slow");
			$('#div1').animate({width:'200px',opacity:'0.8',fontSize:'24px'},"slow");
			$('#div1').animate({height:'50px',opacity:'0.4',fontSize:'4px'},"slow");
			$('#div1').animate({width:'50px',opacity:'0.8',fontSize:'30px'},"slow");
		});
		$('#stop').click(function() {
			$('#div1').stop(false);//true停止当前以及后续动画 false只停止当前
		})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值