JQuery选择器 点击背景变色、光棒效果、焦点、添加元素
HTML部分
<style>
.moucolor{
background-color:red;
}
style>
<body>
<div id="div1">
<input type="button" name="name" value="按钮1" />
<input type="button" name="name" value="按钮2" />
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="checkbox" name="name" value="" />
<label>选择框label>
<input type="radio" name="name" value="" />
<label>单选1label>
<input type="radio" name="name" value="" />
<label>单选2label>
div>
<div>
<ul id="ul1">
<li>魔兽li>
<li>兽人必须死li>
<li>细胞分裂li>
<li>红警li>
<li>孤胆枪手li>
ul>
<ul id="ul2">
ul>
div>
<div>
<label>请输入搜索的关键字：label>
<input id="txt1" type="text" name="name" value="请输入关键词" />
<input type="button" name="name" value="搜索" />
div>
<div>
<table border="1" cellspacing="0" id="table">
<tr>
<td>昵称td>
<td>评论td>
tr>
table>
<label>昵称：label>
<input id="text1" type="text" name="name" value="" />
<br />
<label>评论：label>
<input id="text2" type="text" name="name" value="" />
<br />
<input id="btn1" type="button" name="name" value="评论" />
div>
body>
html>
JQuery部分
<script src="Scripts/jquery-1.11.3.js"></script>
<script>
$(function () {
//调用input背景白色
fun();
//点击背景变色
$("#div1 input").focus(function () {//获取焦点事件
$(this).removeClass("background-color", "white").css("background-color", "yellow");
});
$("#div1 input").blur(function () {//失去焦点
$(this).removeClass("background-color", "white").css("background-color", "white");
});
//划过背景高亮
$("#ul1 > li").mousemove(function () {//滑动事件
$(this).addClass("moucolor").siblings().removeClass("moucolor");
});
//点击到下一个ul
$("#ul1 > li").on("click", function () {
var txt = $(this).text();
var len = $(this).length - 1;
$("#ul2").append("" + txt + "");//把当前选中的li文本添加给下面的ul
if (len >= 0) {
$("#ul1 > li:eq(" + len + ")").remove();//删除选中的li
}
else {
alert("没用东西了");
}
});
//焦点文本
$("#txt1").focus(function () {//获取焦点
var txt2 = $(this).val();
if (txt2 == "请输入关键词") {
$(this).val("");
}
});
$("#txt1").blur(function () {//失去焦点
var txt3 = $("#txt1").val();
if ($.trim(txt3) == "") {
$(this).val("请输入关键词");
}
});
//评论
$("#btn1").on("click", function () {
var text1 = $("#text1").val();//获取文本框内容
var text2 = $("#text2").val();
$("#table").append("" + text1 + " " + "
" + "" + text2 + "
});
})
//input背景白色
function fun() {
$("input").css("background-color", "white");
}
</script>
你可能感兴趣的:(JQuery,HTML)