WEB前端学习笔记-jQuery

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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值