天天看點
傳回

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

文章目錄

  • 一. 選擇器練習
    • 1. 全選全不選
    • 2. 下拉清單之間的傳遞
  • 二. DOM操作練習
    • 1. 添加和删除記錄
  • 三. 事件練習
    • 1. 圖檔跟随

一. 選擇器練習

1. 全選全不選 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>全選全不選</title>
    <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //給全選按鈕綁定單擊事件
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked", true);
            })
            //全不選
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked", false);
            })
            //反選
            $("#checkedRevBtn").click(function () {
                $(":checkbox[name='items']").each(function () {
                    this.checked = !this.checked;
                })
                //檢查是否滿選
                var allcount = $(":checkbox[name='items']").length;
                var chcount = $(":checkbox[name='items']:checked").length;
                //設定頂部 全選/全不選 的複選框
                $("#checkedAllBox").prop("checked", allcount == chcount);
            })
            //[送出]
            $("#sendBtn").click(function () {
                $(":checkbox[name='items']:checked").each(function () {
                    alert(this.value);
                })
            })
            //[頂部框]
            $("#checkedAllBox").click(function () {
                $(":checkbox[name='items']").prop("checked", this.checked);
            })

            //給全部類綁定事件
            $(":checkbox[name='items']").click(function () {
                //檢查是否滿選
                var allcount = $(":checkbox[name='items']").length;
                var chcount = $(":checkbox[name='items']:checked").length;
                //設定頂部 全選/全不選 的複選框
                $("#checkedAllBox").prop("checked", allcount == chcount);
            })


        });

    </script>
</head>
<body>

<form method="post" action="">

    你愛好的運動是？<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>

</body>
</html>

易錯點：給全部類綁定事件

$(":checkbox[name='items']").click(function () {
	//檢查是否滿選
    var allcount = $(":checkbox[name='items']").length;
    var chcount = $(":checkbox[name='items']:checked").length;
    //設定頂部 全選/全不選 的複選框
    $("#checkedAllBox").prop("checked", allcount == chcount);
})

2. 下拉清單之間的傳遞

把左邊（右邊）的下拉清單傳遞到右邊（左邊）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<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(){
			//選中添加到右邊
			$("button:eq(0)").click(function(){
				$("select[name=sel01] :selected").each(function(){
					//alert(this);
					$(this).appendTo("select[name=sel02]");
				});
			});
			
			//全部添加到右邊
			$("button:eq(1)").click(function(){
				$("select[name=sel01] option").each(function(){
					//alert(this);
					$(this).appendTo("select[name=sel02]");
				});
			});
			
			//選中删除到左邊
			$("button:eq(2)").click(function(){
				$("select[name=sel02] :selected").each(function(){
					//alert(this);
					$(this).appendTo("select[name=sel01]");
				});
			});
			//全部删除到左邊
			$("button:eq(3)").click(function(){
				$("select[name=sel02] option").each(function(){
					//alert(this);
					$(this).appendTo("select[name=sel01]");
				});
			});
		});
	
	</script>
</head>
<body>

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

</body>
</html>

二. DOM操作練習

1. 添加和删除記錄 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	$(function () {
		//建立一個用于删除的函數
		var deleteFun = function(){
			//擷取目前delete元素的上上級元素
			var $trObj = $(this).parent().parent();
			//擷取目前操作行的name值
			var name = $trObj.find("td:first").text();
			//确認提示框函數
			if (confirm("你确定要删除 " + name + "嗎？？？")){
				$trObj.remove();
			}
			//阻止元素的預設行為
			return false;
		}

		//綁定Submit按鈕
		$("#addEmpButton").click(function () {
			//擷取輸入框的内容
			var name = $("#empName").val();
			var email = $("#email").val();
			var salary = $("#salary").val();

			//建立一個行标簽對象
			var $trObj = $("<tr>" +
					"<td>" + name + "</td>" +
					"<td>" + email + "</td>" +
					"<td>" + salary + "</td>" +
					"<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
					"</tr>");

			//添加到顯示資料的表格中
			$trObj.appendTo( $("#employeeTable"));

			//給新添加的a标簽綁定單擊事件,并調用deleteFun函數
			$trObj.find("a").click( deleteFun )  //注意不用加括号 （無需傳回值，隻需要其功能）
		});
		//給a标簽綁定單擊事件,并調用deleteFun函數
		//注意不用加括号 （無需傳回值，隻需要其功能）
		$("a").click( deleteFun );
		
	})


</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>[email protected]</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>[email protected]</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>[email protected]</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">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>

易錯點：函數位置:

  • 給a标簽綁定單擊事件,并調用deleteFun函數
  • 注意不用加括号 （無需傳回值，隻需要其功能） 
//給a标簽綁定單擊事件,并調用deleteFun函數
//注意不用加括号 （無需傳回值，隻需要其功能）
$("a").click( deleteFun );

三. 事件練習

1. 圖檔跟随

效果：滑鼠防止到小圖檔位置上顯示大圖檔并跟随移動

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body {
		text-align: center;
	}
	#small {
		margin-top: 150px;
	}
	#showBig {
		position: absolute;
		display: none;
	}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		$("#small")
			.mouseover(function(event){
				$("#showBig")
					.show()
					.css("left",event.pageX+10)
					.css("top",event.pageY+10);
			})
			.mousemove(function(event){
				$("#showBig")
					.css("left",event.pageX+10)
					.css("top",event.pageY+10);
			})
			.mouseout(function(){
				$("#showBig").hide();
			});
	});
</script>
</head>
<body>

	<img id="small" src="img/small.jpg" />
	
	<div id="showBig">
		<img src="img/big.jpg">
	</div>

</body>
</html>
jquery html5
上一篇: 疾病研究：重症肌無力
下一篇: 疾病研究：DMD患者家庭理療練習指南

繼續閱讀