JQuery小练习
栏目：php教程时间：2015-01-29 09:06:22
1、加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第3个文本框中。
<script src="jquery⑴.8.3.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
var first = parseInt($('#btnFirst').val());
var second = parseInt($('#btnSecond').val());
var sum = first + second;
$('#btnResult').val(sum);
});
});
</script>
</head>
<body>
<input type="text" name="name" value="" id="btnFirst" />+
<input type="text" name="name" value="" id="btnSecond" />
<input type="button" name="name" value="=" id="btn" />
<input type="text" name="name" value="" id="btnResult" />
</body>
2、10秒钟后协议文本框下的注册按钮才能点击，时钟倒数。设置可用性等jQuery未封装方法：attr("")setInterval()
<script type="text/javascript">
$(function () {
var i = 5;
var setId = setInterval(function () {
i--;
if (i <= 0) {
$('#btnShow').val('同意').attr('disabled', false);
clearInterval(setId);
}
else {
$('#btnShow').val('请仔细浏览协议(' + i + ')');
}
}, 500);
});
</script>
<input type="button" name="name" value="请仔细浏览协议(5)" id="btnShow" disabled="disabled" />
3、无刷新评论。(已做)
<script src="jquery⑴.8.3.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//创建1行和两个单元格
$('<tr><td>' + $('#txt').val() + '</td><td>' + $('#textContent').val() + '</td></tr>').appendTo($("#tb"));
});
});
</script>
</head>
<body>
<table id="tb" style="border:1px solid red;">
<tr>
<td>
猫猫：
</td>
<td>
沙发耶！
</td>
</tr>
</table>
<br />
昵称：<input type="text" id="txt" value="" /><br />
<textarea id="textContent" rows="10" cols="15"></textarea><br />
<input type="button" value="评论" id="btn1" />
</body>
4、案例1：创建若干个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背风景设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是focus，焦点离开控件的事件是blur。
$(function () {
$('input').blur(function () {
if ($(this).val().length == 0) {
$(this).css('backgroundColor', 'red');
}
else {
$(this).css('backgroundColor','');
}
});
});
5、案例：选择球队,两个ul。被悬浮行高亮显示（背景是红色），点击球队将它放到另外一个的球队列表。//清除所有事件。.unbind();
<script type="text/javascript">
$(function () {
//鼠标经过
$('#uul li').mouseover(function () {
$(this).css('cursor', 'pointer').css('backgroundColor', 'red');
//鼠标离开
}).mouseout(function () {
$(this).css('cursor', 'pointer').css('backgroundColor', '')
//鼠标点击
.click(function () {
$(this).unbind().removeAttr('style').appendTo($('#ul2'));
});
})
});
</script>
1、加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第3个文本框中。
<script src="jquery⑴.8.3.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
var first = parseInt($('#btnFirst').val());
var second = parseInt($('#btnSecond').val());
var sum = first + second;
$('#btnResult').val(sum);
});
});
</script>
</head>
<body>
<input type="text" name="name" value="" id="btnFirst" />+
<input type="text" name="name" value="" id="btnSecond" />
<input type="button" name="name" value="=" id="btn" />
<input type="text" name="name" value="" id="btnResult" />
</body>
2、10秒钟后协议文本框下的注册按钮才能点击，时钟倒数。设置可用性等jQuery未封装方法：attr("")setInterval()
<script type="text/javascript">
$(function () {
var i = 5;
var setId = setInterval(function () {
i--;
if (i <= 0) {
$('#btnShow').val('同意').attr('disabled', false);
clearInterval(setId);
}
else {
$('#btnShow').val('请仔细浏览协议(' + i + ')');
}
}, 500);
});
</script>
<input type="button" name="name" value="请仔细浏览协议(5)" id="btnShow" disabled="disabled" />
3、无刷新评论。(已做)
<script src="jquery⑴.8.3.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//创建1行和两个单元格
$('<tr><td>' + $('#txt').val() + '</td><td>' + $('#textContent').val() + '</td></tr>').appendTo($("#tb"));
});
});
</script>
</head>
<body>
<table id="tb" style="border:1px solid red;">
<tr>
<td>
猫猫：
</td>
<td>
沙发耶！
</td>
</tr>
</table>
<br />
昵称：<input type="text" id="txt" value="" /><br />
<textarea id="textContent" rows="10" cols="15"></textarea><br />
<input type="button" value="评论" id="btn1" />
</body>
4、案例1：创建若干个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背风景设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是focus，焦点离开控件的事件是blur。
$(function () {
$('input').blur(function () {
if ($(this).val().length == 0) {
$(this).css('backgroundColor', 'red');
}
else {
$(this).css('backgroundColor','');
}
});
});
5、案例：选择球队,两个ul。被悬浮行高亮显示（背景是红色），点击球队将它放到另外一个的球队列表。//清除所有事件。.unbind();
<script type="text/javascript">
$(function () {
//鼠标经过
$('#uul li').mouseover(function () {
$(this).css('cursor', 'pointer').css('backgroundColor', 'red');
//鼠标离开
}).mouseout(function () {
$(this).css('cursor', 'pointer').css('backgroundColor', '')
//鼠标点击
.click(function () {
$(this).unbind().removeAttr('style').appendTo($('#ul2'));
});
})
});
</script>
------分隔线----------------------------
下一篇 Linux文件系统目录结构解析
------分隔线----------------------------