day15 js jquery
文本操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<span class="num">23</span>
</div>
<button>click</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("button").click(function () {
var $val=$(".outer .num").html();
$(".outer .num").html(parseInt($val)+1);
})
</script>
</body>
</html>
属性操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.min.js"></script>
<style>
#i3{
color: green;
}
</style>
</head>
<body>
<p class="c1 c2" id="i1" egon="9000">this is P</p>
<p id="i3">this is P</p>
<input type="checkbox" >
<script>
// 取某一个属性的值
$(".c1").attr("id");
$(".c1").attr("egon");
// 赋值操作
$(".c1").attr("id","i2");
$(".c1").attr("egon",9999);
// css的样式操作
$("#i3").click(function () {
// $(this).css("color","red");
$(this).css({"color":"red","fontSize":"32px"})
})
</script>
</body>
</html>
Iquery操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<p>111</p>
<p>222</p>
<p>333</p>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// jquery两种循环方式
// 方式1：$.each(循环对象,function(){
// console.log("OK")
// });
// var arr=[111,222,333];
//
// var info={"name":"egon","age":9000};
//
// $.each(info,function (i,j) {
// console.log(i); // 下标
// console.log(j); // 下标 对应的值
// })
// 方式2：
$(".outer p").each(function () {
console.log($(this).html()) // $(this)指的是每一次循环的对象
})
</script>
</body>
</html>
表格操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="select_all">全选</button>
<button class="cancel">取消</button>
<button class="reverse">反选</button>
<hr>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>23</td>
<td>s5</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>23</td>
<td>s5</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>23</td>
<td>s8</td>
</tr>
</table>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 全选事件
$(".select_all").click(function () {
// 方式1：
// $(":checkbox").each(function () {
// $(this).prop("checked",true)
// })
// 方式2
$(":checkbox").prop("checked",true)
});
// 取消事件
$(".cancel").click(function () {
$(":checkbox").prop("checked",false)
});
// 反选事件
$(".reverse").click(function () {
$(":checkbox").each(function () {
// if($(this).prop("checked")){
// $(this).prop("checked",false)
// }
// else {
// $(this).prop("checked",true)
// }
// 方式2：
$(this).prop("checked",!$(this).prop("checked"))
})
})
</script>
</body>
</html>
事件绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button>Add</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
// li的弹出文本事件
// $("ul li").click(function () {
// alert($(this).html())
// });
// $("ul li").on("click",function () {
// alert($(this).html())
// });
// 事件委派
$("ul").on("click","li",function () {
alert($(this).html())
});
// button的追加子元素吧事件
$("button").click(function () {
$("ul").append("<li>444</li>")
})
</script>
</body>
</html>
节点操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 400px;
height: 300px;
background-color: darkgrey;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="outer">
<h4>hello world</h4>
<p>123</p>
<p>456</p>
<p>789</p>
</div>
<hr>
<button class="add">Add</button>
<button class="del">删除</button>
<button class="set">替换</button>
<script>
// 添加节点操作
$(".add").click(function () {
// 创建一个img标签对象
var $img=$("<img>"); // <img>
$img.attr("src","egg.jpg");
console.log($img[0]);
// 添加到指定节点中： $(父标签).append(添加的子标签)
// $(".outer").append($img);
// $img.appendTo(".outer")
$(".outer").after($img)
});
// 删除节点操作
$(".del").click(function () {
$(".outer").remove()
//$(".outer").empty() // empty 清空
});
// 替换节点
$(".set").click(function () {
var $img=$("<img>"); // <img>
$img.attr("src","egg.jpg");
$(".outer p").eq(1).replaceWith($img)
});
// 拷贝节点
var $copy=$(".outer").clone();
console.log($copy[0])
</script>
</body>
</html>
Clone实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="style_box">
<div class="item">
<button class="add">+</button><input type="text">
</div>
</div>
<script>
// 添加事件
$(".item .add").click(function () {
var $clone=$(this).parent().clone();
$clone.children(".add").html("-").attr("class","del");
$(".style_box").append($clone);
});
// 删除事件(事件委派)
$(".style_box").on("click",".del",function () {
console.log($(this));
$(this).parent().remove()
})
</script>
</body>
</html>
表格的增删改操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.6;
}
.model{
position: fixed;
left:200px;
top: 100px;
width: 600px;
height: 300px;
background-color: white;
}
.hide{
display: none;
}
</style>
</head>
<body>
<button class="addBtn">添加</button>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>小高</td>
<td>23</td>
<td>s19</td>
<td>
<button class="del">删除</button>
<button class="del">编辑</button>
</td>
</tr>
<tr>
<td>小李</td>
<td>23</td>
<td class="active">s18</td>
<td><button class="del">删除</button>
<button class="del">编辑</button>
</td>
</tr>
<tr>
<td>小贾</td>
<td>28</td>
<td>s19</td>
<td>
<button class="del">删除</button>
<button class="del">编辑</button>
</td>
</tr>
</tbody>
</table>
<div class="shade hide"></div>
<div class="model hide">
<h3>添加学生信息：</h3>
<form action="">
<p>姓名 <input type="text" class="item"></p>
<p>年龄 <input type="text" class="item"></p>
<p>班级 <input type="text" class="item"></p>
<input type="button" value="submit" id="subBtn">
</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 删除事件
$(".del").click(function () {
console.log($(this));
$(this).parent().parent().remove()
});
// 添加事件
$(".addBtn").click(function () {
$(".shade").show();
$(".model").show()
});
// $("#subBtn").click(function () {
// // 关闭对话框
// $(".shade").hide();
// $(".model").hide();
// // 获取用户输入值
// var arr=[];
// var $tr=$("<tr>");
// $(".item").each(function () {
// console.log($(this));
// arr.push($(this).val());
//
// $td=$("<td>"); // <td></td>
// $td.html($(this).val());
// $tr.append($td)
// });
// $tr.append('<td><button class="del">删除</button></td>');
// console.log($tr[0]);
//
// // 构建tr标签
//
// $("#tbody").append($tr)
//
//
//
//
//
// })
$("#subBtn").click(function () {
// 关闭对话框
$(".shade").hide();
$(".model").hide();
// 获取用户输入值
var arr=[];
$(".item").each(function () {
console.log($(this));
arr.push($(this).val());
});
console.log(arr);
// 构建tr标签
s='<tr><td>'+arr[0]+'</td><td>'+arr[1]+'</td><td>'+arr[2]+'</td><td><button class="del">删除</button></td></tr>'
$("#tbody").append(s)
})
</script>
</body>
</html>
动画效果1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">DIV</div>
<button class="xianshi">显示</button>
<button class="yincang">隐藏</button>
<button class="qiehuan">切换</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".xianshi").click(function () {
// $(".c1").removeClass("hide")
$(".c1").show(1000);
});
$(".yincang").click(function () {
$(".c1").hide(1000);
});
$(".qiehuan").click(function () {
$(".c1").toggle(1000)
});
</script>
</body>
</html>
动画效果2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<div class="title">菜单1</div>
<div class="con">
<p>111</p>
<p>111</p>
<p>111</p>
</div>
</div>
<hr>
<button class="xianshi">显示</button>
<button class="yincang">隐藏</button>
<button class="qiehuan">切换</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".xianshi").click(function () {
$(".con").slideDown(2000)
});
$(".yincang").click(function () {
$(".con").slideUp(2000)
});
$(".qiehuan").click(function () {
$(".con").slideToggle(1000)
});
</script>
</body>
</html>
动画效果3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
<hr>
<button class="xianshi">显示</button>
<button class="yincang">隐藏</button>
<button class="qiehuan">切换</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".xianshi").click(function () {
$(".c1").fadeIn(2000)
});
$(".yincang").click(function () {
$(".c1").fadeOut(2000)
});
$(".qiehuan").click(function () {
// $(".c1").fadeToggle(2000)
// $(".c1").fadeTo(2000,0.2)
});
</script>
</body>
</html>
Offset偏移量：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.c1,.c2{
width: 200px;
height: 200px;
}
.c1{
background-color: darkgrey;
}
.c2{
background-color: cadetblue;
}
.c3{
position: relative;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c3"><div class="c2"></div></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 获取偏移量
// console.log($(".c1").offset().left);
// console.log($(".c1").offset().top);
console.log($(".c2").offset().left);
console.log($(".c2").offset().top);
console.log($(".c2").position().left);
console.log($(".c2").position().top); // 不可以设置
// 设置偏移量
//$(".c2").offset({top:200,left:200})
</script>
</body>
</html>
返回顶部：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.c1{
width: 100%;
height: 2000px;
background-color: darkgrey;
}
.returnTop{
width: 100px;
height: 46px;
background-color: darkcyan;
color: white;
text-align: center;
line-height: 46px;
position: fixed;
bottom: 20px;
right: 20px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="c1">
<h1>yuan</h1>
</div>
<div class="returnTop hide">返回顶部</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 返回顶部事件
$(".returnTop").click(function () {
$(window).scrollTop(0)
});
// 监听滚动条的位置
$(window).scroll(function () {
console.log($(window).scrollTop());
var $current_position=$(window).scrollTop()
if($current_position>200){
$(".returnTop").show()
}
else {
$(".returnTop").hide()
}
})
</script>
</body>
</html>
模态对话框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.backend{
width:100%;
height: 2000px;
background-color: lightblue;
}
*{
margin: 0;
}
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.6;
}
.model{
position: fixed;
left:200px;
top: 100px;
width: 600px;
height: 300px;
background-color: white;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="backend">
<button>注册</button>
</div>
<div class="shade hide"></div>
<div class="model hide">
<h3>添加学生信息：</h3>
<form action="">
<p>姓名 <input type="text"></p>
<p>年龄 <input type="text"></p>
<p>班级 <input type="text"></p>
<input type="button" value="submit" id="subBtn">
</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("button").click(function () {
$(".shade").show();
$(".model").show()
});
$("#subBtn").click(function () {
$(".shade").hide();
$(".model").hide()
})
</script>
</body>
</html>
