jQuery练习

最新推荐文章于 2022-11-11 19:58:14 发布

你可真高

最新推荐文章于 2022-11-11 19:58:14 发布

阅读量360

点赞数 8

分类专栏： jQuery 文章标签： jquery html5

本文链接：https://blog.csdn.net/azumatokaku/article/details/104608494

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

一. 选择器练习
- 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>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</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>