学习jquery的第二天

重庆李豪

已于 2022-03-30 19:33:15 修改

阅读量851

点赞数

文章标签：前端

于 2022-03-22 18:08:20 首次发布

本文链接：https://blog.csdn.net/qq_66579387/article/details/123667529

版权

本文介绍了JavaScript中的表格操作，包括删除行、清空单元格，克隆节点，设置和获取表单内容，处理布尔值属性，实现固定导航栏，注册和解除事件，触发自定义事件，以及多库共存等。通过实例展示了动态数据的添加与移除、元素的获取和设置、事件委托、阻止冒泡和链式编程等常见DOM操作。

摘要由CSDN通过智能技术生成

1.表格删除行和清空案列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.wrap{
			 width: 410px;
			margin:100px auto 0;
		}
		.wrap tbody tr td{
			border:5px solid #9ACD32;
			
		}</style>
	</head>
	<body>
		<input type="button" value="清空按钮" id="anniu">
		<div class="wrap">
		<table>
		<tbody id = "cont">
		<tr>
			<td>大家好我是猴王1</td>
			<td>大家好我是猴王弟弟</td>
			<td ><a class="get">delect</a></td>
		</tr>
		<tr>
			<td>大家好我是猴王2</td>
			<td>大家好我是猴王弟弟</td>
			<td><a class="get">delect</a></td>
		</tr>
		<tr>
			<td>大家好我是猴王3</td>
			<td>大家好我是猴王弟弟</td>
			<td><a class="get">delect</a></td>
		</tr>
		</tbody>
		</table>
		</div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('#anniu').click(function(){
		$('#cont').empty();
	});
	$('.get').click(function(){
		$(this).parent().parent().remove();
		});
});
</script>

2.克隆节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		span{
			background:pink;
			width:200px;
			height:200px;
			border-radius:25px;
			border:5px solid #00FFFF;
			font-size:50px;
		}</style>
	</head>
	<body>
		<input type="button" value="克隆" id ="cont">
		<div></div>
		<span class="cc">hello world！
		</span>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('.cc').click(function(){
		alert('不好意思我被点击到了');
	});
	$('#cont').click(function(){
		//clone克隆节点  克隆.cc的内容克隆装到str里面
		//clone()默认和false不会克隆事件  添加true可以克隆事件
		var $str=$('.cc').clone(true);
		//修改克隆节点的class
		$str.attr('class','ccc')
		//把克隆的内容装到body里面
		$('body').append($str);
	});
});
</script>

3.获取或者设置表单内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" value="按钮" id="anniu">
		<input type="text" value="" id="cont">
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('#anniu').click(function(){
		console.log($('#cont').val());
		$('#cont').val('我是设置的值');
	});
});
</script>

