欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

WEB前端学习笔记-jQuery

程序员文章站 2022-05-10 15:49:48
...

jQuery-001-全选和取消.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选和取消</title>
	</head>
	<body>
		<script type="text/javascript" src="JQuery.js"></script>
		<script type="text/javascript">
			
			function selectAll(){
				//1、获得第一个CheckBox的选中状态
				var flag = $("#selectAllBut").prop("checked");
				
				//2、为所有数据行CheckBox的选中状态设置
				var $obj = $(".ah");//jQuery对象名称一般是$开头的
				$obj.prop("checked",flag);
			}
			
		</script>
		<!--this表示触发当前事件的HTML元素对象-->
		<input type="checkbox" onclick="selectAll()" id="selectAllBut"/>全选<br>
		<input type="checkbox" class="ah" /><br>
		<input type="checkbox" class="ah" /><br>
		<input type="checkbox" class="ah" /><br>
	</body>
	
</html>

jQuery-002-基本选择器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery基本选择器</title>
		<style type="text/css">
			div{
				background: gray;
				width: 200px;
				height: 100px;
			}
		</style>
		<script type="text/javascript" src="JQuery.js"></script>
		<script type="text/javascript">
			function fun1(){
				var $obj = $("#one");
				$obj.css("background-color","aqua");
			}
			function fun2(){
				var $obj = $(".two");
				$obj.css("background-color","greenyellow");
			}
			function fun3(){
				var $obj = $("div");
				$obj.css("background-color","bisque");
			}
			function fun4(){
				var $obj = $("*");
				$obj.css("background-color","cornflowerblue");
			}
			function fun5(){
				var $obj = $("#one,span");
				$obj.css("background-color","darkorchid");
			}
		</script>
	</head>
	<body>
		<!--定义被选择对象-->
		<div id="one" class="two"></div><br>
		<div class="two"></div><br>
		<div></div><br>
		<span>我是span标签</span>
		<br>
		<!--定义按钮-->
		<input type="button" id="btn01" value="选择id为one的元素" onclick="fun1()"/>
		<input type="button" id="btn02" value="选择class为two的元素" onclick="fun2()"/>
		<input type="button" id="btn03" value="选择所有div元素" onclick="fun3()"/>
		<input type="button" id="btn04" value="选择所有元素" onclick="fun4()"/>
		<input type="button" id="btn05" value="选择id为one和所有span元素" onclick="fun5()"/>
	</body>
</html>

jQuery-003-层级选择器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery层级选择器</title>
		<style type="text/css">
			div{
				background:gray;
			}
		</style>
		<script type="text/javascript"src="JQuery.js"></script>
	</head>
	<body>
		<script>
			function fun1(){
				$("body div").css("background-color","dodgerblue");
			}
			function fun2(){
				$("body>div").css("background-color","pink");
			}
			function fun3(){
				$("#one+div").css("background-color","mediumspringgreen");
			}
			function fun4(){
				$("#two~div").css("background-color","fuchsia");
			}
			function fun5(){
				$("#two").siblings("div").css("background-color","firebrick");
			}
			
		</script>
		<!--定义被选择对象-->
		<div id="one">我是div01</div>
		<div id="two">我是div02</div>
		<div>
			我是div03
			<div class="son">我是div03的子div</div>
			<div class="son">我是div03的子div</div>
		</div>
		<div>我是div04</div>
		<span>我是span标签</span>
		<br>
		<!--定义按钮-->
		<input type="button"id="btn01" value="选择body中的所有div" onclick="fun1()"/>
		<input type="button"id="btn02" value="选择body下的直接div子标签" onclick="fun2()"/>
		<input type="button"id="btn03" value="选择id为one的下一个兄弟div" onclick="fun3()"/>
		<input type="button"id="btn04" value="选择id为two的所有后面的兄弟div" onclick="fun4()"/>
		<input type="button"id="btn05" value="选择id为two的所有兄弟div" onclick="fun5()"/>
	</body>
</html>

