Jquery(1)

时间:2024-01-05 20:29:08

鼠标点击事件:

<input type="button" value="测试" onclick="test()" />
<input type="button" value="测试2" id="btn" />

<input type="button" value="测试3" class="btn" />
<input type="button" value="测试4" class="btn" />
<input type="button" value="测试5" class="btn" />

<input type="button" value="挂事件" id="gua" />
<input type="button" value="测试事件" id="ceshi" />
<input type="button" value="移除事件" id="yichu" />

点击事件找到点击元素:

$(document).ready(function(e) {

$(".btn").click(function(){
			//alert("事件加上了");
			alert($(this).val());
		})

});

挂事件:

$(document).ready(function(e) {

	//点击给测试事件按钮挂一个事件
	$("#gua").click(function(){
			//bind方法用于挂事件
			$("#ceshi").bind("click",function(){
					alert("挂上了事件");
				});

		})

	//点击给测试事件按钮移除点击事件
	$("#yichu").click(function(){
			$("#ceshi").unbind("click");
		})

});

  

Jquery的鼠标全选事件:

body代码

<input type="checkbox" class="ck" /> 上海
<input type="checkbox" class="ck" /> 北京
<input type="checkbox" class="ck" /> 深圳
<input type="checkbox" class="ck" /> 广东
<input type="checkbox" class="ck" /> 香港

  

js代码:

$("#qx").click(function(){
		//var xz = $(this)[0].checked;
		var xz = $(this).prop("checked");
		$(".ck").prop("checked",xz);
	})

  

鼠标点击背景色改变,其他背景色复原:

body:

<div class="aa"></div>*9

js代码:

$(".aa").click(function(){
		//所有元素背景色变成原来的
		$(".aa").css("background-color","#3F6");
		//找到点击了谁
		$(this).css("background-color","red");
	})

  

Jquery(1)

Jquery(1)

鼠标移上事件:

js:

$(".aa").mousemove(function(){
		//所有元素背景色变成原来的
		$(".aa").css("background-color","#3F6");
		//找到
		$(this).css("background-color","yellow");
	})

 

如果想要鼠标点击和移上事件同时有,而且不冲突:

$(".aa").click(function(){
		//所有元素背景色变成原来的
		$(".aa").removeAttr("xz");
		$(".aa").css("background-color","#3F6");
		//找到点击了谁
		$(this).attr("xz","1");
		$(this).css("background-color","red");
	})

$(".aa").mousemove(function(){
		//所有元素背景色变成原来的
		$(".aa").css("background-color","#3F6");
		//找到
		$(this).css("background-color","yellow");
		$("[xz='1']").css("background-color","red");
	})

  Jquery(1)

Jquery(1)