4.动态数据的添加和移除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#cont{
			border:25px solid #44DBFB;
			border-radius:500px;
			background: pink;
			width:800px;
		}
			#wrap {
				padding-top: 50px;
				margin-left: 2800px;
				font-size: 150px;

			}
			#shujutianjia{
				font-family:'宋体';
		background-image:-webkit-linear-gradient(top,#9EDCD9,#69DBDC,#44dbfb,#1791dc);
			}

			#tianjia {
				text-align: center;
			}

			#op {
				background: lightgreen;
			}
			#chacha{
				background:red;
			}

			#chacha {
				font-size: 150px;
			}

			#as {
				margin-left: 1400px;
				font-size: 150px;
				display: none;
				float: left;
			}
			td {
				border: 1px solid #d0d0d0;
				color: #404060;
				padding: 40px;
			}
		</style>
	</head>
	<body style="background:mediumspringgreen;">
		<div id="wrap">
			<input type="button" value="添加按钮" id="cont" style="font-size:150px;text-align:center;">
			<table id="op">
				<tbody id="cccc">
					<tr>
						<td>国家</td>
						<td>品牌</td>
						<td style="text-align: center;">联系电话</td>
						<td id="cc" style="border:5px solid #0099CC;background:orangered;">delect</td>
					</tr>
					<tr>
						<td>美国</td>
						<td>宾利</td>
						<td>987654321</td>
						<td id="cc9" style="border:5px solid #0099CC;background:orangered;">delect</td>
					</tr>
					<tr>
						<td>日本</td>
						<td>思域</td>
						<td>123456789</td>
						<td id="cc8" style="border:5px solid #0099CC;background:orangered;">delect</td>
					</tr>
					<tr>
						<td>德国</td>
						<td>奔驰</td>
						<td>1480256963</td>
						<td id="cc7" style="border:5px solid #0099CC;background:orangered;">delect</td>
					</tr>
				</tbody>
			</table>
		</div>
		<table id="as" style="background-color: #0099CC;">
			<div id="kkk">
				<tr>
					<td style="text-align:center;">
						<span id="shujutianjia" style="font-size:150px;">添加数据</span>
						<td style="text-align:right;">
						<button id="chacha">x</button>
						</td>
						<div></div>
					</td>
				</tr>
				<tr>
					<div class="form-item">
						<td>
							<label class="lb" style="font-size:150px;">所属国家:</label>
							<input class="txt" type="text" id = "chandi"placeholder="请输入产地"
								style="border:5px solid #0099CC;background:chartreuse;font-size:150px;">
						</td>
				</tr>
			</div>
			<td>
				<div class="form-item">
					<label class="lb" style="font-size:150px;">所属品牌:</label>
					<input class="txt" type="text" id= "pinpai"placeholder="请输入品牌"
						style="border:5px solid #0099CC;background:white;font-size:150px;">
			</td>
			<tr>
				</div>
				<td style="text-align:right;">
					<input type="button" value="点击添加" id="tianjia"
						style="border:5px solid mediumpurple;background:orangered;font-size:150px;">
				</td>
			</tr>
			</div>
		</table>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(function() {
		//给添加按钮设置点击事件  2s淡出as表格 wrap表格透明度更改为0.2
		$('#cont').click(function() {
			$('#as').fadeIn(2000);
			$('#wrap').css('opacity', '0.2');	
		});
		//点小叉叉as表格隐藏两秒淡出 wrap显示 
		$('#chacha').click(function(){
			$('#as').fadeOut(2000);
			$('#wrap').css('opacity', '1');
		});
		//给表格数据设置删除事件
		$('#cc').click(function() {
			$(this).parent().remove();
		});
		$('#cc8').click(function() {
			$(this).parent().remove();
		});
		$('#cc9').click(function() {
			$(this).parent().remove();
		});
		$('#cc7').click(function() {
			$(this).parent().remove();
		});
		//将第一行输入的东西装入str 第二行输入的东西装入st
		//拼接装入xinzeng这个数组
		$('#tianjia').click(function(){
			var str = $('#chandi').val();
			var st  = $('#pinpai').val();
			var $xinzeng=$(	'<tr>'+
						'<td>'+str+'</td>'+
						'<td>'+st+'</td>'+
						'<td style="text-align: center;">1234567892</td>'+
						'<td id="lll" style="border:5px solid #0099CC;background:orangered;">delect</td>'
					+'</tr>'
					)
					//给新添加的数据设置移除事件
					$xinzeng.find('#lll').click(function(){
						$xinzeng.remove();
					});
					//新添加的数据新增到id为cccc这个表格
				$('#cccc').append($xinzeng);	
				//as表格淡出2s
				$('#as').fadeOut(2000);
				//warp表格显示
				$('#wrap').css('opacity', '1');
			
		});
		
	});
</script>

5.jquery中的属性获取和设置和移除（attr和removeAttr）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input {
				border: 5px solid #44DBFB;
				border-radius: 25px;
				background: pink;
				height: 40px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<input type="button" value="获取属性" id="huoqu">
		<input type="button" value="设置属性" id="shezhi">
		<input type="button" value="移除属性" id="yichu"><br><br>
		<img src="img/jk2.webp" title="猴王">
		<div id="div1"></div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(function() {
		//1.设置属性
		$('#shezhi').click(function() {
			// $('img').attr('src','img/jk4.webp');//设置单属性
			//设置多属性
			$('img').attr({
				'src': 'img/jk4.webp',
				'aaa': 111, //原来没有的属性进行添加
			});
		});
		//2.获取属性
		$('#huoqu').click(function() {
			//获取到的属性装到str这个里面
			var str = $('img').attr('src');
			//将str里面的数据新增到div1这个id里面去 
			$('#div1').append(str);
		});
		//3.移除属性
		$('#yichu').click(function() {
			//移除单个属性
			// $('img').removeAttr('src');
			//移除多个属性
			$('img').removeAttr('aaa title');
		});
	});
</script>

6.美女相册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			font-family:'宋体';
			font-size:50px;
			margin-left:50px;
		}
			body {
				background-color: #ccc;
			}
			img{
				width:300px;
				height:300px;
			}
			 #cont{ 
			  list-style: none;/* 去除li标签的小黑点 */
			}
			
			#cont li {
			
			  margin:20px;/* 实现图片与图片之间的间距 */
			  display: inline;/* 隐藏li标签的黑点 li标签不换行 */
			}
			#datu{
				background:pink;
				width:600px;
				height:600px;
				margin-left:100px;
			}
		</style>
	</head>
	<body>