jQuery-004-表单input框选择器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单input框选择器</title>
		<script type="text/javascript"src="JQuery.js"></script>
		<script>
			//val()函数  jQuery对象中的一个功能函数 读取jQuery中第一个dom对象
			function fun1(){
				var $obj = $(":text");
				var value = $obj.val();
				alert(value);
			}
			function fun2(){
				var $obj = $(":password");
				var value = $obj.val();
				alert(value);
			}
			function fun3(){
				var $obj = $(":radio");
				
				//jQuery对象转化为dom对象
				/*
				for(var i = 0;i<$obj.length;i++){
					var domObj = $obj[i];
					myFun(i,domObj);
				}
				*/
				$obj.each(myFun);
			}
			function myFun(index,domObj){
				alert("第"+(index+1)+"个radio标签的value是"+domObj.value)
			}
			function fun4(){
				alert($(":file").val());
			}
		</script>
	</head>
	<body>
		<!--定义表单-->
		<form id="myForm" action="">
			用户名: 
			        <input type="text" name="username" /><br><br>&nbsp;&nbsp;:
	                <input type="password" name="password" /><br><br>&nbsp;&nbsp;:
	                <input type="radio" name="gender"value="1"checked /><input type="radio" name="gender"value="0" />女
	                照&nbsp;&nbsp;:
	                <input type="file" name="photo" /><br><br>&nbsp;&nbsp;:
	                <input type="checkbox" name="interest" value="music" checked />音乐
	                <input type="checkbox" name="interest" value="food" />美食
	                <input type="checkbox" name="interest" value="trip" />旅行
	                <input type="checkbox" name="interest" value="shopping" />购物
	                <br><br>
	                <input type="submit"value="提交" />
		</form>
		<br><br>
		<!--定义按钮-->
		<button id="btn01"onclick="fun1()">选择文本输入框并输出用户输入的值</button>
		<button id="btn02"onclick="fun2()">选择密码输入框输出用户输入的密码</button>
		<button id="btn03"onclick="fun3()">选择单选框的value属性值</button>
		<button id="btn04"onclick="fun4()">选择文件上传框并输出用户选择的文件</button>
		<button id="btn05">选择复选框并输出用户选择的值</button>
		
	</body>
</html>

jQuery-005-基本过滤选择器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery基本过滤选择器</title>
		<style type="text/css">
			div{
				background: gray;
			}
		</style>
		<script type="text/javascript"src="JQuery.js"></script>
		<script>
			function fun1(){
				$("div:first").css("background-color","pink");
			}
			
			function fun2(){
				$("div:last").css("background-color","burlywood");
			}
			
			function fun7(){
				$("div:eq(3)").css("background-color","indianred");
			}
			
			function fun8(){
				$("div:lt(3)").css("background-color","lightblue");
			}
			
			function fun9(){
				$("div:gt(3)").css("background-color","black");
			}
		</script>
	</head>
	<body>
		<!--定义被选择对象-->
		<h2>以下是div</h2>
		<div id="one">我的序号是0</div>
		<div id="two"class="c02">我的序号是1</div>
		<div>
			我的序号是2
			<div class="son">我的序号是3</div>
			<div class="son">我的序号是4</div>	
		</div>
		<div>我的序号是5</div>
		<h3>以下是span</h3>
		<span>我是span标签</span>
		<br><br>
		<!--定义按钮-->
		<input type="button" id="btn01" value="选择第一个div" onclick="fun1()"/>
		<input type="button" id="btn02" value="选择最后一个div" onclick="fun2()"/>
		<input type="button" id="btn03" value="选择id值不是one的div" />
		<input type="button" id="btn04" value="选择class不包含c02的div" />
		<input type="button" id="btn05" value="选择索引号为奇数的div元素" />
		<input type="button" id="btn06" value="选择索引号为偶数的div元素" />
		<input type="button" id="btn07" value="选择索引号等于3的div元素"onclick="fun7()" />
		<input type="button" id="btn08" value="选择索引号小于3的div元素"onclick="fun8()" />
		<input type="button" id="btn09" value="选择索引号大于3的div元素"onclick="fun9()" />
		<input type="button" id="btn10" value="选择所有标题元素" />
	</body>
</html>

