jQuery选项卡、增删改查、懒加载

#选项卡

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.web{
				margin: auto;
				width: 300px;
				margin-top: 50px;
				
			}
			.menu {
				width: 300px;
				height: 50px;
				font-size:0px;
			}
			
			li {
				font-size: 15px;
				display: inline-block;
				width: 98px;
				height: 100%;
				border: 1px solid #000000;
			}
			.conet{
				position: relative;
				height: 200px;
				border: 1px solid #000000;
				border-top: none;
			}
			.test{
				position: absolute;
				top: o;
				left: 0;
				display: none;
			}
			.test:nth-child(1){
				display: block;
			}
		</style>

		<div class="web">
			<ul class="menu">
				<li>点击</li>
				<li>事件</li>
				<li>事情</li>
			</ul>
			<div class="conet">
				<div class="test">1</div>
				<div class="test">2</div>
				<div class="test">3</div>
			</div>
		</div>
```js
	</script>
		<script type="text/javascript">
			//index()可以获取到元素对应的下标值
			$(".menu li").on("click",function(){
				var index = $(this).index();
				console.log(index);
				$(".conet div").eq(index).css("display","block").siblings().css("display","none");
			})
		</script>

#表格增删改查

		<style type="text/css">
			.userInfo{
				margin: 20px 0px 100px 0px;
				text-align: center;
			}
			tr{
				text-align: center;
			}
		</style>

		<div class="web">
			<div class="userInfo">
				姓名：<input type="text" class="userName" placeholder="请输入用户名" />
				年龄：<input type="text" class="age" placeholder="请输入年龄" />
				性别：<input type="text" class="gender" placeholder="请输入性别" />
				<input type="button" class="add" value="增加" />
				<input type="button" class="delSel" value="删除选中元素" />
				<input type="button" class="order" value="排序" />
			</div>
			<table border="1" width="600" align="center">
				<tr>
					<th>ID</th>
					<th><input class="allCheck" type="checkbox" /></th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
			</table>
		</div>

//增删改查
//增加条目
var Id =0;
$(".add").on("click",function(){
	var userName = $(".userName").val(),
		age = $(".age").val(),
		gender = $(".gender").val();
		Id++;
	var tr =`<tr><td>${Id}</td><td><input class="check" type="checkbox" /></td><td>${userName}</td><td>${age}</td><td>${gender}</td><td><input type="button" class="delBtn" value="删除"/></td></tr>`;
	$("table").append(tr);
})
//删除
$("table").on("click",".delBtn",function(){
	console.log($(this));
	$(this).parents("tr").detach();
})
//删除选中条目
$(".delSel").on("click",function(){
	console.log($(".check"));
	$(".check").each(function(item,index){
		if($(this).prop("checked")){
		console.log($(this));
		$(this).parents("tr").detach();
	}
	})
})
//全选
$(".allCheck").on("change",function(){
	if($(this).prop("checked")){
		$(".check").prop("checked",true);
	}else{
		$(".check").prop("checked",false);
	}
})
//反选
$("table").on("click",".check",function(){
		console.log($(".check"));
		var arr = [];
		$(".check").each(function(index,item){
			console.log(item)
			if($(item).prop("checked")){
				arr.push(item)//向数组里面添加元素
			}
			console.log(arr);
			if(arr.length==$(".check").length){
				$(".allCheck").prop("checked",true);
			}else{
				$(".allCheck").prop("checked",false);
			}
		})
})
//根据年龄排序
$(".order").on("click",function(){
	var allage = $("td:nth-child(4)");
	console.log(allage);
	var arr = allage.sort(function(a,b){
		return $(a).text() - $(b).text();
	});
	console.log(arr);
	$(arr).each(function(index,item){
		$("table").append($(item).parents("tr"));
	})
})

#懒加载

		<style type="text/css">
			body{
				text-align: center;
			}
			img{
				width: 1024px;
				height: 739px;
			}
			.lazyload{
				opacity: 0;
				transition:1s;
			}
		</style>
	```
	```html
		<img src="img/1.jpg"/>
		<img src="img/1.jpg"/>
		<img class="lazyload"  data-srcl="img/1.jpg"/>
		<img class="lazyload" data-srcl="img/1.jpg"/>
		<img class="lazyload" data-srcl="img/1.jpg"/>
		<img class="lazyload" data-srcl="img/1.jpg"/>
		<img class="lazyload" data-srcl="img/1.jpg"/>
	```
	```js
			/**
			 * 1、浏览器可视高度
			 * 2、文档滚动到浏览器外的高度
			 * 3、图片相对文档顶部角的高度
			 * 
			 * */
			var winH =$(window).innerHeight();
			console.log(winH);
			$(".lazyload").load(function(){
				$(this).css("opacity",1)
			})
			$(document).scroll(function(){
				var scrT = $(this).scrollTop();
				console.log(scrT);
				$(".lazyload").each(function(index,item){
					console.log(this);
					var imgT = $(this).offset().top;
					console.log(imgT);
					if(imgT-scrT-winH<-50){
						var _scr = $(this).data("srcl");
						if(!$(this).prop("src")){
							$(this).prop("src",_scr);
						}
					}
				})
			})