likes
comments
collection
share

<L4>

作者站长头像
站长
· 阅读数 34

仅供本人学习使用，侵删

jquery函数的一个注意点

先看如下代码

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	
	$(function(){
		
		//删除用户的方法
		function delA(){
			//获取要删除员工的名字
			var name = $(this).parents("tr").find("td:eq(0)").text();
			//弹出一个确认框
			var flag = confirm("确认删除"+name+"吗？");
			if(flag){
				//删除当前a所在的tr
				$(this).parents("tr").remove();
			}
			//取消默认行为
			return false;
		}
		
		//删除用户
		//$("a").click(delA);
		//这里如果delA加了括号就是函数调用了，是一个返回值
		$("a").live("click" , delA);
		
		//添加员工
		$("#addEmpButton").click(function(){
			//获取用户填写的内容
			var name = $("#empName").val();
			var email = $("#email").val();
			var salary = $("#salary").val();
			
			//创建tr
			/*
				<tr>
					<td>Tom</td>
					<td>tom@tom.com</td>
					<td>5000</td>
					<td><a href="#">Delete</a></td>
				</tr>
			*/
			$("<tr></tr>").append("<td>"+name+"</td>")
						  .append("<td>"+email+"</td>")
						  .append("<td>"+salary+"</td>")
						  .append("<td><a href='#'>Delete</a></td>")
						  .appendTo("#employeeTable");
			
		});
	});
	
	
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="#">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="#">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="#">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>

<L4>

  1. 注意注释中的使用方法，封装的函数delA在调用时不能加括号，因为如果加了括号就是函数的调用是一个返回值，而click方法需要的是一个函数。 2.这里加了一行return false 这样就可以取消函数的默认行为，这里是取消了 超链接标签a被点击后的跳转行为

jquery的事件操作

$( function(){} );

window.onload = function(){} 区别:

触发时间： 1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。 2、原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。

触发顺序： 1、jQuery 页面加载完成之后先执行 2、原生 js 的页面加载完成之后

执行的次数： 1、原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。 2、jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行

事件的冒泡

事件的冒泡是指：父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

阻止事件冒泡： 在子元素事件函数体内，return false; 可以阻止事件的冒泡传递

javaScript 事件对象

事件对象，是封装有触发的事件信息的一个 javascript 对象。

获取 javascript 事件对象:

在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。 这个 event 就是 javascript 传递参事件处理函数的事件对象。

如:

//1.原生js获取
window.onload = function () {
document.getElementById("01").onclick = function (event) {
console.log(event);
}
}
//2.jquery获取
$(function () {
$("#01").click(function (event) {
console.log(event);
});
});

event包含的信息如下:

<L4>

转载自:https://juejin.cn/post/6963945102750269454
评论
请登录