jquery的三个作业(2018-10-13)
因为最近明显感觉到学习情况有点不好，所以决定今天开始每次放学后都把作业发到博客上，一方面可以加深印象，一方面也算是水文章了。
第一个作业
表单效验跳转,这个是在输入框中输入admin，然后点击提交可以跳转到指定的一个网页，例如跳转到我的主页
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$(function(){
$("div").hover(function(){
$(this).toggleClass("a");
},function(){
$(this).toggleClass("a");
});
$(".bth").click(function(){
var name = $("input:first").val();
if(name=="admin"){
location.href="https://hsxhn.com";
}
});
$("input:first").keydown(function(event){
if(event.keyCode==13&&$(this).val()=="admin"){
location.href="https://hsxhn.com";
}
});
});
</script>
</head>
<body>
<div style="width: 200px;height: 200px;border: solid;">
请输入姓名：<input type="text" /><br />
<input class="bth" type="button" value="提交" />
</div>
</body>
</html>
第二个作业
插入内容插入符号和效验，点击题目会插入文章。插入文章后点击添加标点会添加标点符号，并且可以进行检查输入的文章是否正确，不正确的段落会将输入框变成红色
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
$("h1").click(function() {
var $p1 = $("<p>鹅鹅鹅</p>");
$(this).after($p1);
var $p2 = $("<p>曲项向天歌</p>");
$(this).next().after($p2);
var $p3 = $("<p>白毛浮绿水</p>");
$(this).next().next().after($p3);
var $p4 = $("<p>红掌拨清波</p>");
$(this).next().next().after($p4);
$("#btn1").show();
$("#btn2").show();
});
$("#btn1").click(function() {
var p1 = $("p:eq(0)").text();
$("p:eq(0)").html(p1 + "<span style='color: red'>，</span>");
var p2 = $("p:eq(1)").text();
$("p:eq(1)").html(p2 + "<span style='color: red'>。</span>");
var p3 = $("p:eq(2)").text();
$("p:eq(2)").html(p3 + "<span style='color: red'>，</span>");
var p4 = $("p:eq(3)").text();
$("p:eq(3)").html(p4 + "<span style='color: red'>。</span>");
});
$("#btn2").click(function() {
var $input = $("<input class='content' type='text'><br>");
$("p").replaceWith($input);
var $checkmx = $('<input id="bth3" type="button" value="检查默写" />');
$checkmx.bind("click",function() {
var inp1 = $(".content")[0].value;
if(inp1 != "鹅鹅鹅") {
$(".content")[0].style.border = "1px solid red";
}
var inp2 = $(".content")[1].value;
if(inp2 != "曲项向天歌") {
$(".content")[1].style.border = "1px solid red";
}
var inp3 = $(".content")[2].value;
if(inp3 != "白毛浮绿水") {
$(".content")[2].style.border = "1px solid red";
}
var inp4 = $(".content")[3].value;
if(inp4 != "红掌拨清波") {
$(".content")[3].style.border = "1px solid red";
}
});
$(this).replaceWith($checkmx);
});
});
</script>
<body>
<h1>咏鹅</h1>
<input id="btn1" style="display: none;" type="button" value="添加标点" />
<input id="btn2" style="display: none;" type="button" value="开启默写" />
</body>
</html>第三个作业
这个主要是使用toggle事件的多次点击改变背景的颜色，还有缓慢打开的动画效果
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
$(function() {
$("h1").mouseover(function() {
$(this).css("color", "red");
$("div").fadeIn(2000);
});
$("#reger").click(function() {
$("form").slideDown(2000);
});
$("input:last").toggle(function() {
$("form").removeClass("b c");
$("form").addClass("a");
}, function() {
$("form").removeClass("a c");
$("form").addClass("b");
}, function() {
$("form").removeClass("a b");
$("form").addClass("c");
});
});
</script>
</head>
<body>
<h1>欢迎来到XXXX</h1>
<div style="display: none;">
<h4>注册后才能浏览</h4>
<input id="reger" type="button" value="注册" />
</div>
<form style="display: none;">
<table>
<tr>
<td>姓名</td>
<td><input type="text" /> </td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" /> </td>
</tr>
<tr>
<td><input type="submit" /> </td>
<td><input type="reset" /> </td>
<td><input type="button" value="换背景颜色" /> </td>
</tr>
</table>
</form>
</body>
</html>