jQuery案例
养昊天
1. 开关灯(jquery与dom对象转换案例)
点击按钮是网页屏幕变亮或变暗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<button>开灯</button>
<button>关灯</button>
<img src="./image/coder.jpg" alt="">
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function (){
// 给按钮添加事件：设置body的背景色
// 1. 获取按钮
let btns = document.getElementsByTagName('button');
// 2. 给关灯按钮设置点击事件
btns[1].onclick=function (){
$('body').css('backgroundColor','#ccc');
}
// 3. 给开灯按钮设置一个点击事件
$(btns[0]).click(function (){
$('body')[0].style.backgroundColor='white';
})
})
</script>
2. 下拉菜单(选择器案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(../image/bg.jpg);
}
.wrap li{
background-image: url(../image/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。
// 给一级菜单li设置鼠标离开事件，二级菜单隐藏。
//获取一级菜单li的方式:
//$('li');//不行
//$('ul>li');//不行
//$('.wrap li');//不行
//$('.wrap>ul>li')//可行的.
//1.给一级菜单li设置鼠标移入事件，二级菜单显示。
$(`.wrap>ul>li`).mouseover(function () {
//console.log(this); //谁触发了鼠标移入事件,那这个this就是谁,this还是一个dom对象.
// $(this).children('ul').css('display','block'); //显示就是更改display属性为block.
$(this).children('ul').show(); //show()方法本质上还是更新display属性为block.
});
//2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。
$('.wrap>ul>li').mouseout(function () {
$(this).children('ul').hide(); //hide()方法本质上还是更新display属性为none
});
//3.思考题:
//为什么不给一级菜单a标签设置鼠标移入和离开事件?
//因为这样的话,选不到二级菜单.
// $('.wrap>ul>li>a').mouseover(function () {
// $(this).siblings('ul').show();
// });
// $('.wrap>ul>li>a').mouseout(function () {
// $(this).siblings('ul').hide();
// });
});
</script>
3. 突出展示(选择器案例)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="../image/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="../image/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="../image/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="../image/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="../image/05.jpg" alt=""/></a></li>
<li><a href="#"><img src="../image/06.jpg" alt=""/></a></li>
</ul>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//需求1:给小人物所在的li标签设置鼠标移入事件:当前li标签透明度为1,其他的兄弟li标签透明度为0.4
//需求2:鼠标离开大盒子,所有的li标签的透明度改成1.
//获取小人物们所在的li
//$('.wrap li')//可以的
//console.log($('.wrap').find('li'));//可以的
//需求1:
$(`.wrap`).find('li').mouseenter(function () {
console.log($(this).css('opacity', 1)); //这个css方法有返回值,返回值就是设置这个方法的元素本身.
console.log($(this).css('opacity', 1).siblings('li'));
$(this).css('opacity', 1).siblings('li').css('opacity',0.4);
});
//需求2:
$('.wrap').mouseleave(function () {
//$('.wrap').find('li').css('opacity',1);
//console.log($(this)); //在这个离开事件中,this是这整个大盒子.
$(this).find('li').css('opacity',1);
});
});
</script>
4. 手风琴(选择器案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
.parentWrap {
width: 200px;
text-align: center;
}
.menuGroup {
border: 1px solid #999;
background-color: #e0ecff;
}
.groupTitle {
display: block;
height: 20px;
line-height: 20px;
font-size: 16px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.menuGroup > div {
height: 200px;
background-color: #fff;
display: none;
}
</style>
</head>
<body>
<ul class="parentWrap">
<li class="menuGroup">
<span class="groupTitle">标题1</span>
<div>我是弹出来的div1</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题2</span>
<div>我是弹出来的div2</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题3</span>
<div>我是弹出来的div3</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题4</span>
<div>我是弹出来的div4</div>
</li>
</ul>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//需求:点击标题li标签,对应的div显示, 他的兄弟标签li下面的div隐藏.
$('.parentWrap>.menuGroup').click(function () {
// console.log($('.menuGroup'))
//jQuery特性:隐式迭代
//jQuery特性:链式编程,在于一个方法返回的是一个jQuery对象,既然是jQuery对象就可以继续点出jQuery的方法来.
$(this).children('div').show().parent().siblings('li').children('div').hide();
});
});
</script>
5. 淘宝服饰精品(选择器案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 298px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
overflow: hidden;
}
#left,#center,#right{
float: left;
}
#left li , #right li{
background: url(../image/lili.jpg) repeat-x;
}
#left li a,#right li a{
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover,#right li a:hover{
background-image: url(../image/abg.gif);
}
#center {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<ul id="center">
<li><a href="#"><img src="../image/女靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/雪地靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/冬裙.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/呢大衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/女裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/羽绒服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/牛仔裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/女包.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/男包.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/登山鞋.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/皮带.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/围巾.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/皮衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/男毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/男棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="../image/男靴.jpg" width="200" height="250" /></a></li>
</ul>
<ul id="right">
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">登山鞋</a></li>
<li><a href="#">皮带</a></li>
<li><a href="#">围巾</a></li>
<li><a href="#">皮衣</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">男靴</a></li>
</ul>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//需求1:给左边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.
//需求2:给右边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.
//需求1:
$('#left>li').mouseenter(function () {
//获取当前鼠标移入的这个li标签的索引.
var idx = $(this).index(); //索引:表示的是这个元素在他兄弟元素间的排行.
//console.log(idx);
//让中间索引对应的li显示,其他的li隐藏.
//$('#center>li:eq('+idx+')'); //字符串的拼接
$('#center>li').eq(idx).show().siblings('li').hide();
});
//需求2:
$('#right>li').mouseenter(function () {
//获取当前鼠标移入的这个li标签的索引.
var idx = $(this).index();
idx += 9;//9不要写死,9是左边li标签的个数.
//让中间索引对应的li显示,其他的li隐藏.
$('#center>li').eq(idx).show().siblings('li').hide();
});
//因为age已经成为字符串的一部分了.不能拿到age变量的值.
// var age = 18;
// console.log("我的名字是age");
//思考题:
//为什么是给li标签设置鼠标移入事件,而不是给a标签设置鼠标移入事件?
//因为给a标签设置的话,不能拿到正确的索引.
// $('#left a').mouseenter(function () {
// var idx = $(this).index();
// console.log(idx);
// });
});
</script>
6. tab栏切换(class操作案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.selected {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="../image/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="../image/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="../image/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="../image/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//需求:给tab栏的每一个li标签设置鼠标移入事件: 当前li添加active类,其他的兄弟li移除active类.
// 找到当前tab栏索引一致的div,让他添加 selected类,其他的兄弟div移除selected类.
//需求1
$('.tab>.tab-item').mouseenter(function () {
$(this).addClass('active').siblings('li').removeClass('active');
//获取鼠标当前移入的这个li标签的索引
var idx = $(this).index();
//需求2:
$('.products>.main').eq(idx).addClass('selected').siblings('div').removeClass('selected');
});
});
</script>
7. 下拉菜单(滑入与滑出案例)
// html与css代码与下拉菜单(选择器案例)相同
$(function () {
//需求: 给一级菜单的li标签设置鼠标移入事件，二级菜单ul显示。
// 给一级菜单li设置鼠标离开事件，二级菜单隐藏。
//鼠标移入事件.
$(`.wrap>ul>li`).mouseenter(function () {
//$(this).children('ul').css('display','block');
//简写
$(this).children('ul').stop(true,false).slideDown(300);
});
//鼠标移出事件.
$('.wrap>ul>li').mouseleave(function () {
//$(this).find('ul').css('display','none');
//简写
$(this).find('ul').stop(true,false).slideUp(150);
});
});
8. 360开机动画(自定义动画案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 322px;
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
span {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<span id="closeButton"></span>
<div class="hd" id="headPart">
<img src="../image/t.jpg" alt=""/>
</div>
<div class="bd" id="bottomPart">
<img src="../image/b.jpg" alt=""/>
</div>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//1.给关闭按钮一个点击事件.
$('#closeButton').click(function () {
//2.让下面那部分的高度动画变为0.
$('#bottomPart').animate({
height:0
},500, function () {
//3.让整个大盒子的宽度动画变为0
$('#box').animate({
width:0
},1000);
});
});
});
</script>
9. 生成表格(动态创建元素案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<input type="button" value="获取数据" id="j_btnGetData" />
<table>
<thead>
<tr>
<th>标题</th>
<th>地址</th>
<th>说明</th>
</tr>
</thead>
<tbody id="j_tbData"></tbody>
</table>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//模拟从后端拿到的数据
//data数组的每一个元素其实就是一个tr.
var data = [{
name: "传智播客",
url: "http://www.itcast.cn",
type: "IT最强培训机构"
}, {
name: "黑马程序员",
url: "http://www.itheima.com",
type: "大学生IT培训机构"
}, {
name: "传智前端学院",
url: "http://web.itcast.cn",
type: "前端的黄埔军校"
}];
//需求:点击获取数据按钮,根据data这个数组里面的数据来给tbody追加tr.
//data这个数组,有多少个元素,就生成多少个tr, 每一个元素又是一个对象,所以对象有多少个键值对就有多少个td.
//给获取数据按钮设置一个点击事件.
$('#j_btnGetData').click(function () {
//1.html();
//设置内容,内容中有标签会解析; 会覆盖原来的内容的.
var list = [];
for(var i = 0 ; i < data.length; i++){
//生成tr.
list.push("<tr>");
//生成td
for(var key in data[i]){
list.push('<td>');
list.push(data[i][key]);
list.push('</td>');
}
list.push("</tr>");
}
//console.log(list.join(""));
$('#j_tbData').html(list.join(""));
//2.$();
// for(var i = 0 ; i < data.length; i++){
// var $tr = $("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['url']+"</td><td>"+data[i]['type']+"</td></tr>");
// //把创建出来的$tr追加到tbody中去.
// $('#j_tbData').append($tr);
// }
});
});
</script>
10. 城市选择(节点创建案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 200px;
background-color: teal;
height: 200px;
font-size: 20px;
}
.btn-box {
width: 30px;
display: inline-block;
vertical-align: top;
}
</style>
<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">广州</option>
<option value="5">西红柿</option>
</select>
<div class="btn-box">
<!--实体字符-->
<button id="btn-sel-all"> >> </button>
<button id="btn-sel-none"> << </button>
<button id="btn-sel"> ></button>
<button id="btn-back"> < </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//1.全部到右边
$('#btn-sel-all').click(function () {
//找到左边select下拉菜单的所有option项,把这些option项都添加到右边的select下拉菜单中去.
$('#src-city>option').appendTo($('#tar-city'));
});
//2.全部到左边
$('#btn-sel-none').click(function () {
//找到右边select下拉菜单中的所有option项,把这些option项都添加到左边的select下拉菜单中去.
$('#tar-city>option').appendTo($('#src-city'));
});
//3.选中的到右边.
$('#btn-sel').click(function () {
//找到左边select下拉菜单中,被选中的option项, 把这些option项添加到右边的select下拉菜单中.
$('#src-city>option:selected').appendTo($('#tar-city'));
});
//4.选中的到左边.
$('#btn-back').click(function () {
//找到右边select下拉菜单中,被选中的option项,把这些option项添加到左边的select下拉菜单中.
$('#tar-city>option:selected').appendTo($('#src-city'));
});
});
</script>
11. 表格删除(清空和移除节点案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 410px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th, td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "΢ÈíÑźÚ";
color: #fff;
}
td {
font: 14px "΢ÈíÑźÚ";
}
td a.get {
text-decoration: none;
}
a.del:hover {
text-decoration: underline;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
.form-item > .lb {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100px;
text-align: right;
}
.form-item > .txt {
width: 300px;
height: 32px;
}
.form-add-title span {
width: auto;
height: 18px;
font-size: 16px;
font-family: ËÎÌå;
font-weight: bold;
color: rgb(102, 102, 102);
text-indent: 12px;
padding: 8px 0px 10px;
margin-right: 10px;
display: block;
overflow: hidden;
text-align: left;
}
.form-add-title div {
width: 16px;
height: 20px;
position: absolute;
right: 10px;
top: 6px;
font-size: 30px;
line-height: 16px;
cursor: pointer;
}
.form-submit input {
width: 170px;
height: 32px;
}
</style>
</head>
<body>
<div class="wrap">
<input type="button" value="清空内容" id="btn">
<table>
<thead>
<tr>
<th>课程名称</th>
<th>所属学院</th>
<th>操作</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>JavaScript</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascrip:;" class="get">DELETE</a></td>
</tr>
<tr>
<td>css</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascrip:;" class="get">DELETE</a></td>
</tr>
<tr>
<td>html</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascrip:;" class="get">DELETE</a></td>
</tr>
<tr>
<td>jQuery</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascrip:;" class="get">DELETE</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//1.清空内容
$('#btn').click(function () {
//找到tbody,清空他的内容.
$('#j_tb').empty();
});
//2.删除对应的行.
$('#j_tb .get').click(function () {
//点击a标签,删除a标签对应的那一行.
$(this).parent().parent().remove();
});
});
</script>
12. 动态数据添加和删除(val()方法案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 410px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th, td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
td a.get {
text-decoration: none;
}
a.del:hover {
text-decoration: underline;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
.btnAdd {
width: 110px;
height: 30px;
font-size: 20px;
font-weight: bold;
}
.form-item {
height: 100%;
position: relative;
padding-left: 100px;
padding-right: 20px;
margin-bottom: 34px;
line-height: 36px;
}
.form-item > .lb {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100px;
text-align: right;
}
.form-item > .txt {
width: 300px;
height: 32px;
}
.mask {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
display: none;
}
#j_hideFormAdd {
width: 22px;
height: 22px;
cursor: pointer;
text-align: center;
line-height: 22px;
font-size: 18px;
}
#j_hideFormAdd:hover {
background-color: skyblue;
}
.form-add {
position: fixed;
top: 30%;
left: 50%;
margin-left: -197px;
padding-bottom: 20px;
background: #fff;
display: none;
}
.form-add-title {
background-color: #f7f7f7;
border-width: 1px 1px 0 1px;
border-bottom: 0;
margin-bottom: 15px;
position: relative;
}
.form-add-title span {
width: auto;
height: 18px;
font-size: 16px;
font-family: 宋体;
font-weight: bold;
color: rgb(102, 102, 102);
text-indent: 12px;
padding: 8px 0px 10px;
margin-right: 10px;
display: block;
overflow: hidden;
text-align: left;
}
.form-add-title div {
width: 16px;
height: 20px;
position: absolute;
right: 10px;
top: 6px;
font-size: 30px;
line-height: 16px;
cursor: pointer;
}
.form-submit {
text-align: center;
}
.form-submit input {
width: 170px;
height: 32px;
}
</style>
</head>
<body>
<!--按钮和表单-->
<div class="wrap">
<div>
<input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
</div>
<table>
<thead>
<tr>
<th>课程名称</th>
<th>所属学院</th>
<th>操作</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>JavaScript</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascript:;" class="get">delete</a></td>
</tr>
<tr>
<td>css</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascript:;" class="get">delete</a></td>
</tr>
<tr>
<td>html</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascript:;" class="get">delete</a></td>
</tr>
<tr>
<td>jQuery</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascript:;" class="get">delete</a></td>
</tr>
</tbody>
</table>
</div>
<!--遮罩层-->
<div id="j_mask" class="mask"></div>
<!--添加数据的表单-->
<div id="j_formAdd" class="form-add">
<div class="form-add-title">
<span>添加数据</span>
<div id="j_hideFormAdd">×</div>
</div>
<div class="form-item">
<label class="lb" for="j_txtLesson">课程名称：</label>
<input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
</div>
<div class="form-item">
<label class="lb" for="j_txtBelSch">所属学院：</label>
<input class="txt" type="text" id="j_txtBelSch" value="传智播客-前端与移动开发学院">
</div>
<div class="form-submit">
<input type="button" value="添加" id="j_btnAdd">
</div>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//需求1:点击 添加数据 按钮,显示添加面板和遮罩层.
//需求2:点击添加面板里的关闭按钮,隐藏添加面板和遮罩层.
//需求3:点击添加面板里的添加按钮,会把输入的内容生成一个tr,这个tr添加到tbody中
//需求4:点击delete这些a标签,删除对应的tr.
//需求1:
$('#j_btnAddData').click(function () {
$('#j_formAdd').show();
$('#j_mask').show();
});
//需求2:
$('#j_hideFormAdd').click(function () {
$('#j_formAdd').hide();
$('#j_mask').hide();
});
//需求3:
$('#j_btnAdd').click(function () {
//3.1 获取到用户输入的所属学院和课程名称.
var txtLesson = $('#j_txtLesson').val(); //获取用户输入的课程名称
var txtBelSch = $('#j_txtBelSch').val(); //获取用户输入的所属学院
//3.2 把用户输入的课程名称和所属学院 ,创建出一个tr.
var $trNew =$( '<tr>' +
'<td>'+txtLesson+'</td>'+
'<td>'+txtBelSch+'</td>' +
'<td><a href="javascript:;" class="get">delete</a></td>' +
'</tr>' );
//给新创建的这个$trNew里面的a标签添加一个事件.
$trNew.find('.get').click(function () {
//$(this).parent().parent().remove();
$trNew.remove();
});
//3.3 把新创建的tr标签添加到tbody中.
$('#j_tb').append($trNew);
//3.4 把添加数据面板和遮罩层影藏起来.
$('#j_hideFormAdd').click();
});
//4.需求
$('#j_tb .get').click(function () {
$(this).parent().parent().remove();
});
//页面出现了哈哈二字,说明上面的代码,包括需求4这个注册事件,都已经完成了.
//说明原来的那4个tr已经注册了事件了.
console.log("哈哈");
});
</script>
13. 美女相册(操作属性案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h2>美女画廊</h2>
<ul id="imagegallery">
<li><a href="../image/meinv/1.jpg" title="美女A">
<img src="../image/meinv/1-small.jpg" width="100" alt="美女1" />
</a></li>
<li><a href="../image/meinv/2.jpg" title="美女B">
<img src="../image/meinv/2-small.jpg" width="100" alt="美女2" />
</a></li>
<li><a href="../image/meinv/3.jpg" title="美女C">
<img src="../image/meinv/3-small.jpg" width="100" alt="美女3" />
</a></li>
<li><a href="../image/meinv/4.jpg" title="美女D">
<img src="../image/meinv/4-small.jpg" width="100" alt="美女4" />
</a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="../image/meinv/placeholder.png" alt="" width="450px" />
<p id="des">选择一个图片</p>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//1.需求
//给小图片a标签设置一个单击事件.
//让id为image的img标签修改src属性为当前点击的a标签的href属性的值
//让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.
$('#imagegallery>li>a').click(function () {
//获取当前点击的a标签的href属性的值和title属性的值。
var srcValue = $(this).attr('href');
var contentValue = $(this).attr('title');
//给img标签的src属性赋值，以及给p标签的内容赋值。
$('#image').attr('src',srcValue);
$('#des').text(contentValue);
//阻止a标签的跳转
return false;
});
});
</script>
14. 表格全选反选(prop()方法案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th, td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>课程名称</th>
<th>所属学院</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>JavaScript</td>
<td>前端与移动开发学院</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>css</td>
<td>前端与移动开发学院</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>html</td>
<td>前端与移动开发学院</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>jQuery</td>
<td>前端与移动开发学院</td>
</tr>
</tbody>
</table>
</div>
<div id="one"></div>
</body>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//需求1：上面的多选框选中,下面的多选框们跟着选中,上面的多选框没有选中,下面的多选框们跟着不选中.
$('#j_cbAll').click(function () {
//获取这多选框的checked值。
var checkedValue = $(this).prop('checked');
//console.log(checkedValue);
//让下面的多选框们的checked跟随这个checkedValue
$('#j_tb input').prop('checked',checkedValue);
});
//需求2：下面的多选框们,都有单击事件:
// 如果下面的多选框们都选中了,那么上面的那个多选框跟着选中,如果下面多选框有一个没有选中,那么上面的多选框就不选中.
$('#j_tb input').click(function () {
//判断下面的那四个多选框是否都被选中了。
var numOfAll = $('#j_tb input').length; //获取到下面所有多选框的个数。
var numOfSelect = $('#j_tb input:checked').length; //获取到下面被选中的多选框的个数。
console.log(numOfAll + ":" + numOfSelect);
//判断
// if(numOfAll == numOfSelect){
// //全部被选中。
// $('#j_cbAll').prop('checked',true);
// }else {
// //有的有没选中。
// $('#j_cbAll').prop('checked',false);
// }
//上面这个判断其实可以优化。
$('#j_cbAll').prop('checked',numOfAll === numOfSelect);
});
});
</script>
</html>
15. 固定导航栏(scrollTop与scrollLeft案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.top, .nav {
width: 1423px;
margin: 0 auto;
}
.main {
width: 1000px;
margin: 10px auto;
}
img {
display: block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="top">
<img src="../image/top.png"/>
</div>
<div class="nav">
<img src="../image/nav.png"/>
</div>
<div class="main">
<img src="../image/main.png"/>
</div>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//思路:给页面设置一个滚动事件,时刻监视页面的scrollTop的值,
// 如果这个值大于第一部分的高度,就设置第二部分为固定定位.
// 如果这个值小于第一部分的高度,就设置第二部分的定位还原.
//计算第一部分的高度.
var topHeight = $('.top').height();
//计算第二部分的高度.
var navHeight = $('.nav').height();
//给页面设置一个滚动事件.
$(window).scroll(function () {
//1.获取页面滚出去的距离(被卷曲出去的距离);
var scrollTopValue = $(window).scrollTop();
//2.判断,看scrollTopValue的值是不是大于第一部分的高度.
if(scrollTopValue >= topHeight){
//让第二部分固定定位.
$('.nav').css({
position:'fixed',
top:0,
left:0
});
//设置第三部分的margin-top的值为第二部分的高度.
$('.main').css({
marginTop:navHeight+10
});
}else {
//让第二部分定位还原.
$('.nav').css({
position:'static',
top:0,
left:0
});
//设置第三部分的margin-top的值为原来的值.
$('.main').css({
marginTop:10
});
}
});
});
</script>
</body>
</html>
16. 动态数据添加和删除(使用on委托注册事件)
// html与css、部分js与案例12相同
// 修改需求4
//使用on委托注册的方式来添加删除方法.
//支持动态注册的.
$('#j_tb').on('click','.get', function () {
//jQuery为了使用方便,把this给修改了.
//console.log($(this));
$(this).parent().parent().remove();
});
17. 按键变色(jquery事件对象案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<<style>
.wrap {
width: 400px;
height: 400px;
margin: 100px auto 0;
}
.wrap h1 {
text-align: center;
}
.wrap div {
width: 400px;
height: 300px;
background: pink;
font-size: 30px;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>按键改变颜色</h1>
<div id="bgChange">
keyCode为：
<span id="keyCodeSpan"></span>
</div>
</div>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//获取div
var $div = $('#bgChange');
//获取显示按键的span
var $showCode = $('#keyCodeSpan');
//给页面注册一个键盘按下事件.
$(document).on('keydown', function (e) {
//console.log(e.keyCode); //r 82 g 71 b 66 p 80 y 89
switch (e.keyCode){
case 82:
$div.css('backgroundColor','red');
$showCode.text(82);
break;
case 71:
$div.css('backgroundColor','green');
$showCode.text(71);
break;
case 66:
$div.css('backgroundColor','blue');
$showCode.text(66);
break;
case 80:
$div.css('backgroundColor','purple');
$showCode.text(80);
break;
case 89:
$div.css('backgroundColor','yellow');
$showCode.text(89);
break;
default :
$div.css('backgroundColor','pink');
$showCode.text("查无此键");
break;
}
});
});
</script>
</body>
</html>
18. 五角星评分(jquery事件对象案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: red;
}
.comment li {
float: left;
cursor: pointer;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//prev(); 上一个兄弟;prevAll(); 之前所有的兄弟 ;next(); 下一个兄弟 ;nextAll(); 之后所有的兄弟
//声明两个个变量,分别记录这个实心/空心五角心.
var sx_wjx = '★';
var kx_wjx = '☆';
$('.comment>li').on('mouseenter', function () {
//需求1:
// //当前鼠标移入的li和他之前的兄弟li都显示实心五角心.
// $(this).text(sx_wjx).prevAll().text(sx_wjx);
// //当前鼠标移入的li之后的兄弟li都显示空心五角心.
// $(this).nextAll().text(kx_wjx);
//这样不行.
//$(this).text(sx_wjx).prevAll().text(sx_wjx).nextAll().text(kx_wjx);
//这样又可行, 加了一个end();
$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);
}).on('mouseleave', function () {
//需求2:鼠标离开li,所有的li都变成空心.
$('.comment>li').text(kx_wjx);
//获取刚才点击的那个li.
$('.comment>li[clickCurrent]').text(sx_wjx).prevAll().text(sx_wjx);
}).on('click', function () {
//需求3:点击li,鼠标离开后,刚才点击的那个li和之前的li都变成实心五角心,后面空心五角心.
//给鼠标当前点击的li做一个记号,为什么要做一个记号,是因为鼠标离开的时候,要知道你刚才点击的是哪一个li.
//给当前鼠标点击的这个li添加一个独一无二的属性.
$(this).attr('clickCurrent','current').siblings().removeAttr('clickCurrent');
});
});
</script>
</body>
</html>
类似资料：