07 jquery的应用

其他 2018-10-22 02:11:11 阅读次数: 0

1.HTML属性设置

1.获取输入的内容

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="button" value="设置内容" /><br />
		<input type="button" value="输入的内容为" />

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

				$("input[value='设置内容']").click(function() {
					// 修改 text类型的输入框的 value属性 (html属性)
					$("input[type='text']").attr("value", "这是内容");
				})

				$("input[value='输入的内容为']").click(function() {
					// 如果一个jq对象中有多个元素的话, 获取属性只会获取到第一个
					//console.log("内容为:" + $("input[type='text']").attr("value"));	

					// 如果要全部获取, 就要手动迭代
					var $text = $("input[type='text']");
					for(var i = 0; i < $text.length; i++) {
						var value = $text.eq(i).attr("value");
						console.log(i + ":" + value);
					}
				})

			})
		</script>
	</body>

</html>

2.全选反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		请选择你的兴趣爱好:
		<input type="checkbox"/>吃饭
		<input type="checkbox"/>睡觉
		<input type="checkbox"/>写代码<br /><br />
		<input type="button" value="全选" />
		<input type="button" value="清空" />
		<input type="button" value="反选"/>
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("input[value='全选']").click(function(){
					// 应该用prop取代
//					$("input[type='checkbox']").attr("checked","checked");
					$("input[type='checkbox']").prop("checked", true);
				});
				
				$("input[value='反选']").click(function(){
					$cb = $("input[type='checkbox']");
					for(var i = 0; i < $cb.length; i ++){
						var $cbi = $cb.eq(i);
						$cbi.prop("checked", !$cbi.prop("checked"));				
					}
					
					
				});
				
				$("input[value='清空']").click(function(){
					// $("input[type='checkbox']").attr("checked","false");
					$("input[type='checkbox']").prop("checked", false);
					
					// 显示一下各个checkbox的勾选状态
//					$cb = $("input[type='checkbox']");
//					for(var i = 0; i < $cb.length ;i ++){
//						var checked = $cb.eq(i).prop("checked");
//						alert(checked);
//					}
				});
			})
		</script>
	</body>
</html>

3.全选反选练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			要求:
			第一行的cb, 是全选勾选框
			1. 勾上全选, 就全部都勾上
			2. 取消勾上全选, 就全部都取消
			3. 如果全部都勾上了, 全选也要勾上
			4. 只要有一个没勾上, 全选也不能勾上
		-->
		<table border="1px" cellpadding="5px" cellspacing="5px">
			<tr>
				<td><input id="cb_all" type="checkbox" /></td>
				<td>课程</td>
				<td>任课老师</td>
			</tr>
			<tr>
				<td><input name="cb_lesson" type="checkbox" /></td>
				<td>javaSE</td>
				<td>陈老师</td>
			</tr>
			<tr>
				<td><input name="cb_lesson" type="checkbox" /></td>
				<td>数据库</td>
				<td>陈老师</td>
			</tr>
			<tr>
				<td><input name="cb_lesson" type="checkbox" /></td>
				<td>网页制作</td>
				<td>陈老师</td>
			</tr>
		</table>
		
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				// 给全选cb设置点击事件
				$("#cb_all").click(function(){
					$("input").prop("checked", $(this).prop("checked"));
				});
				
				// 给后面的cb注册点击事件
				$("input[name='cb_lesson']").click(function(){
					$cb = $("input[name='cb_lesson']");
					// 被选上的cb
					var checkedLen = 0;
					for(var i = 0; i < $cb.length; i ++){
						if($cb.eq(i).prop("checked")){
							checkedLen ++;
						}
					}
					
					$("#cb_all").prop("checked", checkedLen == $cb.length);
					
				})
				
		
			})
		</script>
	</body>
</html>