<ul id="cont">
	<li><img src="img/jk2.webp" id="tu1" title="美女A"></li>
	<li><img src="img/jk4.webp" id="tu2" title="美女B"></li>
	<li><img src="img/%25~SQ_J%7B7J@3%5BH%60%5DPLZ%7D_B%7DP.jpg"id="tu3"title="美女C"></li>
</ul>
<img id="datu" src="">
<div id="div1">我是一个div标签</div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('li>img').click(function(){
		//将当前鼠标点到的图片的src属性装到src里面
		var src=$(this).attr("src");
		//把把刚刚获取的src属性去替换datu这个id的里面的属性
		$('#datu').attr('src',src);
	});
	$('li>img').click(function(){
		var title=$(this).attr("title");
		//把刚刚获取到的title的值替换掉div1这个id标签里面的内容
		$('#div1').text(title);
	});
});
</script>

7.prop操作布尔值类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		</style>
	</head>
	<body>
		<input type="button" value="按钮" id="anniu"><br><br>
		<input type="checkbox" id="cont">
		<div id ="div1">请点击按钮</div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('#anniu').click(function(){
		var str = $('#cont').prop('checked');
		$('#div1').text(str);
	});
});</script>

8.表格全选与反选案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		table{
			font-size:50px;
		}
		thead{
			font-size:50px;
		}
		td{
			padding:40px;
			border:5px solid saddlebrown;
			font-family:'宋体';
		}
		td>#cont{
			padding:40px;
			border:5px solid saddlebrown;
			font-family:'宋体';
		}
		#wrap{
			margin-left:500px;
		}</style>
	</head>
	<body>
		<div id="wrap">
		<table>
			<thead>
				<tr>
					<td><div style="text-align:center;"><input type="checkbox" id ="con" style="width:100px;height:100px;"></div></td>
					<td>-----</td>
					<td>-----</td>
					<td>-----</td>
				</tr>
				</thead>
				<tbody>
			<tr>
				<td><div style="text-align:center;"><input type="checkbox" id ="cont" style="width:100px;height:100px;"></div></td>
				<td>大家好</td>
				<td>大家好</td>
				<td>大家好</td>
			</tr>
			<tr>
				<td><div style="text-align:center;"><input type="checkbox" id ="cont" style="width:100px;height:100px;"></div></td>
				<td>大家好</td>
				<td>大家好</td>
				<td>大家好</td>
			</tr>
			<tr>
				<td><div style="text-align:center;"><input type="checkbox" id ="cont" style="width:100px;height:100px;"></div></td>
				<td>大家好</td>
				<td>大家好</td>
				<td>大家好</td>
			</tr>
			</tbody>
		</table>
		</div>
		<div id ="div1" style="font-size:150px;"></div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	//1.实现第一个按钮全选和反选
	$('thead>tr>td>div>input').click(function(){
		//获取当前这个按钮的选中状态
		var str = $(this).prop('checked');
		//打印到div这个标签
		$('#div1').text(str);
		//给下面所有的按钮同样的状态
		$('tbody>tr>td>div>input').prop('checked',str);
	});
	//当所有按钮都选中第一个按钮也选中
	$('tbody>tr>td>div>input').click(function(){
		var ss = $('tbody>tr>td>div>input').length;//计算一共有多少个input标签
		var sss = $('tbody>tr>td>div>input:checked').length;//计算被选中的个数
		if(ss == sss){
			$('thead>tr>td>div>input').prop('checked',true);
		}
		else{
			$('thead>tr>td>div>input').prop('checked',false);
		}
	});
});
</script>

