jQ笔记2

jQ事件：

鼠标事件：click鼠标点击、dblclick鼠标双击、mouseenter鼠标指针放上、mouseleave鼠标指针移除、mousedown鼠标落下、mouseup鼠标松开

html：
<p>点我试试</p>

　　

jq：
<script>
	//单击字体颜色变黄
	$(function(){
		$("p").click(function(){
			$("p").css("color","yellow");		
		});
	});	
	//双击字体颜色变红
	$(function(){
		$("p").dblclick(function(){
			$("p").css("color","red");		
		});
	});
	//鼠标指针放上背景变灰
	$(function(){
		$("p").mouseenter(function(){
			$("p").css("background-color","#ccc");
		});
	});
	//鼠标指针移开背景恢复
	$(function(){
		$("p").mouseleave(function(){
			$("p").css("background-color","");
		});
	});

</script>

　　

<script>
	//鼠标按下会弹窗
	$(function(){
		$("p").mousedown(function(){
			alert("鼠标在该段落上按下");
		});
	});
	//鼠标松开会弹窗
	$(function(){
		$("p").mouseup(function(){
			alert("鼠标在该段落上松开");
		});
	});
</script>

　　2、hover事件：当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

html：
<p>我是一个段落</p>

　　

jq：
<script>
	$(function(){
		$("p").hover(function(){
			alert("你进入了p标签里面");
		},function(){
			alert("现在你离开了p标签");
		}
	   )
	})；
</script>

　　

3、focus（）当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点；

     blur（）元素失去焦点事件

html：
Name:<input type="text" name="fullname">
Email:<input type="text" name="email">

　　

jq：
<script>
	$(function(){
		$("input").focus(function(){
			$(this).css("background-color","yellow");
		});
		$("input").blur(function(){
			$(this).css("background-color","red");
		});
	});
</script>

　　

 

转载于:https://www.cnblogs.com/1500418882qqcom/p/10002091.html