2.css属性设置

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<style type="text/css">
			.red {
				background-color: red;
			}
			
			.big {
				width: 500px;
				height: 500px;
			}
			
			.green {
				background-color: green;
			}
			
			.small {
				width: 100px;
				height: 100px;
			}
		</style>

	</head>

	<body>

		<div>div1</div>
		<div>div2</div>
		<div>div3</div>

		<input type="button" value="1-变大变红" />
		<input type="button" value="1-变小变绿" />
		<br />
		<input type="button" value="2-变大变红" />
		<input type="button" value="2-变小变绿" />
		<br />
		<input type="button" value="3-变大变红" />
		<input type="button" value="3-变小变绿" />
		<input type="button" value="hasclass" />
		<input type="button" value="toogleclass" />

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

				$("input[value='1-变大变红']").click(function() {
					//					$("div:eq(0)").css({
					//						"background-color":"red",
					//						"height":"500px",
					//						"width":"500px"});
					// 只要给div1增加 red 和 big 两个类型即可
					$("div:eq(0)").removeClass("small");
					$("div:eq(0)").removeClass("green");

					$("div:eq(0)").addClass("big");
					$("div:eq(0)").addClass("red");

				})

				$("input[value='1-变小变绿']").click(function() {
					//					$("div:eq(0)").css({
					//						"background-color":"green",
					//						"height":"100px",
					//						"width":"100px"});
					// 先移除red和big
					$("div:eq(0)").removeClass("red");
					$("div:eq(0)").removeClass("big");

					$("div:eq(0)").addClass("small");
					$("div:eq(0)").addClass("green");

				})

				$("input[value='2-变大变红']").click(function() {
					//找到第2个元素
					$("div:eq(1)").removeClass("small");
					$("div:eq(1)").removeClass("green");
					$("div:eq(1)").addClass("big");
					$("div:eq(1)").addClass("red");
				})
				$("input[value='2-变小变绿']").click(function() {
					$("div:eq(1)").removeClass("big");
					$("div:eq(1)").removeClass("red");
					$("div:eq(1)").addClass("small");
					$("div:eq(1)").addClass("green");

				})

				$("input[value='hasclass']").click(function(){
					
					if($("div:eq(0)").hasClass("red")){
						
						$("div:eq(0)").addClass("red");
					}
					
				})

			})
		</script>
	</body>

</html>

事件切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			div{
				width: 300px;
				height: 200px;
				border: 1px solid black;
				background-color: #cfc;
			}
			
		</style>
		
	</head>
	<body>
		
		<div>
			div
		</div>
		
		<br /><br />
		<input type="button" value="禁用" />
		<input type="button" value="禁用" />
		<input type="button" value="禁用" />
		<input type="button" value="禁用" />
		<input type="button" value="禁用" />
		
		
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function(){
				
				// 鼠标悬停
				$("div").hover(function(){
					$(this).css("background-color", "#fcc");
				},function(){
					$(this).css("background-color", "#cfc");
				})
				
				// 状态切换
				$("input").toggle(function(){
					$(this).val("启用");
				},function(){
					$(this).val("禁用");
				})
				
				
			})
			
		</script>
	</body>
</html>

动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			div{
				border: 1px solid black;
				background-color: #ccf;
				width: 500px;
				height: 300px;
				display: none;
			}
			
		</style>
	</head>
	<body>
		
		<input id="btn1" type="button" value="显示"/>
		<input id="btn2" type="button" value="隐藏"/>
		
		<br /><br />
		
		<div></div>		
		
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function(){
				
				$("#btn1").click(function(){
					//$("div").show(3000);
//					$("div").slideDown(3000, function(){
//						alert("123");
//					});
					$("div").fadeIn();
				})
				
				
				$("#btn2").click(function(){
					//$("div").hide(3000);
//					$("div").slideUp(3000);
					
					$("div").fadeOut();		
				})
				
			})
			
		</script>
	</body>
</html>

多级菜单

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			ul{
				float: left;
			}
			
			li{
				display: none;
			}
			
		</style>
		
	</head>

	<body>

		<ul>
			一级菜单1
			<li>1111</li>
			<li>1111</li>
			<li>1111</li>
			<li>1111</li>
			<li>1111</li>
			<li>1111</li>
			<li>1111</li>
		</ul>

		<ul>
			一级菜单2
			<li>2222</li>
			<li>2222</li>
			<li>2222</li>
			<li>2222</li>
			<li>2222</li>
			<li>2222</li>
			<li>2222</li>
		</ul>

		<ul>
			一级菜单3
			<li>3333</li>
			<li>3333</li>
			<li>3333</li>
			<li>3333</li>
			<li>3333</li>
			<li>3333</li>
			<li>3333</li>
		</ul>



		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function(){
				
				$("ul").hover(function(){
					$(this).children("li").slideDown(700);
				},function(){
					$(this).children("li").slideUp(700);
				})
				
				
			})
			
		</script>

	</body>

</html>

动画练习