9.height和width

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {
				height: 100px;
				width: 100px;
				border: 10px solid #000000;
				padding:10px;
				margin:10px;
			}
		</style>
	</head>
	<body>
		<button id="cont">不包括内外边距和边框获取按钮</button>
		<button id="shezhi">设置按钮</button>
		<button id="cont1">包括内边距获取按钮</button>
		<button id="cont2">包括内边距和边框获取按钮</button>
		<button id="cont3">包括内外边距和边框获取按钮</button>
		<button id="cont4">获取可视范围区的宽高</button>
		<br>
		<br>
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div1"></div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(function() {
		//1.0height和width  不包括内外边距和边框
		$('#cont').click(function() {
			var height = $('#div1').css('height');//带px的字符串型
			var width = $('#div1').width();
			$('#div2').text('字符串型:'+height);
			$('#div3').text('纯数字型:'+width);
		});
		//点击设置按钮设置height和width的参数
		$('#shezhi').click(function(){
			$('#div1').height(200);
			$('#div1').width(200);
		});
		//2.0innerHight和innerwidth 包括内边距
		$('#cont1').click(function() {
			var height = $('#div1').innerHeight();
			var width = $('#div1').innerWidth();
			$('#div2').text('带内边距的:'+height);
			$('#div3').text('带内边距的:'+width);
		});
		//3.0outerWidth和outerHeight 包括内边距和边框
		$('#cont2').click(function() {
			var height = $('#div1').outerHeight();
			var width = $('#div1').outerWidth();
			$('#div2').text('带内边距加边框的:'+height);
			$('#div3').text('带内边距加边框的:'+width);
		});
		//4.0outerWidth(true)和outerHeight(true) 包括内外边距和边框
		$('#cont3').click(function() {
			var height = $('#div1').outerHeight(true);
			var width = $('#div1').outerWidth(true);
			$('#div2').text('带内外边距加边框的:'+height);
			$('#div3').text('带内外边距加边框的:'+width);
		});
		//5.0获取可视范围的宽高
		$('#cont4').click(function() {
			var height = $(window).height();
			var width = $(window).width();
			$('#div2').text('可视范围的高:'+height);
			$('#div3').text('可视范围的宽:'+width);
		});
	});
</script>

10.offset和position方法的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
		padding:0px;
			margin:0px;
		}
		#div2{
			width:400px;
			height:400px;
			border:20px solid pink;
			/*相对于上一个标签*/
		    position:relative; /*相对定位 */
			top:20px;
			left:20px;
		}
		#div3{
			width:140px;
			height:140px;
			border:20px solid dodgerblue;
			/*绝对于整个可视范围*/
			position:absolute;/*绝对定位*/
			 top:200px;
			 left:160px;
		}
		</style>
	</head>
	<body>
		<div id = "div1">设计反馈给不回家热</div>
		<button id ="cont">offset按钮</button>
		<button id ="cont1">position按钮</button>
		<div id ="div2"></div>
		<div id ="div3"></div>
		
		<div id="div4"></div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('#cont').click(function(){
		//offset方法获取元素距离document位置
		console.log($('#div3').offset());
	});
	$('#cont1').click(function(){
		//position方法获取的是元素距离有定位的父元素(offsetParent)的位置
		console.log($('#div3').position());
	});
	
});
</script>

11.scrollTop和scrollLeft方法的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			height:2000px;
			width:2000px;
		}
		#div1{
			height:200px;
			width:200px;
		/* 	当img的宽高超过div就会出现滚动条 */
			overflow:auto;
		}
		img{
			width:400px;
			height:400px;
			vertical-align:top;
		}
		</style>
	</head>
	<body>
		<div>添加overflow:auto,当div标签宽高小于图片宽高时会出现滚动条</div>
		<input type="button" value="获取按钮" id="huoqu">
		<input type="button" value="设置按钮" id="shezhi">
		<input type="button" value="获取页面按钮" id="huoqu1">
		<input type="button" value="设置页面按钮" id="shezhi1">
		<div id ="div1">
			<img src="img/jk2.webp">
		</div>
		<div id="div2">
			
		</div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script> 
$(function(){
$('#huoqu').click(function(){
	//1.获取元素内容被卷曲出去的高和宽
	var str = $('#div1').scrollTop();
	var st = $('#div1').scrollLeft();
	$('#div2').text('div的宽'+st+'div的高'+str);
});
   //2.设置元素内容被卷曲出去的高和宽
   $('#shezhi').click(function(){
	   $('#div1').scrollTop(208);
	   $('#div1').scrollLeft(208);
   });
   $('#huoqu1').click(function(){
   	//1.获取页面内容被卷曲出去的高和宽
   	var str = $(window).scrollTop();
   	var st = $(window).scrollLeft();
   	$('#div2').text('页面的宽'+st+'页面的高'+str);
   });
      //2.设置页面内容被卷曲出去的高和宽
      $('#shezhi1').click(function(){
   	   $(window).scrollTop(208);
   	   $(window).scrollLeft(208);
      });
});
</script>

