首页 > 代码库 > JQuery小练习
JQuery小练习
1、加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中。
<script src=http://www.mamicode.com/"jquery-1.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=http://www.mamicode.com/"" id="btnFirst" />+
<input type="text" name="name" value=http://www.mamicode.com/"" id="btnSecond" />
<input type="button" name="name" value=http://www.mamicode.com/"=" id="btn" />
<input type="text" name="name" value=http://www.mamicode.com/"" id="btnResult" />
</body>
2、十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。设置可用性等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=http://www.mamicode.com/"请仔细阅读协议(5)" id="btnShow" disabled="disabled" />
3、无刷新评论。(已做)
<script src=http://www.mamicode.com/"jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//创建一行和两个单元格
$(‘<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=http://www.mamicode.com/"" />
<textarea id="textContent" rows="10" cols="15"></textarea><br />
<input type="button" value=http://www.mamicode.com/"评论" 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、加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中。
<script src=http://www.mamicode.com/"jquery-1.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=http://www.mamicode.com/"" id="btnFirst" />+
<input type="text" name="name" value=http://www.mamicode.com/"" id="btnSecond" />
<input type="button" name="name" value=http://www.mamicode.com/"=" id="btn" />
<input type="text" name="name" value=http://www.mamicode.com/"" id="btnResult" />
</body>
2、十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。设置可用性等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=http://www.mamicode.com/"请仔细阅读协议(5)" id="btnShow" disabled="disabled" />
3、无刷新评论。(已做)
<script src=http://www.mamicode.com/"jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//创建一行和两个单元格
$(‘<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=http://www.mamicode.com/"" />
<textarea id="textContent" rows="10" cols="15"></textarea><br />
<input type="button" value=http://www.mamicode.com/"评论" 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>
JQuery小练习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。