jQuery 练习 dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
border-bottom: 1px solid coral;
padding-bottom: 10px;
}
.input_light {
background-color: yellow;
}
.li_bg {
background-color: red;
}
table,
tr,
td {
border: 1px solid;
}
</style>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function() {
//控件的高亮显示
$("div:first input").focus(function() {
$(this).addClass("input_light").siblings().removeClass("input_light");
});
//球队选择
$("div:eq(1) ul:first li").mouseover(function() {
$(this).addClass("li_bg").siblings().removeClass("li_bg");
});
$("div:eq(1) ul:first li").click(function() {
$(this).remove("li").removeClass("li_bg");
$("div:eq(1) ul:eq(1)").append($(this));
});
//搜索文本框
$("div:eq(2) #txt_search").focus(function() {
if ($(this).val() == "请输入搜索关键词") {
$(this).val("");
}
});
$("div:eq(2) #txt_search").blur(function() {
if ($(this).val() == "") {
$(this).val("请输入搜索关键词");
}
});
//文本框焦点
$("div:eq(3) input:text").focus(function() {
if (!$(this).hasClass("li_bg")) {
$(this).addClass("li_bg");
} else {
$(this).removeClass("li_bg").siblings().addClass("li_bg");
}
});
//无刷新评论
$("div:last button").click(function() {
if ($("#userName").val() == "" || $("#comments").val() == "") {
alert("用户名或评论不能为空");
} else {
var userName = $("#userName").val();
var comments = $("#comments").val();
$("table").append("<tr><td>" + userName + "</td><td>" + comments + "</td></tr>");
}
});
})
</script>
</head>
<body>
<!-- 控件的高亮显示 -->
<div>
<input type="button" value="按钮一">
<input type="button" value="按钮二">
<input type="text">
<input type="text">
<input type="checkbox">选择框
<input type="radio" name="rad1">单选1
<input type="radio" name="rad1">单选2
</div>
<!-- 球队选择 -->
<div>
<ul>
<li title="夜雨沧神">夜雨沧神</li>
<li title="荧祸守心">荧祸守心</li>
<li title="剑子仙迹">剑子仙迹</li>
<li title="佛剑分说">佛剑分说</li>
</ul>
<ul></ul>
</div>
<!-- 搜索文本框 -->
<div>
请输入搜索关键词：<input type="text" id="txt_search" value="请输入搜索关键词"><button>搜索</button>
</div>
<!-- 文本框焦点 -->
<div>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
<!-- 无刷新评论 -->
<div>
<table>
<tr>
<td>昵称</td>
<td>评论</td>
</tr>
</table>
昵称：<input type="text" id="userName">
<br/> 评论: <input type="text" id="comments">
<button>评论</button>
</div>
</body>
</html>
版权声明：本文为xiemin-minmin原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。