jquery案例
案例和学习
链接：https://pan.baidu.com/s/1sicBIJbC1gBpS7XK9yB88g
提取码：v476
1：开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开光灯</title>
<style>
</style>
</head>
<body>
<button id="btn1">开灯</button>
<button id="btn2">关灯</button>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
//1.设置关灯事件：将body改为黑色背景
$('#btn1').click(function () {
$('body').css('backgroundColor','black');
});
//1.设置开灯事件：将body改为白色背景
$('#btn2').click(function () {
$('body').css('backgroundColor','white');
});
</script>
2：下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style>
.lis{
display: none;
}
</style>
</head>
<body>
<ul>
<li>
<button >第1个菜单</button>
<ul>
<li class="lis">第1个菜单的第1个子菜单</li>
<li class="lis">第1个菜单的第2个子菜单</li>
</ul>
</li>
<li>
<button >第2个菜单</button>
<ul>
<li class="lis">第2个菜单的第1个子菜单</li>
<li class="lis">第2个菜单的第2个子菜单</li>
</ul>
</li>
</ul>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
//要求：移动到对应的菜单，弹出二级菜单，移出菜单，隐藏二级菜单
//重点：要精确找到对应的元素
//给一级菜单设置移入事件
$('ul>li>button').mouseenter(function () {
//因为我们查找到的button是位于li的一个内元素，要找到父元素li再在里面找到ul下的弹出就行
$(this).parent().children('ul').children('li').css('display','block')
});
//给一级菜单设置移出事件
$('ul>li>button').mouseleave(function () {
//因为我们查找到的button是位于li的一个内元素，要找到父元素li再在里面找到ul下的隐藏就行
$(this).parent().children('ul').children('li').css('display','none')
});
})
</script>
3：突出变色案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>突出变色案例</title>
<style>
.div1{
height: 200px;
width: 200px;
border: 1px solid red;
background-color: honeydew;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
//突出变色案例
//分析1：移入对应的div后,将除自己之外的元素的背景色改为黑色，自己的改为白色.
//分析2：移出对应的div后，除自己之外的元素改为白色.
//1.移入事件
$('body div').mouseenter(function () {
//自己变色为白色
$(this).css('opacity','1');
//同等级元素变为黑色
$(this).siblings('div').css('background-color','black');
});
//2.移除事件
$('body div').mouseleave(function () {
//同等级元素变为白色
$(this).siblings('div').css('background-color','honeydew');
});
})
</script>
4：手风琴案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style>
.div1{
height: 50px;
width: 200px;
border: 1px solid red;
display: none;
}
</style>
</head>
<body>
<ul>
<li>
<span>标题1</span>
<div class="div1">我是第1个弹出div</div>
</li>
<li>
<span>标题2</span>
<div class="div1">我是第2个弹出div</div>
</li>
<li>
<span>标题3</span>
<div class="div1">我是第3个弹出div</div>
</li>
<li>
<span>标题4</span>
<div class="div1">我是第4个弹出div</div>
</li>
</ul>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
//手风琴案例
//要求：点击对应的标题弹出对饮的div，收掉其他的标题的div,重复点击收掉自己的div
//分析1：点击对应的按钮将对应的div显示，隐藏其他的div。
//分析2：判断自己的div是否展开，是就隐藏，不是就展开。
$('ul li ').click(function () {
//判断是否展开，当没有展开的时候展开自己的div，隐藏其他的div
if ($(this).children('div').css('display') == 'none'){
$(this).children('div').show().parent().siblings('li').children('div').hide();
}
//当展开后隐藏自己的div
else {
$(this).children('div').hide();
}
});
})
</script>
5：淘宝精选案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝精选案例</title>
<style>
.div-main{
height: 302px;
width: 606px;
border: 1px solid black;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.div-left{
height: 300px;
width: 200px;
float: left;
border: 1px solid black;
}
.dis{
display: none;
}
</style>
</head>
<body>
<div class="div-main">
<div class="div-left" id="left">
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
</ul>
</div>
<div class="div-left" id="center">
<ul>
<li class="dis">图片1</li>
<li class="dis">图片2</li>
<li class="dis">图片3</li>
<li class="dis">图片4</li>
<li class="dis">图片5</li>
<li class="dis">图片6</li>
<li class="dis">图片7</li>
<li class="dis">图片8</li>
<li class="dis">图片9</li>
<li class="dis">图片10</li>
</ul>
</div>
<div class="div-left" id="right">
<ul>
<li>标题6</li>
<li>标题7</li>
<li>标题8</li>
<li>标题9</li>
<li>标题10</li>
</ul>
</div>
</div>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function (){
//淘宝精品案例
//需求:点击对应的li,中间显示对应的图片
//分析1：点击要分别设置移入左边和右边的li事件
//分析2：清楚的知道点击位于父元素ul中的第几个li子元素。
//分析3:右边的li元素个数要加上做右边的li元素总数。
//1.左边移入事件
$('#left ul>li').mouseenter(function (){
//index()获取对应的索引,就是位于其中的第几个元素
var s=$(this).index();
//将中间对饮的图片显示，其他的图片隐藏
$('#center ul>li').eq(s).show().siblings().hide();
});
//2.右边移入事件
$('#right ul>li').mouseenter(function (){
//index()获取对应的索引,就是位于其中的第几个元素
var s=$(this).index();
//获取左边所有的li元素个数
var z=$('#left ul>li').length;
//将中间对饮的图片显示，其他的图片隐藏
$('#center ul>li').eq(s+z).show().siblings().hide();
});
});
</script>
6：tab切换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style>
.center{
height: 200px;
width: 600px;
border: 1px solid black;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.title{
height: 30px;
width: 600px;
border-bottom: 1px solid black;
}
.neiron{
height: 169px;
width: 600px;
}
.none{
display: none;
}
.block{
display: block;
}
</style>
</head>
<body>
<div class="center">
<div class="title">
<button>标题1</button>
<button>标题2</button>
<button>标题3</button>
</div>
<div class="neiron">
<span class="block">标题1的内容</span>
<span class="none">标题2的内容</span>
<span class="none">标题3的内容</span>
</div>
</div>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
//tab切换
//要求：当鼠标移入对应的按钮时，显示对应的内容
//设置鼠标移入
$('.title>button').mouseenter(function (){
//查找到对应的移入
var s=$(this).index();
//根据查找到的显示对应的内容，将兄弟隐藏。
//分析：将自己的display的none属性删除，添加block。将兄弟的block属性删除，添加none属性
$('.neiron>span').eq(s).removeClass('none').addClass('block').siblings().removeClass('block').addClass('none');
});
})
</script>
6：开机动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开机动画</title>
<style>
.div{
height: 300px;
width: 200px;
position: absolute;
right: 0px;
bottom: 0px;
overflow: hidden;
}
.button{
height: 20px;
width: 60px;
position: absolute;
right: 0px;
cursor:pointer;
}
.div1{
height: 150px;
width: 200px;
}
</style>
</head>
<body>
<div class="div">
<button class="button">关闭</button>
<div class="div1" id="div1">图片1</div>
<div class="div1" id="div2">图片2</div>
</div>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function (){
//要求:点击对应的关闭按钮,实现图片2向下隐藏，，隐藏完毕后图片1向右隐藏。
//要点1：css设计的时候要采用绝对定位，按钮采用定位,div内容要完全隐藏overflow: hidden;
//要点2：先要等图片2完毕后在做图片1。
//要点3：图片2要向下隐藏,div的height要减去图片2的div.图片1向右隐藏，div的width变为0.
$('.button').click(function () {
$('.div').animate({
height:150
},1500,function (){
$('.div').animate({
width:0
},2000);
})
});
});
</script>
7：动画下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画下拉菜单</title>
<style>
.lis{
display: none;
}
</style>
</head>
<body>
<ul>
<li>
<button >第1个菜单</button>
<ul>
<li class="lis">第1个菜单的第1个子菜单</li>
<li class="lis">第1个菜单的第2个子菜单</li>
</ul>
</li>
<li>
<button >第2个菜单</button>
<ul>
<li class="lis">第2个菜单的第1个子菜单</li>
<li class="lis">第2个菜单的第2个子菜单</li>
</ul>
</li>
</ul>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
//要求：移动到对应的菜单，弹出二级菜单，移出菜单，隐藏二级菜单
//重点：要精确找到对应的元素
//给一级菜单设置移入事件
$('ul>li>button').mouseenter(function () {
console.log($(this).parent().children('ul').children('li').slideDown(500));
});
//给一级菜单设置移出事件
$('ul>li>button').mouseleave(function () {
console.log($(this).parent().children('ul').children('li').slideUp(500));
});
})
</script>
8：动画下拉菜单2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画下拉菜单2</title>
<style>
.lis{
display: none;
}
</style>
</head>
<body>
<ul>
<li>
<button >第1个菜单</button>
<ul>
<li class="lis">第1个菜单的第1个子菜单</li>
<li class="lis">第1个菜单的第2个子菜单</li>
</ul>
</li>
<li>
<button >第2个菜单</button>
<ul>
<li class="lis">第2个菜单的第1个子菜单</li>
<li class="lis">第2个菜单的第2个子菜单</li>
</ul>
</li>
</ul>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
//要求：移动到对应的菜单，弹出二级菜单，移出菜单，隐藏二级菜单
//重点：要精确找到对应的元素
//给一级菜单设置移入事件
$('ul>li>button').mouseenter(function () {
$(this).parent().children('ul').children('li').stop();
console.log($(this).parent().children('ul').children('li').slideDown(1000));
});
//给一级菜单设置移出事件
$('ul>li>button').mouseleave(function ( ){
$(this).parent().children('ul').children('li').stop();
console.log($(this).parent().children('ul').children('li').slideUp(1000));
});
})
</script>
9:固定导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定导航1栏</title>
<style>
.div1{
height: 200px;
margin: auto;
}
.div2{
height: 100px;
margin: auto;
}
.div3{
height: 800px;
margin: auto;
}
.div2-pos{
position: fixed;
left: 0px;
top: 0px;
margin: auto;
}
</style>
</head>
<body>
<div class="div1">内容1</div>
<div class="div2">导航栏</div>
<div class="div3">内容2</div>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
//案例：导航栏固定
//需求:页面滚动后，导航栏不边
//分析：页面滚动出导航栏后给导航栏设置绝对定位。当滚回来后取消绝对定位。
//获取内容一的高度
var div1Top=$('.div1').height();
$(window).scroll(function () {
//获取页面滚动高度
var winTop=$(this).scrollTop();
//当内容1滚动出去后，隐藏内容1，给导航栏设置绝对定位，给内容3设置外边距高度
if (winTop>=div1Top){
$('.div1').hide();
$('.div2').addClass('div2-pos');
//设置第3部分的内容外边距高度为导航栏的高度
//ie浏览器不支持
$('.div3').css({
marginTop:$('.div2').height()
});
}
else{
$('.div1').show();
$('.div2').removeClass('div2-pos');
$('.div3').css('margin-top',0);
}
});
});
</script>
10.图片放大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img{
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<img src="img/img.png" class="img">
<img src="img/img_1.png" class="img">
<img src="img/img_2.png" class="img">
<div style="width: 400px;height: 400px;border: 1px solid black">
<img style="width: 400px;height: 400px;">
</div>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
//案例：图片放大
//需求：点击对应的图片，将图片在对应区域放大
//设置图片点击
$('.img').click(function (){
//获取图片的src地址
var src=$(this).attr('src');
//将地址属性添加到对应的区域
$('div>img').attr('src', src);
});
});
</script>
11.城市选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市选择</title>
<style>
div{
height: 400px;
width: 200px;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<div id="div1">
<select id="sel1" multiple>
<option>城市1</option>
<option>城市2</option>
<option>城市3</option>
<option>城市4</option>
<option>城市5</option>
</select>
</div>
<div id="div2">
<button id="btn1" >>></button>
<button id="btn2">></button>
<button id="btn3"><<</button>
<button id="btn4"><</button>
</div>
<div id="div3">
<select id="sel2" multiple></select>
</div>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
//案例：城市选择
//需求：将选中的城市从左边剪切到右边或右边剪切到左边，或全部转移。
//1.将所有的左边对象剪切到右边
$('#btn1').click(function () {
$('#div1>select>option').appendTo($('#sel2'));
});
//2.把左边的选中的选项转到右边
$('#btn2').click(function () {
$('#div1>select>option:selected').appendTo($('#sel2'));
});
//3.将所有右边的对象剪切到左边
$('#btn3').click(function () {
$('#div3>select>option').appendTo($('#sel1'));
});
//4.把右边的选中的选项转到左边
$('#btn4').click(function () {
$('#div3>select>option:selected').appendTo($('#sel1'));
});
})
</script>
12.添加内容，生成删除，生成表格，生成删除on方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生成表格</title>
<style>
.add{
width: 200px;
height: 200px;
display: none;
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
top: 0px;
margin: auto;
}
.add-zhe{
width: 100%;
height: 100%;
display: none;
opacity: 0.7;
background-color: floralwhite;
position: fixed;
left: 0px;
bottom: 0px;
right: 0px;
top: 0px;
margin: auto;
}
</style>
</head>
<body>
<button id="empty">清空</button><button id="add">添加</button>
<table style="border: 1px solid black">
<tr><th>标题</th><th>内容</th><th>操作</th></tr>
</table>
<div class="add-zhe"></div>
<form class="add">
<p>添加数据</p>
<input type="text" id="add-title" value="标题">
<input type="text" id="add-text" value="内容">
<input type="button" id="add-to" value="添加">
<input type="button" id="add-fa" value="返回">
</form>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
//案例：生成表格
//需求：使用数据生成一个表格，
//分析：将数据进行拼接后使用sppend()添加到表格里
//数据
var date=[{
'title':'标题1',
'text':'内容1'
},{
'title':'标题2',
'text':'内容2'
},{
'title':'标题3',
'text':'内容3'
}];
//将数据拼接
var tx=[];
for (var i=0;i<date.length;i++){
tx.push('<tr>');
for (var key in date[i]){
tx.push('<td>');
tx.push(date[i][key]);
tx.push('</td>');
}
tx.push('<td><button id="delete" >删除</button></td>');
tx.push('</tr>');
}
//数据显示
$('table').append(tx.join(''));
//案例:删除表格
//需求1：点击清空，清空表格内容
//需求2：点击删除，删除对应的内容
//1.清空事件。找到table中的所有的td清空
$('#empty').click(function () {
$('table tr td').empty();
});
//2.删除事件，找到父元素td，找到父元素tr,remove。
$('table #delete').click(function () {
$(this).parent().parent().remove();
});
//案例：添加内容
//1.显示遮盖层和添加表单
$('#add').click(function () {
$('.add').show();
$('.add-zhe').show();
});
//2.给添加表单设置返回
$('#add-fa').click(function () {
$('.add-zhe').hide();
$('.add').hide();
});
//3.给添加表单设置添加事件
//难点：创建的内容中无事件，是因为加载时已经将对应的事件创建完毕，需要自己再次创建事件
$('#add-to').click(function () {
//获取添加表单的值
var ti=$('#add-title').val();
var tx=$('#add-text').val();
//整理并添加到表
var addtext=[];
addtext.push('<tr><td>'+ti+'</td><td>'+tx+'</td><td><button id="delete" >删除</button></td></tr>');
$('table').append(addtext);
//事件添加
$('table #delete').click(function () {
$(this).parent().parent().remove();
});
//将遮盖层以及添加表单隐藏
$('.add-zhe').hide();
$('.add').hide();
});
});
</script>
13.表格全选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生成表格</title>
</head>
<body>
<table style="border: 1px solid black">
<tr><th><input 0 type="checkbox"></th><th>标题</th><th>内容</th></tr>
</table>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
//案例：生成表格
//需求：使用数据生成一个表格，
//分析：将数据进行拼接后使用sppend()添加到表格里
//数据
var date=[{
'title':'标题1',
'text':'内容1'
},{
'title':'标题2',
'text':'内容2'
},{
'title':'标题3',
'text':'内容3'
}];
//将数据拼接
var tx=[];
for (var i=0;i<date.length;i++){
tx.push('<tr>');
tx.push('<td><input type="checkbox"></td>>');
for (var key in date[i]){
tx.push('<td>');
tx.push(date[i][key]);
tx.push('</td>')
}
tx.push('</tr>');
}
//数据显示
console.log(tx.join(''));
$('table').append(tx.join(''));
//案例：表格选择
//需求1：点击标题中的框实现全选或全取消
//需求2：如果所有的多选点击，全选框则改为全选
//特殊：多选框无法使用attr，应使用prop。
$('th>input').click(function (){
//获取全选的是否否选中
var p=$(this).prop('checked');
//将所属的属性改为选择的属性
$('td>input').prop('checked',p);
});
//获取所有的多选框以及多少多选框选中
$('td>input').click(function () {
var all=$('td>input').length;
var num=$('td>input:checked').length;
//如果选中的所有的多选框则全选框选中
$('th>input').prop('checked',num==all);
});
});
</script>
14.键盘变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生成表格</title>
</head>
<body>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
//键盘变色
//需求：点击对饮的键盘实现变色
//q:white w：blue e:black r:red;
//分析 q=81 w=87 e=69 r=82
$(document).on('keydown',function (e) {
alert(e.keyCode);
switch (e.keyCode){
case 81:$('body').css('background-color','white');break;
case 87:$('body').css('background-color','blue');break;
case 69:$('body').css('background-color','black');break;
case 82:$('body').css('background-color','red');break;
}
});
});
</script>
扫一扫
11-16
437
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
