JQuery小练习
发布时间：2020-12-13 20:13:12 所属栏目：PHP教程 来源：网络整理
导读：1、加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第3个文本框中。 script src=jquery⑴.8.3.js/script script type=text/javascript $(function () { $('#btn').click(function () { var first = parseInt($('#btnFirst').val()); var s
|
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','')
//鼠标点击
.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',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','')
//鼠标点击
.click(function () {
$(this).unbind().removeAttr('style').appendTo($('#ul2'));
});
})
});
</script>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