12.固定导航栏案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			img {
				/* 垂直向上对齐 */
				vertical-align: top;
			}

			#down {
				text-align: center;
				width: 1400px;
			}
		</style>
	</head>
	<body>
		<div id="top">
			<img src="images/top.png">
		</div>
		<div id="center">
			<img src="images/nav.png">
		</div>
		<div id="down">
			<img src="images/main.png">
		</div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(function() {
		//给页面设置滚动事件
		$(window).scroll(function() {
			//获取向下滚动(被滚动出去的距离)
			var xiangxiagundong = $(window).scrollTop();
			// console.log(gundong);
			//获取第一部分的高度
			var yibufen = $('#top').height();
			console.log(yibufen);
			//获取第二部分的高度
			var erbufen = $('#center').height();
			 console.log(erbufen);
			if(xiangxiagundong>=yibufen){
				//固定第二部分导航栏的定位
					$('#center').css({
					position:'fixed',
					top:0,
					left:0,
				});
				//设置第三部分的margin-top为第二部分的高度
				$('#down').css({
					marginTop:erbufen
				});
			}
			
			else{
				//还原第二部分导航栏的定位
					$('#center').css({
						//标准流定位static(默认定位)
					position:'static',
					top:0,
					left:0,
				});
				//还原第三部分的margin-top的值
				$('#down').css({
					marginTop:0
				});
			}
		});
		
	});
</script>

13.bing和delegate注册事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.div1{
			position:relative;
			top:20px;
			left:20px;
			width:200px;
			height:200px;
			border:5px solid darkorange;
		}
		.div2{
			position:relative;
			top:30px;
			left:80px;
			width:200px;
			height:200px;
			border:5px solid darkorange;
		}</style>
	</head>
	<body>
		<input type="button" value="按钮" id ="anniu">
		<div class="div1"></div>
		<div id ="div3"></div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('#anniu').click(function(){
		var $strr = $('<div class="div2"><div>');
		$('body').append($strr);
 		});
		//bing方式注册事件  支持同时注册 不支持动态注册
		$('div').bind({
			mouseenter:function(){
				console.log('鼠标移入事件');
				
			},
			click:function(){
				console.log('鼠标单击事件');
			}
		});
		// delegate注册委托事件  支持同时注册和动态注册 原理是事件冒泡
		$('body').delegate('div',{
			mouseenter:function(){
				console.log('鼠标移入事件');
				
			},
			click:function(){
				console.log('鼠标单击事件');
			}
		});
});</script>

14.on的注册事件和委托事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.div1{
			position:relative;
			top:20px;
			left:20px;
			width:200px;
			height:200px;
			border:5px solid darkorange;
		}
		.div2{
			position:relative;
			top:30px;
			left:80px;
			width:200px;
			height:200px;
			border:5px solid darkorange;
		}
		span{
			border:5px solid red;
			position:relative;
			top:30px;
			left:380px;
		}</style>
	</head>
	<body>
		<input type="button" value="按钮" id ="anniu">
		<div class="div1"></div>
		<span>我也是一个可以触发事件的元素</span>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('#anniu').click(function(){
		var str = $('<div class="div2"></div>');
		$('body').append(str);
	});
	//on简单事件
// $('div').on('click',function(){
// 	alert('我是单击事件');
// });
//on委托事件
//三个要素：事件名称，需要触发的元素，事件触发执行的程序
$('body').on('click','div,span',function(){
	alert('我是单击事件');
});
});</script>

