本文章根据菜鸟教程官网编写:有利于小白上手体验。
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<style>
/*js引用css时,css得写为内嵌样式*/
.cssButton16-div {
font-weight: bold;
color: pink;
}
</style>
</head>
<body>
<button class="button1">隐藏</button>
<button class="button2">显示</button>
<button class="button3">显示/隐藏</button>
<div class="div-p">
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
<p class="p4">4</p>
<p class="p5">5</p>
<p class="p5">6</p>
<div id="test1">
<p>
test1_P
</p>
</div>
<div class="test2">
<p>
test2_P
</p>
</div>
</div>
<input type="text">
<br><br>
<button class="button4">淡入</button>
<button class="button5">淡出</button>
<button class="button6">淡入/淡出</button>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
<div id="flip1">点我拉起面板</div>
<div id="panel1">Hello world!</div>
<div id="flip2">点我拉起/滑下面板</div>
<div id="panel2">Hello world!</div>
<button class="button7">点我左滑动</button>
<div class="button7-div"></div>
<button class="button8">点我滑动放大</button>
<div class="button8-div"></div>
<button class="button9">每点一次相对滑动放大一次</button>
<div class="button9-div"></div>
<br><br><br>
<button class="button10">滑动收放模块</button>
<div class="button10-div"></div>
<button class="button11">同时操作多个元素缩放</button>
<div class="button11-div"></div>
<button class="button12">操作多个元素</button>
<div class="button12-div">1</div>
<br><br><br>
<button id="start">开始</button>
<button id="stop">暂停</button>
<button id="stop2">停止</button>
<button id="stop3">暂停动画,但完成动作</button>
<div class="button-stop">暂停动画</div>
<br><br><br><br>
<p id="test2">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<p><a id="runoob" href="www.baidu.com">名称链接: </a><input type="text" id="test3" value="请输入您的用户名"></p>
<button class="button13">显示修改 href 和 title</button>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn3">尾部添加列表项</button>
<button id="btn4">头部添加列表项</button>
<br>
<p class="charuText">前后插入文本域</p>
<br>
<button id="btn5">之前插入</button>
<button id="btn6">之后插入</button>
<p>这是一个段落。</p>
<p class="italic">
<i>
这是另外一个段落。
</i>
</p>
<button class="button14">
移除所有 class="italic" 的元素。
</button>
<br><br>
<div class="button15-div">
清空div元素清空div元素清空div元素
</div>
<br>
<button class="button15">
清空div元素
</button>
<br><br>
<div id="button16-div">
这是一些重要的文本! 为元素添加 class
</div>
<br>
<button id="button16">
为元素添加 css
</button>
</body>
</html>
- index.css
.div-p {
display: flex;
margin-left: 1rem;
}
.div-p p {
margin-left: 1rem
}
#test1, #test2 {
margin-left: 1rem
}
#panel, #flip, #panel1, #flip1, #panel2, #flip2 {
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
border-radius: 0.3rem;
margin-top: 0.1rem;
}
#panel, #panel2 {
padding: 1rem;
display: none;
}
#panel1 {
padding: 1rem;
}
.button7-div,
.button8-div,
.button9-div,
.button10-div,
.button11-div,
.button12-div {
width: 2rem;
height: 2rem;
background-color: pink;
position: absolute;
}
.button8-div, .button11-div {
margin-left: 7rem;
}
.button9-div, .button12-div {
margin-left: 16rem;
}
.button-stop {
background: pink;
height: 4rem;
width: 4rem;
position: absolute;
}
3.index.js
$(function () {
/**
*功能描述: 鼠标点击隐藏元素和显示元素
*@author ZYH
*@since 2021/7/1 17:04
*/
$(".button1").click(function () {
//p标签元素消失
// $("p").hide();
// $("#test1").hide();
$("p").hide();
// 选取元素后点击次元素后消
// $(this).hide();
// 显示元素
// $(".p3").show();
});
$(".button2").click(function () {
$("p").show();
});
$(".button3").click(function () {
$("p").toggle();
});
/**
*功能描述: 鼠标
*@author ZYH
*@since 2021/7/1 16:48
*/
$(".p1").mouseenter(function () {
alert('鼠标移动');
});
/**
*功能描述: 鼠标悬停
*@author ZYH
*@since 2021/7/1 16:49
*/
$(".p2").hover(
function () {
alert("你进入了 p1!");
},
function () {
alert("拜拜! 现在你离开了 p1!");
}
);
/**
*功能描述: 鼠标离开
*@author ZYH
*@since 2021/7/1 16:48
*/
$(".p3").mouseleave(function () {
alert('鼠标离开');
});
/**
*功能描述: 鼠标获取焦点
*@author ZYH
*@since 2021/7/1 16:49
*/
$("input").focus(function () {
$(this).css("background-color", "#cccccc");
});
/**
*功能描述:鼠标失去焦点
*@author ZYH
*@since 2021/7/1 16:50
*/
$("input").blur(function () {
$(this).css("background-color", "#ffffff");
});
/**
*功能描述: 点击按钮淡入
*@author ZYH
*@since 2021/7/1 17:54
*/
$(".button4").click(function () {
$(".p4").fadeIn();
$(".p5").fadeIn("slow");
$(".p6").fadeIn(3000);
});
/**
*功能描述:鼠标按钮淡出
*@author ZYH
*@since 2021/7/1 17:58
*/
$(".button5").click(function () {
$(".p1").fadeOut();
$(".p2").fadeOut("slow");
$(".p3").fadeOut(3000);
});
/**
*功能描述: 鼠标点击淡入淡出
*@author ZYH
*@since 2021/7/1 18:00
*/
$(".button6").click(function () {
$(".p1").fadeToggle();
$(".p2").fadeToggle("slow");
$(".p3").fadeToggle(3000);
});
/**
*功能描述:滑出模块
*@author ZYH
*@since 2021/7/2 8:51
*/
$("#flip").click(function () {
$("#panel").slideDown("slow");
});
/**
*功能描述: 滑入模块
*@author ZYH
*@since 2021/7/2 8:53
*/
$("#flip1").click(function () {
$("#panel1").slideUp("slow");
});
/**
*功能描述: 滑入滑出
*@author ZYH
*@since 2021/7/2 8:53
*/
$("#flip2").click(function () {
$("#panel2").slideToggle("slow");
});
/**
*功能描述: 点击按钮左滑
*@author ZYH
*@since 2021/7/2 9:16
*/
$(".button7").click(function () {
$(".button7-div").animate({
left: "2rem"
});
});
/**
*功能描述:鼠标点击滑动放大
*@author ZYH
*@since 2021/7/2 9:21
*/
$(".button8").click(function () {
$(".button8-div").animate({
left: '3rem',
//淡化颜色的百分比
opacity: '0.5',
height: '3rem',
width: '3rem'
});
});
/**
*功能描述:
*@author ZYH
*@since 2021/7/2 9:51
*/
$(".button9").click(function () {
$(".button9-div").animate({
left: '1rem',
height: '+=1rem',
width: '+=1rem'
});
});
/**
*功能描述: 滑动收放模块
*@author ZYH
*@since 2021/7/2 9:54
*/
$(".button10").click(function () {
$(".button10-div").animate({
height: 'toggle'
});
});
/**
*功能描述: 同时操作多个元素
*@author ZYH
*@since 2021/7/2 9:59
*/
$(".button11").click(function () {
var div = $(".button11-div");
//拉长
div.animate({
height: '3rem', opacity: '0.4'
}, "slow");
//变宽
div.animate({
width: '3rem', opacity: '0.8'
}, "slow");
//变矮
div.animate({
height: '1rem', opacity: '0.4'
}, "slow");
//变窄
div.animate({
width: '1rem', opacity: '0.8'
}, "slow");
});
$(".button12").click(function () {
var button12_div = $(".button12-div")
button12_div.animate({
width: '3rem', height: '3rem'
}, "slow")
button12_div.animate({
fontSize: "2rem"
}, "slow");
});
/**
*功能描述:
*@author ZYH
*@since 2021/7/2 10:31
*/
$("#start").click(function () {
$(".button-stop").animate({left: '5rem'}, 5000).css("color", "red");
$(".button-stop").animate({fontSize: '4em'}, 5000);
});
$("#stop").click(function () {
$(".button-stop").stop();
});
$("#stop2").click(function () {
$(".button-stop").stop(true);
});
$("#stop3").click(function () {
$(".button-stop").stop(true, true);
});
/**
*功能描述: 点击按钮显示设置DOM对象
*@author ZYH
*@since 2021/7/2 11:09
*/
$("#btn1").click(function () {
alert("Text: " + $("#test2").text("text"));
});
$("#btn2").click(function () {
alert("HTML: " + $("#test2").html("html"));
});
/**
*功能描述:显示设置DOM对象的值
*@author ZYH
*@since 2021/7/2 11:12
*/
$(".button13").click(function () {
alert("您输入的内容: " + $("#test3").val("val"));
$("#runoob").attr({
"href": "http://www.runoob.com/jquery",
"title": "jQuery 教程"
});
// 通过修改的 title 值来修改链接名称
title = $("#runoob").attr('title');
$("#runoob").html(title);
});
/**
*功能描述:尾部添加元素
*@author ZYH
*@since 2021/7/2 11:15
*/
$("#btn3").click(function () {
$("ol").append("<li>追加列表项</li>");
});
$("#btn5").click(function () {
$(".charuText").before("<b>之前</b>");
});
/**
*功能描述: 头部添加元素
*@author ZYH
*@since 2021/7/2 11:35
*/
$("#btn4").click(function () {
$("ol").prepend("<li>在开头添加列表项</li>");
});
$("#btn6").click(function () {
$(".charuText").after("<i>之后</i>");
});
/**
*功能描述: 删除元素
*@author ZYH
*@since 2021/7/2 11:33
*/
$(".button14").click(function () {
$(".italic").remove();
});
$(".button15").click(function () {
$(".button15-div").empty();
});
/**
*功能描述:为选中的元素添加css
*@author ZYH
*@since 2021/7/2 11:55
*
*addClass为添加样式
*removeClass为删除样式
* toggleClass为互相切换样式
*/
$("#button16").click(function () {
$("#button16-div").addClass("cssButton16-div");
});
});