jQuery事件处理

最新推荐文章于 2024-11-15 10:59:00 发布

原创最新推荐文章于 2024-11-15 10:59:00 发布 · 328 阅读

1 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

3 篇文章

订阅专栏

jQuery事件处理
1, 页面加载后的执行
   类似window.onload，但有所不同
   jQuery加载后的特点：
       DOM树加载完毕后就开始执行；先于window.onload
       window.onload是html所有元素加载完毕才可以执行；
       jQuery是只要DOM树加载完成就可以执行；
       网速慢的情况下，可能会出现那种网页显示了部分信息，已显示的按钮无法点击的情况就是window.onload；
       jQuery的只要显示，就可以点击；即使整个网页未完全加载完毕；

2, 语法
   a, 第一种方法
       $(document).ready(function(){
           //页面的初始化操作
           //DOM树加载完成后就开始运行
       });
   b,    第二种方法
       $().ready(function(){
           //页面的初始化操作
           //DOM树加载完成后就开始运行
       });
   c, 第三种方法
       $(function(){
           //页面的初始化操作
           //DOM树加载完成后就开始运行
       })

3， jQuery的事件绑定
   1，方式1
       $obj.bind('事件名称',事件处理函数);
       eg:
       $obj.bind('click',function(){
           //事件的行为操作
           console.log('...');
       })
   2, 方式2
       $obj.事件名称(function(){
           //事件的行为操作
       })
       eg:
       $obj.click(function(){
           //this来表示触发事件的DOM对象
       })

   3, 事件对象-event
       在绑定事件的时候，允许传递event参数表示事件对象；
           $obj.事件名称(function(event){
           //事件的行为操作
           })
       event的使用方式与原生JS事件中的event方法一致
       event.stopPropagation();
       event.offsetX:
       event.offsetY;
       event.target: 获取事件源

练习：
   优化购物车页面；
   1， jQuery方式完善修改和删除按钮
   2，名字不变，价格不变；只修改数量
   3，点击修改时，数量变为 - num + 的方式
   4，实现-和+功能
   5，修改时，修改按钮变为确定；
   6，点击确定时，文本框恢复为原本样式；商品数量更新为新修改的数量值

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
	<style>
		table{
			border:1px solid #000;
			border-collapse:collapse;
		}
		td{
			border: 1px solid #000;
			text-align:center;
		}
		.pdNum{
			height:20px;
			width:40px;
			text-align:center;
			border: 1px solid #000;
			box-sizing:border-box;
			font-size:21px;
			vertical-align:middle;
		}
	</style>
 </head>
 <body>
	
	<table id="tdTb">
	<thead>
		<tr>
			<td><input type="text" id="pdName" placeholder="商品名称"></td>
			<td><input type="text" id="pdPrice" placeholder="商品价格"></td>
			<td><input type="text" id="pdNum" placeholder="商品数量"></td>
			<td><button onclick="pdAdd()">增加</button></td>
		</tr>
		<tr>
				<td>商品名称</td>
				<td>商品价格</td>
				<td>商品数量</td>
				<td>操&nbsp&nbsp&nbsp&nbsp作</td>
			
		</tr>
	</thead>
	</table>
	<script src='jquery-1.11.3.js'></script>
	<script>
		function pdAdd(){
			var $pdTb = $('#tdTb');
			//创建元素
			var $pdItem = $('<tr></tr>')
			var $pdName  = $('<td></td>');
			var $pdPrice = $('<td></td>');
			var $pdNum = $('<td></td>');
			var $pdOper = $('<td></td>');
			var $pdBtCha = $("<button>修改</button>")
			var $pdBtDel = $("<button>删除</button>")
			//增加元素
			$pdTb.append($pdItem);
			$pdItem.append($pdName);
			$pdItem.append($pdPrice);
			$pdItem.append($pdNum);
			$pdItem.append($pdOper);
			$pdOper.append( $pdBtCha);
			$pdOper.append($pdBtDel);
			//设置元素的值
			$pdName.html($('#pdName').val());
			$pdPrice.html($('#pdPrice').val());
			$pdNum.html($('#pdNum').val());
		
			//设置删除按钮的事件
			$pdBtDel.click(function(){
				if (confirm('确认删除吗？'))
				{
					$(this).parent().parent().remove();
				}
			})
			//修改按钮click事件
			$pdBtCha.click(function(){
				
				var $pdNum = $(event.target).parent().prev();
				if ($(this).text() == '修改')
				{
					//执行修改操作
					var num = $pdNum.text();
					$pdNum.html('');
					//并且增加2个botton和一个文本框，初始值是里面原td的值；
					var $btnSub = $("<button>-</button>");
					var $iptNum = $("<input type='text'>");
					$iptNum.val(num);
					$iptNum.addClass('pdNum');
					var $btnAdd = $("<button>+</button>");
					$btnAdd.attr('id','btnAdd');
					//按钮添加到td中
					$pdNum.append($btnSub);
					$pdNum.append($iptNum);
					$pdNum.append($btnAdd);
					//点击-botton的时候，文本框的数值减少,动态绑定事件
					$btnSub.click(function(){
						var num = $iptNum.val();
						if ( num > 1)
						{
							$iptNum.val(--num);
						}else{
							$iptNum.val(1);
						}
					})
					//点击+ botton的时候文本框的数值增加，动态绑定事件
					$btnAdd.click(function(){
						var num = $iptNum.val();
						if (num < 0)
						{
							num = 1;
						}else{
							num ++;
						}
						$iptNum.val(num); 
					})
					//将原修改按钮变为确定按钮；
					//当按下确定时，商品数量列变为确定值；+-button消失；
					var $btnCha = $(event.target);
					$(this).html('确定');
				}else{
					//执行确认操作 				
					var num = $pdNum.children('input').val();
					//$pdNum.empty();
					$pdNum.html(num);
					$(this).html('修改');
				}		
			})
		}
	</script>
 </body>
</html>