JavaWeb之JQuery(Day03)DOM增删改及应用

dom增删改

 <script type="text/javascript" src="script/jquery-1.7.2.js">script>
    <script>
        $(function () {
      

            $("

appendTo插到最后面

").appendTo("form"); $("

prepend插到最前面

").prependTo("form"); }); script> head> <body> <form action="" method="post"> 你爱好的运动是?<input type="checkbox" id="checkedAllBox"> 全选/全不选 <br> <input type="checkbox" name="items" value="足球球">足球 <input type="checkbox" name="items" value="篮球球">篮球 <input type="checkbox" name="items" value="羽毛球">羽毛球 <input type="checkbox" name="items" value="乒乓球">乒乓球 <br> <input type="button" id="checkedAllBtn" value="全选"> <input type="button" id="checkedNoBtn" value="全不选"> <input type="button" id="checkedRevBtn" value="反选"> <input type="button" id="sendBtn" value="提交"> form> <div>1div> body>

两个下拉列表 从左到右 从右到左

<style type="text/css">
		select {
      
			width: 100px;
			height: 140px;
		}
		
		div {
      
			width: 130px;
			float: left;
			text-align: center;
		}
	style>
	<script type="text/javascript" src="script/jquery-1.7.2.js">script>
	<script type="text/javascript">
		// 页面加载完成
		$(function () {
      
			$("#btn1").click(function () {
      
				$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
			});
			$("#btn2").click(function () {
      
				$("select:eq(0) option").appendTo($("select:eq(1)"));
			});
			//
			$("button:eq(2)").click(function () {
      
				$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
			});
			$("button:eq(3)").click(function () {
      
				$("select:eq(1) option").appendTo($("select:eq(0)"));
			});
		});
	script>
head>
<body>

	<div id="left">
		<select multiple="multiple" name="sel01">
			<option value="opt01">选项1option>
			<option value="opt02">选项2option>
			<option value="opt03">选项3option>
			<option value="opt04">选项4option>
			<option value="opt05">选项5option>
			<option value="opt06">选项6option>
			<option value="opt07">选项7option>
			<option value="opt08">选项8option>
		select>
		
		<button id="btn1">选中添加到右边button>
		<button id="btn2">全部添加到右边button>
	div>
	<div id="rigth">
		<select multiple="multiple" name="sel02">
		select>
		<button>选中删除到左边button>
		<button>全部删除到左边button>
	div>

body>

动态的添加和删除行记录(封装方法优化)

  1. 事件响应函数中的this对象是当前响应事件的dom对象
  2. $核心函数创建的 Jquery的对象所调用的find()方法:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
  3. 绑定超链接标签的点击事件之后 查询要删除的元素,$(this).parent().parent()在例子中是tr标签,其中包含一条数据的所有值,在remove之前通过confirm()提示是否确认删除(if成立就删除),可以通过要删除的jquery对象调用find()方法查找要删除的一条数据中的某个值,给予用户提示信息
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript" src="script/jquery-1.7.2.js">script>
<script type="text/javascript">
	$(function () {
      
		// 向id为addEmp的按钮绑定点击事件
		$("#addEmp").click(function () {
      
			/*封装 删除按钮点击事件 函数*/
			var deleteFun = function () {
      
				// 查询删除的对象
				var $deleteObj = $(this).parent().parent(); // 事件响应函数中的this对象是当前响应事件的dom对象
				var text = $deleteObj.find("th:first").text();
				if( confirm("你确定要删除["+ text +"]吗?") ){
      
					$deleteObj.remove();
				}
				return false; // 阻止默认跳转行为
			}

			var $empName = $("#empName").val(); // 通过文本输入input标签获取用户名的值
			var $empEmail = $("#empEmail").val();
			var $empSalary = $("#empSalary").val();

			var $trObj = $("" +
					"" + $empName + "" +
					"" + $empEmail + "" +
					"" + $empSalary + "" +
					"Delete" +
					"");
			$trObj.appendTo("#employeeTable"); // 将标签对象添加到id为employeeTable中
			// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
			$trObj.find("a").click(deleteFun); // 给新添加的行的a标签绑定单击事件
		});
		// 原数据只有3条,只能对这三条数据的超链接标签点击生效,需要对新添加的一条数据绑定超链接标签事件
		$("a").click(function () {
      
			// 查询删除的对象
			var $deleteObj = $(this).parent().parent(); // 事件响应函数中的this对象是当前响应事件的dom对象
			var text = $deleteObj.find("th:first").text();
			if( confirm("你确定要删除["+ text +"]吗?") ){
      
				$deleteObj.remove();
			}
			return false; // 阻止默认跳转行为
		});
	});
script>
head>
<body>
	<table id="employeeTable">
		<tr>
			<th>姓名th>
			<th>邮箱th>
			<th>年薪th>
			<th> th>

		tr>
		<tr>
			<th>张三th>
			<th>[email protected]th>
			<th>15wth>
			<th><a href="deleteEmp?id=001">Deletea>th>
		tr>
		<tr>
			<th>李四th>
			<th>[email protected]th>
			<th>16wth>
			<th><a href="deleteEmp?id=002">Deletea>th>
		tr>
		<tr>
			<th>王五th>
			<th>[email protected]th>
			<th>17wth>
			<th><a href="deleteEmp?id=003">Deletea>th>
		tr>

	table>


	<div id="formDiv">
		<h3>添加新成员h3>
		<table>
			<tr>
				<th >用户姓名:th>
				<th >
					<input type="text" id="empName" name="empName">
				th>
			tr>
			<tr>
				<th >用户邮箱:th>
				<th >
					<input type="text" id="empEmail">
				th>
			tr>
			<tr>
				<th >用户年薪:th>
				<th >
					<input type="text" id="empSalary">
				th>
			tr>
			<tr>
				<th colspan="2" align="center">
					<button id="addEmp">提交button>
				th>
			tr>
		table>
	div>
body>

你可能感兴趣的:(前端,jquery,js,dom,javascript,html5)