<< 用on实现之前的动态数据删除的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#cont{
			border:25px solid #44DBFB;
			border-radius:500px;
			background: pink;
			width:800px;
		}
			#wrap {
				padding-top: 50px;
				margin-left: 2800px;
				font-size: 150px;

			}
			#shujutianjia{
				font-family:'宋体';
		background-image:-webkit-linear-gradient(top,#9EDCD9,#69DBDC,#44dbfb,#1791dc);
			}

			#tianjia {
				text-align: center;
			}

			#op {
				background: lightgreen;
			}
			#chacha{
				background:red;
			}

			#chacha {
				font-size: 150px;
			}

			#as {
				margin-left: 1400px;
				font-size: 150px;
				display: none;
				float: left;
			}
			td {
				border: 1px solid #d0d0d0;
				color: #404060;
				padding: 40px;
			}
		</style>
	</head>
	<body style="background:mediumspringgreen;">
		<div id="wrap">
			<input type="button" value="添加按钮" id="cont" style="font-size:150px;text-align:center;">
			<table id="op">
				<tbody id="cccc">
					<tr>
						<td>国家</td>
						<td>品牌</td>
						<td style="text-align: center;">联系电话</td>
						<td id="cc" style="border:5px solid #0099CC;background:orangered;">delect</td>
					</tr>
					<tr>
						<td>美国</td>
						<td>宾利</td>
						<td>987654321</td>
						<td id="cc9" style="border:5px solid #0099CC;background:orangered;">delect</td>
					</tr>
					<tr>
						<td>日本</td>
						<td>思域</td>
						<td>123456789</td>
						<td id="cc8" style="border:5px solid #0099CC;background:orangered;">delect</td>
					</tr>
					<tr>
						<td>德国</td>
						<td>奔驰</td>
						<td>1480256963</td>
						<td id="cc7" style="border:5px solid #0099CC;background:orangered;">delect</td>
					</tr>
				</tbody>
			</table>
		</div>
		<table id="as" style="background-color: #0099CC;">
			<div id="kkk">
				<tr>
					<td style="text-align:center;">
						<span id="shujutianjia" style="font-size:150px;">添加数据</span>
						<td style="text-align:right;">
						<button id="chacha">x</button>
						</td>
						<div></div>
					</td>
				</tr>
				<tr>
					<div class="form-item">
						<td>
							<label class="lb" style="font-size:150px;">所属国家:</label>
							<input class="txt" type="text" id = "chandi"placeholder="请输入产地"
								style="border:5px solid #0099CC;background:chartreuse;font-size:150px;">
						</td>
				</tr>
			</div>
			<td>
				<div class="form-item">
					<label class="lb" style="font-size:150px;">所属品牌:</label>
					<input class="txt" type="text" id= "pinpai"placeholder="请输入品牌"
						style="border:5px solid #0099CC;background:white;font-size:150px;">
			</td>
			<tr>
				</div>
				<td style="text-align:right;">
					<input type="button" value="点击添加" id="tianjia"
						style="border:5px solid mediumpurple;background:orangered;font-size:150px;">
				</td>
			</tr>
			</div>
		</table>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(function() {
		//给添加按钮设置点击事件  2s淡出as表格 wrap表格透明度更改为0.2
		$('#cont').click(function() {
			$('#as').fadeIn(2000);
			$('#wrap').css('opacity', '0.2');	
		});
		//点小叉叉as表格隐藏两秒淡出 wrap显示 
		$('#chacha').click(function(){
			$('#as').fadeOut(2000);
			$('#wrap').css('opacity', '1');
		});
		//给表格数据设置删除事件
		$('#cc').click(function() {
			$(this).parent().remove();
		});
		$('#cc8').click(function() {
			$(this).parent().remove();
		});
		$('#cc9').click(function() {
			$(this).parent().remove();
		});
		$('#cc7').click(function() {
			$(this).parent().remove();
		});
		//将第一行输入的东西装入str 第二行输入的东西装入st
		//拼接装入xinzeng这个数组
		$('#tianjia').click(function(){
			var str = $('#chandi').val();
			var st  = $('#pinpai').val();
			var $xinzeng=$(	'<tr>'+
						'<td>'+str+'</td>'+
						'<td>'+st+'</td>'+
						'<td style="text-align: center;">1234567892</td>'+
						'<td id="lll" style="border:5px solid #0099CC;background:orangered;">delect</td>'
					+'</tr>'
					)
					//给新添加的数据设置移除事件
					// $xinzeng.find('#lll').click(function(){
					// 	$xinzeng.remove();
					// });
                   $('#op').on('click','#lll',function(){
					  $(this).parent().remove(); 
				   });
					//新添加的数据新增到id为cccc这个表格
				$('#cccc').append($xinzeng);	
				//as表格淡出2s
				$('#as').fadeOut(2000);
				//warp表格显示
				$('#wrap').css('opacity', '1');
			
		});
		
	});
</script>