jQuery-006-过滤选择器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>过滤选择器</title>
		<script type="text/javascript"src="JQuery.js"></script>
		<script>
			function fun1(){
				$("div[title]").css("background-color","gold");
			}
			
			function fun2(){
				$("div[title = 'test']").css("background-color","greenyellow");
			}
			function fun3(){
				$("div[title != 'test']").css("background-color","burlywood");
			}
			function fun4(){
				$("div[title ^= 'te']").css("background-color","fuchsia");
			}
			function fun5(){
				$("div[title $= 'st']").css("background-color","blueviolet");
			}
			function fun6(){
				$("div[title *= 'es']").css("background-color","navy");
			}
			function fun7(){
				$("div[title *= 'es'][id]").css("background-color","salmon");
			}
		</script>
		<style type="text/css">
			div{
				background: gray;
				width: 200px;
				height: 100px;
			}
			.son{
				background: cyan;
				width: 180px;
				height: 20px;
			}
		</style>
	</head>
	<body>
		<!--定义被选择对象-->
		<div id="one" title="test">zero</div>
		<div class="c02" title="myTest">one</div>
		<div>
			two
			<div id="three" class="son">three</div>
			<div title="test" class="son">four</div>
		</div>
		<div title="testCase" id="">five</div>
		<div></div>
		<span>我是span标签</span>
		<br><br>
		<!--定义按钮-->
		<input type="button" id="btn01" value="选择包含title属性的div元素" onclick="fun1()"/>
		<input type="button" id="btn02" value="选择title属性值为test的div元素"onclick="fun2()" />
		<input type="button" id="btn03" value="选择title属性值不为testdiv元素" onclick="fun3()"/>
		<input type="button" id="btn04" value="选择title属性以'te'开头的div元素"onclick="fun4()"/>
		<input type="button" id="btn05" value="选择title属性以'st'结尾的div元素" onclick="fun5()"/>
		<input type="button" id="btn06" value="选择title属性包含'es'的div元素" onclick="fun6()"/>
		<input type="button" id="btn07" value="选择title属性包含'es'的并且含有id属性的div元素"onclick="fun7()" />
	</body>
</html>

jQuery-007-工作状态属性过滤器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>工作状态属性过滤器</title>
		<script type="text/javascript"src="JQuery.js"></script>
		<script>
			/*
			 val()
			 $obj.val():读取jQuery对象中第一个DOM对象的value属性值
			 $obj.val("值"):为jQuery对象中所有DOM对象的value属性值进行统一赋值
			 */
			function fun1(){
				$(":text:enabled").val("可用文本框");
			}
			function fun2(){
				$(":text:disabled").val("不可用文本框");
			}
			function fun3(){
				$(":checkbox:checked").each(loop);
			}
			function loop(index,domObj){
				alert("第"+(index+1)+"个被选中的checkbox的value"+$(domObj).val());
			}
			function fun4(){
				alert($("#city>option:selected").val())
			}
		</script>
	</head>
	<body>
		<!--定义文本框-->
		文本01<input type="text" id="text01" value="value01" /><br>
		文本02<input type="text" id="text02" value="value02" disabled/><br>
		文本03<input type="text" id="text03" value="value03" /><br>
		文本04<input type="text" id="text04" value="value04" disabled/><br>
		<br>
		<!--定义复选框-->
		<input type="checkbox" name="interest" value="reading" checked />读书
		<input type="checkbox" name="interest" value="food"  />美食
		<input type="checkbox" name="interest" value="travel"  />旅游
		<input type="checkbox" name="interest" value="music" checked />音乐
		<input type="checkbox" name="interest" value="shopping" checked />购物
		<br><br>
		<!--定义下拉列表-->
		<select id="city">
			<option value="bj" title="beijing" title="" selected>北京</option>
			<option value="sh" title="shanghai" title="" selected>上海</option>
			<option value="gz" title="guangzhou" title="" selected>广州</option>
			<option value="sz" title="shenzhen" title="" selected>深圳</option>
			<option value="hz" title="hangzhou" title="" selected>杭州</option>
		</select>
		<br><br>
		<!--定义测试按钮-->
		<button id="btn01" onclick="fun1()">选择可用文本框并修改其值</button>
		<button id="btn02" onclick="fun2()">选择不可用文本框并修改其值</button>
		<button id="btn03"onclick="fun3()">选择复选框被选中的元素</button>
		<button id="btn04"onclick="fun4()">选择下拉列表中被选中的元素</button>
	</body>
</html>

