本文主要是介绍前端三剑客 —— JavaScript （第十节），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
内容回顾：
jQuery 动画
jQuery 操作DOM
jQuery 事件处理
Ajax
jQuery 特效案例
全选效果
tab切换
下拉菜单
自定义动画
内容回顾：
jQuery 动画
jQuery 官网地址：http://www.jquery.com
系统动画
自定义动画
要实现自定义动画，我们需要使用animate
常见API操作
jQuery 动画
jQuery 操作DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery操作DOM</title>
</head>
<body>
<ul class="list">
<li>这个是列表1</li>
<li>这个是列表2</li>
<li>这个是列表3</li>
<li class="active">这个是列表4</li>
<li class="show">这个是列表5</li>
<li>这个是列表6</li>
<li>这个是列表7</li>
<li>这个是列表8</li>
<li>这个是列表9</li>
<li>这个是列表10</li>
</ul>
<div class="msg"></div>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(function () {
// 一：添加子节点
// 1. 给 ul 最后添加一个 li
$('.list').append('<li>这个是列表11</li>')
// 2. 给 ul 开头添加一个 li
$('.list').prepend('<li>这个是列表0</li>')
// 还要可以使用 appendTo 或者 prependTo
// 3. 使用 appendTo 将匹配的元素插入到目标元素的最后面
// appendTo 的使用方式：$('要添加的内容').appendTo('父组元素')
$('<li>这个是列表12</li>').appendTo('.list')
// 4. 使用 prependTo 将所有元素插入到目标前面
// prependTo 使用语法：$('要添加的内容').prependTo('父组元素')
$('<li>这个是列表-1</li>').prependTo('.list')
// ----------添加兄弟节点-----------------
// 5. 在 .active 的前面添加一个 li
// before( content [, content ] ) :根据参数设定，在匹配元素的前面插入内容
$('.active').before('<li>添加的兄弟节点前</li>')
$('.active').css('color', 'red')
$('.show').css('color', 'blue')
// 6. 在 .active 的后面添加一个 li
// after( content [, content ] ) :在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
$('.active').after('<li>添加的兄弟节点后</li>')
// 7. 还可以使用 insertBefore( target ) :在目标元素前面插入集合中每个匹配的元素
$('.active').insertBefore('.show')
//-------------父节点操作----------------
// 8. 给 ul 添加父给节点 div
$('ul').wrap('<div class="container"></div>')
// 9. 删除 ul 的父级元素 div
$('ul').unwrap('div')
// 删除 active 节点
$('.active').remove()
// 复制 .show 对应的li到 msg
$('.msg').append($('.show').clone())
})
</script>
</body>
</html>
jQuery 事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件处理</title>
</head>
<body>
<button id="btn">内容</button>
<script src="js/jquery-3.7.1.min.js"></script>
<input type="text" name="name">
<script>
$(function () {
// 1. 点击事件
/*$('#btn').click(function () {
console.log($(this).html())
})*/
// 2. 监听事件，使用 on
/*$('#btn').on('click', function () {
console.log($(this).html())
})*/
$('#btn').on('click', 'body', function () {
console.log('body 触发了 click 事件')
})
$('body').click(function () {
console.log('body')
})
$('input[type]').blur(function () {
console.log('你离开了文本框')
})
$('input[type]').focus(function () {
console.log('你点击了文本框')
})
})
</script>
</body>
</html>
Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery对ajax操作</title>
</head>
<body>
<button id="btn">点击加载</button>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(function () {
$('#btn').on('click', function () {
// https://autumnfish.cn/api/joke/list?num=5
$.ajax({
url: 'https://autumnfish.cn/api/joke/list',
method: 'get',
data: {num: 5},
timeout: 5000, // 超时时间
dateType: 'json', // 服务端返回 json 格式数据
success: function (data) {
console.log(data)
},
error: function (er) {
console.log(er)
},
beforeSend: function () {
console.log('数据加载中')
}
})
})
})
</script>
</body>
</html>
jQuery 特效案例
全选效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery特效-全选效果</title>
<style>
ul {
list-style: none;
}
</style>
</head>
<body>
<input type="checkbox" id="all"> <span id="choice">全选</span><br>
<ul>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
</ul>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(function () {
$('#all').click(function () {
if ($(this).prop('checked')) {
$('#choice').text('取消') // 修改文件
$('li>input').prop('checked', true)
} else {
$('#choice').text('全选')
$('li>input').prop('checked', false)
}
})
})
</script>
</body>
</html>
tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tab {
margin: 30px auto 0;
width: 500px;
height: 300px;
border-radius: 10px;
border: 1px solid gainsboro;
}
.tab>.tab-title {
width: 500px;
height: 40px;
}
.tab>ul.tab-title>li {
width: 165px;
height: 40px;
float: left;
line-height: 40px;
text-align: center;
border-left: 1px solid gainsboro;
border-bottom: 1px solid gainsboro;
cursor: pointer;
}
.tab>ul.tab-title>li:last-child {
width: 167px;
}
.tab>.tab-content {
width: 480px;
height: 240px;
display: none;
font-size: 18px;
padding: 10px;
}
.active {
background: salmon;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab-title">
<li class="active">标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<ul class="tab-content" style="display: block;">
<li>这个是内容1</li>
</ul>
<ul class="tab-content">
<li>这个是内容2</li>
</ul>
<ul class="tab-content">
<li>这个是内容3</li>
</ul>
</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(function () {
// 1. 获取所有的标题
$('.tab-title>li').on('click', function () {
//console.log($(this).index());
// 2. 获取所点击的tab的下标，通过 index() 方法获取
let index = $(this).index()
// 3. 当点击的title与index相等时，则添加 active 样式，而其他的兄弟节点删除这个样式
$('.tab-title>li') // 获取到所有的选项卡
.eq(index) // 判断点击的选项卡是否与当前的下标一致
.addClass('active') // 如果一致则添加 active 样式
.siblings() // 获取当前点击的选项卡的所有兄弟节点
.removeClass('active') // 删除兄弟节点的 active 样式
$('.tab-content') // 获取所有的内容区
.eq(index) // 判断内容的下标是否与点击选项卡的下标一致
.show(100) // 显示当前下标对应的内容
.siblings('.tab-content') // 获取所有带tab-content样式的兄弟节点
.hide(100) // 把这些兄弟节点隐藏起来
})
})
</script>
</body>
</html>
下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery特效-下拉菜单</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
background: #243A64;
padding-left: 10px;
position: relative;
}
.wrap li {
float: left;
width: 100px;
height: 30px;
margin-right: 10px;
position: relative;
}
.wrap a {
color: white;
text-decoration: none;
display: block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
background: #317FE5;
}
.wrap li ul {
position: absolute;
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#" class="level1">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">一级菜单2</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">一级菜单3</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(function () {
$('.wrap>ul>li').hover(function () {
$(this).children('ul').stop(true).slideToggle(200)
})
})
</script>
</body>
</html>
自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery特效-自定义动画</title>
<style>
#show {
height: 200px;
width: 300px;
border: 1px solid red;
background: slateblue;
}
.show {
height: 200px;
width: 300px;
border: 1px solid red;
background: saddlebrown;
position: absolute;
left: 0px;
top: 0px;
}
.showImg, .showImg > img {
width: 200px;
height: 350px;
border: 4px solid floralwhite;
border-radius: 20px;
position: relative;
}
.showImg > img {
position: absolute;
left: 0;
top: 0;
}
.showImg > img:last-child {
opacity: 0;
left: 100px;
width: 0;
}
</style>
</head>
<body>
<div class="showImg">
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(function () {
$('.showImg').mouseenter(function () {
$('.showImg>img:first').animate({
"position": 'absolute',
'left': '50%',
'width': 0,
'opacity': 0
}, 2000, function () {
$('.showImg>img:first').hide()
$('.showImg>img:last').animate({
'left': 0,
'width': '100%',
'opacity': 1
}, 2000)
})
})
})
</script>
</body>
</html>
这篇关于前端三剑客 —— JavaScript （第十节）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
