jQuery 基础事件 学习

2019年4月4日09:54:23 1 115

1、绑定事件: bind() 方法

在 JavaScript 中,常用的事件有:click、dblclick、 mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、 keypress、keyup、blur、focus、load、resize、scroll、error。

jQuery 通过  bind() 方法来为元素绑定这些事件。可以传递三个参数:bind(type, [data], fn), type 表示一个或多个类型的事件名字符串;[data]是可选的,作为 event.data 属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;fn 表示绑定到指定元素的处理函数。

//使用点击事件
$(’input’).bind(’click’, function () { //点击按钮后执行匿名函数
    alert(’点击!’);
});

//可以同时绑定多个事件
$(’input’).bind(’mouseout mouseover’, function () { //移入和移出分别执行一次
    $(’div’).html(function (index, value) {
        return value + ’1’;
    });
});

2、简写事件:mouseover() 、 mouseout() 与 mouseenter() 、 mouseleave() 的区别

mouseover() 和 mouseout() 表示鼠标移入和移出的时候触发。

mouseenter() 和 mouseleave() 表示鼠标穿过和穿出的时候触发。这组穿过子元素不会触发,而 mouseover() 和 mouseout() 则会触发。

//只有一个元素,没有子元素时,区别不大
$(’div’).mouseover(function () {
	$(this).css(’background’, ’red’);
}).mouseout(function () {
	$(this).css(’background’, ’green’);
});

$(’div’).mouseenter(function () {
	$(this).css(’background’, ’red’);
}).mouseleave(function () {
	$(this).css(’background’, ’green’);
});

//有子元素时,over会触发子节点,enter不会触发子节点;out 与leave同理
$(’div’).mouseenter(function() {				//enter不会触发子节点
	$(’strong’).html(function (index, value) {
		return value + ’1’;
	});
});

$(’div’).mouseleave(function() {					
	$(’strong’).html(function (index, value) {
		return value + ’1’;
	});
});

3、复合事件:hover() 方法

hover() 方法是结合了 mouseenter() 方法和 mouseleva() 方法,用起来更方便。

//背景移入移出切换效果
$(’div’).hover(function () {
	$(this).css(’background’, ’red’);//mouseenter 效果
}, function () {
	$(this).css(’background’, ’green’);//mouseleave 效果,可省略
});

//多个切换可以使用计数器
var flag = 1;
$(’div’).click(function () {
	if (flag == 1) {
		$(this).css(’background’, ’red’);
		flag = 2;
	} else if (flag == 2) {
		$(this).css(’background’, ’blue’);
		flag = 3;
	} else if (flag == 3) {
		$(this).css(’background’, ’green’);
		flag = 1;
	}
});

 

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:1   其中:访客  1   博主  0

    • 青衫慧博客 青衫慧博客 4

      学习JQuery,还不如学习原生JS。推荐学习原生JS。