jQuery事件

最新推荐文章于 2024-03-20 08:53:45 发布

原创最新推荐文章于 2024-03-20 08:53:45 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

7 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery事件</title>
<script src="../websites/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<span id='demo'>
  <h5>什么是jQuery？</h5>
  <div class="content">
    jQuery是继Prototype之后又一个优秀的Javascript库
  </div>
</span>
<div class="demo1">
<p>我是段落</p>
</div>
<form action="">
   请输入用户名:<input type="text">
   <button>提交</button>
</form>
<button id="demo3">提交</button>
</body>
</html>
<script>
$(function(){
	$('#demo h5').hover(function(){
		  $(this).next().toggle();
	})
	$('#demo h5').hover(function(){
		$(this).addClass('highlight');
		$(this).next().show();
		},function(){
			$(this).next().hide();
			$(this).removeClass('highlight');
		})
		//冒泡行为
		$('.demo1 p').click(function(e){
			e.stopPropagation();//阻止冒泡行为
			alert('点击的是段落');
			})
		$('.demo1').click(function(){
			alert('点击的是div');
			})
		$(document).click(function(){
			alert('点击的是document');
			})
		$('form button').click(function(e){
			alert('请输入用户名');
			e.preventDefault();//相当于return false
			return false;
			})
			//事件捕获 是冒泡行为的逆过程 jQuery不支持事件捕获 如果需要使用，要用原生的javascript
			//事件对象的相关属性
			//1.event.type 获取事件的类型
			//2.e.preventDefault() 阻止默认行为
			//3.e.stopPropagation() 阻止冒泡行为
			//4.e.target 获取触发事件的元素
			//5.e.relatedTarget 获取触发事件的相关元素
			//6.e.which 鼠标事件中：获取的是鼠标按键(1=鼠标左键；2=鼠标中键；3=鼠标右键)；键盘事件中：获取的是键盘按键的代码
			//移除事件：unbind([type],[data])方法 第一个参数是事件类型；第二个参数是要删除的处理函数
			//one()方法：用法和bind方法类似，不同的地方是：触发一次后，立即被删除，即在每个对象上，事件处理函数只会被执行一次
			//模拟操作：trigger(type,[data])方法,有两个参数，第一个参数是要触发的事件类型，第二个参数是传递给事件处理函数的附加数据，以数组形式传递
			//触发系统自带事件
			$('#demo').click(function(e){
			alert('点击的是段落');
			})
			$('#demo').trigger("click");
			//触发自定义事件
			$('#demo').bind('myFunction',function(){
				   alert('我是自定义事件');
				})
			$('#demo').trigger('myFunction');
			//执行默认操作 
			$('input').trigger('focus');//不仅执行focus事件，也会使自身获得焦点(浏览器默认操作)；如果不想执行浏览器默认操作，可以使用triggerHandler()方法
			$('input').triggerHandler('focus');//只会触发focus事件，文本框不会获得焦点
			
			
			
	})
</script>