jQuery-008-show&hide.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>show与hide</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: bisque;
				font-size: 30px;
				color: black;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="JQuery.js" ></script>
		<script>
			function fun1(){
				$("div").hide(3000);
			}
			function fun2(){
				$("div").show(3000);
			}
		</script>
		<div>
			我是一个div
		</div>
		
		<input type="button" value="隐藏div" onclick="fun1()" />
		<input type="button" value="显示div" onclick="fun2()"/>
	</body>
</html>

jQuery-009-remove&empty.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>show与hide</title>
		
	</head>
	<body>
		<script type="text/javascript" src="JQuery.js" ></script>
		<script>
			function fun1(){
				$("#one").remove();
			}
			function fun2(){
				$("#two").empty();
			}
		</script>
		大臣1<select id="one">
			<option value="">大儿子</option>
			<option value="">二儿子</option>
		</select>
		大臣1<select id="two">
			<option value="">大儿子</option>
			<option value="">二儿子</option>
		</select>
		<br>
		<input type="button" value="大臣1满门抄斩" onclick="fun1()" />
		<input type="button" value="大臣2断子绝孙" onclick="fun2()"/>
	</body>
</html>

jQuery-010-append&appendTo.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>append与appendTo</title>
		<style type="text/css">
			#father{
				width: 200px;
				height: 200px;
				background-color: orange;
				font-size: 30px;
				color: pink;
				margin-bottom: 10px;
			}
			
			#son{
				width: 100px;
				height: 100px;
				background-color: orange;
				font-size: 20px;
				color: pink;
				margin-bottom: 10px;
			}
		</style>
		
	</head>
	<body>
		<script type="text/javascript" src="JQuery.js" ></script>
		<script>
			function fun1(){
				$("#father").append($("#son"));
			}
			
			function fun2(){
				$("#son").appendTo($("#father"));
			}
		</script>
		<div id="father">
			我是爸爸
		</div>
		
		<div id="son">
			我是儿子
		</div>
		
		
		<input type="button" value="爸爸给自己找儿子" onclick="fun1()" />
		<input type="button" value="儿子给自己找个爹" onclick="fun2()"/>
	</body>
</html>

jQuery-011-属性操作函数.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性操作函数</title>
		<script type="text/javascript" src="JQuery.js" ></script>
		<script>
			function fun1(){
				var $option = $("#city>option:selected");
				
				alert("value="+$option.val());
				
				alert("title="+$option.attr('title'));
				
				alert("文字显示内容="+$option.text());
				
				alert("selected="+$option.prop("selected"));
			}
		</script>
	</head>
	<body>
		<center>
			<!--定义下拉列表-->
		<select id="city" onchange="fun1()">
			<option value="bj" title="beijing" title="" selected>北京</option>
			<option value="sh" title="shanghai" title="" selected>上海</option>
			<option value="gz" title="guangzhou" title="" selected>广州</option>
			<option value="sz" title="shenzhen" title="" selected>深圳</option>
			<option value="hz" title="hangzhou" title="" selected>杭州</option>
		</select>
		</center>
	</body>
</html>

jQuery-012-事件绑定方式一.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件绑定方式</title>
		<script type="text/javascript" src="JQuery.js" ></script>
		<script>
			window.onload = main;
			function main(){
				$(":button").click(fun1);
			}
			function fun1(){
				//this 被单机的button的DOM对象
				alert($(this).val());
			}
		</script>
	</head>
	<body>
		<input type="button" value="我是大哥" />
		<input type="button" value="我是二哥" />
		<input type="button" value="我是三哥" />
	</body>
</html>

jQuery-013-事件绑定方式二.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件绑定方式</title>
		<script type="text/javascript" src="JQuery.js" ></script>
		<script>
			function fun1(){
				$(":button:lt(3)").bind("click",dealFun);
			}
			function fun2(){
				$(":button:lt(2)").unbind("click");
			}
			function dealFun(){
				alert($(this).val());
			}
		</script>
	</head>
	<body>
		<input type="button" value="我是大哥" />
		<input type="button" value="我是二哥" />
		<input type="button" value="我是三哥" />
		
		<br>
		
		<input type="button" value="为前三个button绑定onclick" onclick="fun1()"/>
		<input type="button" value="为前两个button接触绑定" onclick="fun2()"/>
	</body>
</html>