1.全选效果
1.1Dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选效果</title>
</head>
<body>
<script>
window.onload=function () {
const all = document.getElementById("all");
const checks = document.getElementsByName("check");
all.onclick = function () {
for (let i = 0; i < checks.length; i++) {
checks[i].checked = all.checked;
}
}
}
</script>
<input type="checkbox" name="all" id="all" onclick="checkAll()"/>
<span id="show">全选</span>
<ul class="list">
<li><input name="check" type="checkbox" /></li>
<li><input name="check" type="checkbox" /></li>
<li><input name="check" type="checkbox" /></li>
<li><input name="check" type="checkbox" /></li>
<li><input name="check" type="checkbox" /></li>
<li><input name="check" type="checkbox" /></li>
<li><input name="check" type="checkbox" /></li>
<li><input name="check" type="checkbox" /></li>
</ul>
</body>
</html>
1.2JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选效果</title>
<script>
$(function() {
$("#all").click(function() {
if ($(this).prop("checked")) {
$("#show").text("反选");
$(".list>li>input").prop("checked", true);
} else {
$("#show").text("全选");
$(".list>li>input").prop("checked", false);
}
})
});
</script>
</head>
<body>
<input type="checkbox" name="all" id="all" />
<span id="show">全选</span>
<ul class="list">
<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>
<li><input type="checkbox" /></li>
</ul>
</body>
</html>
2.在线留言
2.1Dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线留言</title>
<style>
.msg {
height: 500px;
width: 500px;
border: 1px solid red;
}
</style>
<script>
function comment(){
var comment=document.getElementById("comment");
var list=document.getElementsByClassName("list");
var li=document.createElement("li");
li.innerHTML=comment.value;
list.appendChild(li);
comment.val("");
}
</script>
</head>
<body>
<div class="msg">
<ul class="list">
<li>群主大人好,红包拿来</li>
</ul>
</div>
<textarea id="comment" rows="10" cols="40"></textarea><br />
<button onclick="comment()">提交留言</button>
</body>
</html>
2.2JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线留言</title>
<style>
.msg {
height: 500px;
width: 500px;
border: 1px solid red;
}
</style>
<script src="../../js/jquery-3.7.0.js"></script>
<script type="text/javascript">
function comment() {
$(".list").append("<li>"+ $("#comment").val() +"</li>");
$("#comment").val("");
}
</script>
</head>
<body>
<div class="msg">
<ul class="list">
<li>群主大人好,红包拿来</li>
</ul>
</div>
<textarea id="comment" rows="10" cols="40"></textarea><br />
<button onclick="comment()">提交留言</button>
</body>
</html>
3.Tab切换
3.1Dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tab {
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>
<script>
window.onload=function () {
var tab_title = document.querySelector('.tab_title');
var lis = tab_title.querySelectorAll('li');
var contents = document.querySelectorAll('.tab_content');
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i);
lis[i].onclick = function () {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'active';
var index = this.getAttribute('index');
for (var i = 0; i < contents.length; i++) {
contents[i].style.display = 'none';
}
contents[index].style.display = 'block';
}
}
}
</script>
</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>
</body>
</html>
3.2JQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tab {
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>
<script src="../../js/jquery-3.7.0.js" ></script>
<script type="text/javascript">
$(function() {
$(".tab-title>li").click(function() {
var $index = $(this).index()
$(".tab-title>li").eq($index).addClass("active").siblings().removeClass("active");
$(".tab-content").eq($index).show().siblings(".tab-content").hide();
});
});
</script>
</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>
</body>
</html>
4.下拉菜单
4.1Dom
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>下拉菜单</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
background-color: antiquewhite;
padding-left: 10px;
position: relative;
}
.wrap li {
float: left;
width: 100px;
height: 30px;
margin-right: 10px;
position: relative;
}
.wrap a {
color: black;
text-decoration: none;
display: block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: aqua;
}
.wrap li ul {
position: absolute;
display: none;
}
</style>
<script>
var lis=document.getElementsByClassName(".title");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover= function () {
this.children[1].style.display = 'block';
}
lis[i].onmouseout= function () {
this.children[1].style.display = 'none';
}
}
</script>
</head>
<body>
<div class="wrap">
<ul>
<li class="title">
<a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li class="title">
<a href="#">一级菜单2</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li class="title">
<a href="#">一级菜单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>
</body>
</html>
4.2JQuery
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>下拉菜单</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
background-color: antiquewhite;
padding-left: 10px;
position: relative;
}
.wrap li {
float: left;
width: 100px;
height: 30px;
margin-right: 10px;
position: relative;
}
.wrap a {
color: black;
text-decoration: none;
display: block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: aqua;
}
.wrap li ul {
position: absolute;
display: none;
}
</style>
<script src="../../js/jquery-3.7.0.js"></script>
<script>
$(function () {
$(".wrap>ul>li").hover(function() {
$(this).children("ul").stop(true).slideToggle(200);
});
})
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#">一级菜单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="#">一级菜单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="#">一级菜单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>
</body>
</html>
5.回到顶部
5.2JQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style >
.container {
height: 1800px;
width: 100%;
}
.box {
height: 120px;
width: 120px;
border-radius: 10px;
background-color: sienna;
font-size: 25px;
text-align: center;
line-height: 120px;
color: white;
position: fixed;
right: 50px;
bottom: 30px;
cursor: pointer;
display: none;
}
</style>
<script src="../../js/jquery-3.7.0.js"></script>
<script type="text/javascript">
$(function() {
$(window).on("scroll", function() {
if ($(window).scrollTop() > 50) {
$(".box").show()
} else {
$(".box").hide()
}
});
$(".box").click(function() {
$("html,body").animate({"scrollTop": 0}, 300, "swing");
});
});
</script>
</head>
<body>
<div class="container">
</div>
<div class="box">
回到顶部
</div>
</body>
</html>