<!DOCTYPE html>
<html>
	<!--
		
		要求:
		一开始所有的子菜单都是收起来的
		然后打开第一个(下拉动画打开)
		
		当用户点击某一个主菜单的时候, 
		对应的子菜单缓缓下拉打开
		其它正在打开的子菜单上拉回收
	-->

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,
			div,
			img {
				margin: 0px;
				border: 0px;
				padding: 0px;
			}
			
			#nav {
				margin: 50px 0px 0px 200px;
				width: 182px;
			}
			
			.big {
				width: 182px;
				background-image: url(img/menu_bgs.gif);
				text-align: center;
				padding-top: 6px;
				line-height: 24px;
				font-weight: 900;
				font-size: 14px;
				cursor: pointer;
			}
			
			.hor {
				/* margin-top:6px; */
			}
			
			.small {
				width: 182px;
				height: 26px;
				background-image: url(img/menu_bg1.gif);
				text-align: center;
				line-height: 26px;
				font-weight: 400;
				font-size: 12px;
				cursor: pointer;
			}
		</style>
	</head>

	<body>

		<!--  整个导航条  -->
		<div id="nav">
			<!-- 大导航条 -->
			<div class="big">
				网站常规管理
				<!--  一组折叠项  -->
				<div class="group">
					<img src="img/menu_topline.gif" class="hor" />
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
				</div>
				<!--  /一组折叠项  -->
			</div>
			<!-- /大导航条 -->

			<div class="big">
				网站常规管理
				<div class="group">
					<img src="img/menu_topline.gif" class="hor" />
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
				</div>
			</div>

			<div class="big">
				网站常规管理
				<div class="group">
					<img src="img/menu_topline.gif" class="hor" />
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
				</div>
			</div>

			<div class="big">
				网站常规管理
				<div class="group">
					<img src="img/menu_topline.gif" class="hor" />
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
				</div>
			</div>

			<div class="big">
				网站常规管理
				<div class="group">
					<img src="img/menu_topline.gif" class="hor" />
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
				</div>
			</div>

			<div class="big">
				网站常规管理
				<div class="group">
					<img src="img/menu_topline.gif" class="hor" />
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
					<div class="small">基本设置</div>
				</div>
			</div>

		</div>
		<!--  /整个导航条  -->
	</body>


	<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			// 把所有的group收起来
			$(".group").slideUp(0);
			// 把第一个导航条的group打开
			$(".group:eq(0)").slideDown();
			// 记录一下正在打开的group
			var $expendGroup = $(".group:eq(0)");
			$(".big").click(function(){
				// 判断一下是不是正在打开的这个
				var $myGroup = $(this).children(".group");
				if($myGroup[0] == $expendGroup[0]){
					return;
				}
				$(".group").slideUp();
				$myGroup.slideDown();
				// 现在$myGroup才是正在打开的这一项
				$expendGroup = $myGroup;
			});
		})
		
	</script>

</html>

自定义动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				border: 1px solid black;
				background-color: #cfc;
				width: 100px;
				height: 50px;
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		
		<div>
			div1
		</div>
		
		<br /><br />
		<br /><br />
		<br /><br />
		<input id="btn1" type="button" value="变!" />
		
		<br /><br />
		<input id="btn2" type="button" value="停!" />
		
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function(){
				
				$("#btn2").click(function(){
					
					// 1- 是否停止整个动画队列
					// 2- 是否停止在动画结束的位置
					$("div").stop(true, false);
					
				})
				
				$("#btn1").click(function(){
					// 自定义动画
//					$("div").animate({
//						"left":"400px",
//						"top":"200px"
//					}, 3000, function(){
//						alert("动画结束！")
//					})

					// 队列动画
					$("div").animate({
						"left":"400px",
						"font-size":"30px",
						"height":"200px"
					},{
						"duration":3000,
						"queue":true
					}).delay(1000).animate({
						"top":"300px",
						"width":"200px"
					},{
						"duration":3000,
						"queue":true
					})


				})
				
				
			})
			
		</script>
	</body>
</html>

文档处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#div1{
				border: 1px solid black;
				width: 300px;
				height: 200px;
			}
			
		</style>
	</head>
	<body>
		
		<div id="div1">
			div
		</div>
		
		<hr />
		
		<input id="btn1" type="button" value="按钮" />
		
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			// btn1替换div
//			$("#btn1").replaceAll("#div1");
			
//			用div替换掉btn1
//			$("#btn1").replaceWith($("#div1"));
			
		</script>
		
		<script type="text/javascript">
			// 追加元素
			
			// 在内容的后面追加
//			$("#btn1").appendTo("#div1");

			// 在内容的前面追加
//			$("#btn1").prependTo("#div1");
			
			// 外部的后面追加
//			$("#btn1").insertAfter("#div1");
			
			// 外部的前面追加
//			$("#btn1").insertBefore("#div1");
			
		</script>
		
		<script type="text/javascript">
			
			// 追加内容
			// 内部的内容后追加
//			$("#div1").append("追加的内容");
			// 内部的内容前
//			$("#div1").prepend("追加的内容");
			// 外部的内容后
//			$("#div1").after("追加的内容")
			// 外部的内容前
//			$("#div1").before("追加的内容");
			
		</script>		
		
	</body>
</html>

复制

clone(true),true表示连同事件一起复制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input id="btn1" type="button" value="点我" />
		
		
		<input id="btn2" type="button" value="复制" />
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function(){
				
				$("#btn1").click(function(){
					alert("123");
				})
				
				
				$("#btn2").click(function(){
					// 复制一个btn1
					// boolena值 - 是否连事件一起复制
					$("#btn1").clone(true).insertAfter("#btn1");

				})
				
			})
			
		</script>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_36194262/article/details/83056789
07
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022