15.off解除事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.cont{
			width:200px;
			height:200px;
			background: darkred;
		}</style>
	</head>
	<body>
		<input type="button" value="注册事件" id="zhuce">
		<input type="button" value="解除事件" id="jiechu">
		<div class="cont" ></div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('#zhuce').on('click',function(){
		$('.cont').on({
			'mouseenter':function(){
				console.log('鼠标移入事件');
			},
			'click':function(){
				console.log('鼠标点击事件');
			}
		});
		$('#jiechu').on('click',function(){
			// $('.cont').off();//默认解绑所有事件
	          $('.cont').off('click');
		});
	});
});
</script>

16.trigger触发自定义事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
	.cont{
		width:200px;
		height:200px;
		background: darkred;
	}</style>
	</head>
	<body>
		<input type="button" value="按钮1" id="anniu1">
		<input type="button" value="按钮2" id="anniu2">
		<div class="cont" ></div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
// $('.cont').on('click',function(){
// 	alert('我被点击了');
// });
// var i =0;
// $('#anniu1').on('click',function(){
// 	i++;
// 	//每点击两次anniu1触发.cont中的点击事件 
// 	if(i%2==0){
// 			$('.cont').trigger('click');
// 	}
//  });
//   自定义一个点击事件
$('.cont').on('houwang',function(){
	alert('猴王帅');
})
// //点一次anniu1触发houwang这个事件 
// $('#anniu1').on('click',function(){
// 	$('.cont').trigger('houwang');
// });
$('#anniu2').on('click',function(){
	var str = confirm('请问猴王帅嘛?');//弹出一个可以选择确定和取消的弹框
	if(str==true){//确定则触发 取消触发else
		$('.cont').trigger('houwang');
	}
	else
	{
		alert('猴王是你爹');
	}
});
});</script>

17.阻止冒泡事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			padding:0;
			margin:0;
		}
		.cont{
			width:200px;
			height:200px;
			position: relative;
			border:5px solid #69DBDC;
			top:100px;
			left:100px;
			
		}
		</style>
	</head>
	<body>
		<div class="cont">
		<button id ="anniu">我还是一个按钮</button>
		</div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
$(function(){
	
	
	// 1.什么事件对象
	// 注册一个事件，系统就会帮我们生成这个记录这个事件触发时候的一些信息
	// 比如触发事件的时候有没有按住某个键，再不如触发这个事件的一些坐标信息
	// jquery中用事件参数e来获取
	// jquery中是对原生js的一个封装，处理好了兼容性
		$('.cont').on('click',function(e){
			// console.log(e);
			//触发事件那一点距离  屏幕最左上角的值
			console.log("screenX"+e.screenX+":"+e.screenY);
			//触发事件那一点距离  可视左上角的值
			console.log("clientX"+e.clientX+":"+e.clientY);
			//触发事件那一点距离  页面左上角的值
			console.log("pageX"+e.pageX+":"+e.pageY);
		});
		
		
		// 	2.阻止冒泡事件
		// $('.cont').on('click',function(){
		// alert('我是一个边框');
		// });
		// $('#anniu').on('click',function(e){
		// 	alert('我是按钮事件');
		// 	e.stopPropagation();//阻止事件冒泡
		// 	//如果不添加他的父级div也会触发弹窗
		// });
		});
	</script>

<< 阻止浏览器默认行为和记录键盘按下的键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			padding:0;
			margin:0;
		}
		</style>
	</head>
	<body>
		<div class="cont">
		<a href="www.baidu.com" class="aa">百度一下  你就知道</a>
		</div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
$(function(){
		// // //1.防止事件冒泡和还能防止浏览器默认(a标签的跳转)行为跳转
		// $('.cont').on('click',function(){
		// alert('我是一个边框');
		// });
		// $('.aa').on('click',function(e){
		// 	alert('djf');
		// 	e.stopPropagation();//阻止事件冒泡
		// 	e.preventDefault();//防止浏览器默认行为 
			
		// // return false;//既能防止事件冒泡和还能防止浏览器默认行为跳转
		// });
		//2.获取键盘按下的键
		$(document).on('keydown',function(e){
			//keyCode能获取按下的是哪个键
			console.log(e.keyCode);
		});
	});
	</script>

18.键盘变色案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.aaa{
			width:200px;
			height:200px;
			background-color: white;
			position:absolute;
			top:300px;
			left:300px;
		}
		.lla{
			position:absolute;
			font-size:50px;
			font-family:'宋体';
			top:10px;
			left:250px;
		}
		.llas{
			position:absolute;
			font-size:50px;
			font-family:'宋体';
			top:80px;
			left:250px;
		}
		.ll{
			position:absolute;
			font-size:50px;
			font-family:'宋体';
			top:200px;
			left:250px;
		}</style>
	</head>
	<body>
		<div class="ll">键盘变色案列</div>
		<div class="lla">当前code值为</div><div class="llas">0</div>
		<div class="aaa">	
		</div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
var $str = $('.aaa');
var $zhi = $('.llas');
$(document).on('keydown',function(e){
switch(e.keyCode){
	case 82 : 
	$str.css('backgroundColor','red');
	$zhi.text(82);
	break;
	case 71 :
	$str.css('backgroundColor','pink');
	$zhi.text(71);
	break;
	case 80 :
	$str.css('backgroundColor','black');
	$zhi.text(80);
	break;
	case 89 :
	$str.css('backgroundColor','green');
	$zhi.text(89);
	break;
	case 65 :
	$str.css('backgroundColor','purple');
	$zhi.text(65);
	break;
	default:
	$str.css('backgroundColor','blue');
		$zhi.text('null');
	break;

}
});
});
</script>

19.五角星评分案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			padding:0px;
			margin:0px;
		}
		#wrap{
			font-size:150px;`
		}
		li {
			margin-right:40px;
          float:left;
		  list-style: none; //消除li标签前面的小黑点
		  
		}
		</style>
	</head>
	<body>
		<div id = "wrap">
		<ul>
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
		</ul>
	</div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	// prev()查找上一个兄弟
	// prevAll()查找之前其他的兄弟
	// next()下一个兄弟
	// nextAll() 之后所有的兄弟
	var sxwjx= '★';
	var kxwjx = '☆';
	$('li').on('mouseenter',function(){
		console.log('鼠标进入');
		// console.log($(this).text('★'));  查看有没有返回值
		 // console.log($(this).text('★').prevAll());
		 
		 //当前所在的li和前面的兄弟li标签都变为实心
		 $(this).text(sxwjx).prevAll().text(sxwjx);
		 //之后的兄弟li标签都变为空心五角星
		 $(this).nextAll().text(kxwjx);
		 
		}).on('mouseleave',function(){
			
			//鼠标移除全部变为空心
			$('li').text(kxwjx);
			
			//鼠标移除后定位到刚刚点击事件中做记号那个li标签    []是属性选择器
			$('li[shuxing]').text(sxwjx).prevAll().text(sxwjx);
		}).on('click',function(){
			//做记号 ：给当前这个点击的li添加一个唯一的属性 （shuxing=weiyi）
			//给其他兄弟移除这个属性保证是唯一的一个属性
			$(this).attr('shuxing','weiyi').siblings().removeAttr('shuxing');
		});
});
</script>

20.链式编程和end的使用

<< 链式编程：一个元素调用一个方法这个方法有返回值并且返回的是一个jquery对象就可以继续使用jquery方法

<< end()：返回上一个状态，end（）也是jquery方法也需要jquery对象才能点出来

21.显示迭代

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		ul{
			list-style:none;//隐藏li标签的小黑点
		}
		li{
			width:300px;
			height:300px;
			background: pink;
			text-align:center;
			float:left;
			margin:50px;
			line-height: 300px;//设置文字行高
		}</style>
	</head>
	<body>
		<ul id="cont"> 
			<li>什么都看不见</li>
			<li>什么都看不见</li>
			<li>什么都看不见</li>
			<li>什么都看不见</li>
			<li>什么都看不见</li>
			<li>什么都看不见</li>
			<li>什么都看不见</li>
			<li>什么都看不见</li>
			<li>什么都看不见</li>
			<li>什么都看不见</li>
		</ul>
		<div class="kk"></div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	var $str = $('#cont').children();
	 // console.log(str);
	// each()遍历jquery对象集合
	$str.each(function (index,element){
		// console.log(index);//每一个li标签的索引
		// console.log(element);//每一个li标签里面的dom对象
		 $(element).css('opacity',(index+1)/10);
	});
	});
</script>

22.多库共存

<< 后引入的jquery会把前面的覆盖掉

重庆李豪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习jquery的第二天

1.表格删除行和清空案列<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .wrap{ width: 410px; margin:100px auto 0; } .wrap tbody tr td{ border:5px solid #9ACD32; }&lt
复制链接

扫一扫