JQuery小练习
来源:互联网 发布:阿列克谢耶维奇 知乎 编辑:程序博客网 时间:2024/06/06 02:07
1、加法计算器。两个文本框中输入数字,点击【=】按钮将相加的结果放到第三个文本框中。
<script src="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="" 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、十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。设置可用性等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-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="" /><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、加法计算器。两个文本框中输入数字,点击【=】按钮将相加的结果放到第三个文本框中。
<script src="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="" 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、十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。设置可用性等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-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="" /><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 0
- JQuery小练习
- JQuery小练习
- JQuery小练习
- JQuery小练习
- jQuery小练习
- JQuery小练习
- jQuery小练习1
- jQuery小练习3
- jQuery打字机小练习
- 0726-jQuery小练习
- jQuery选项卡小练习
- JQuery小练习(2009-08-03)
- JQuery小练习(2009-08-03)
- 一个Jquery操纵节点的小练习
- jquery 小练习-获得一个文本框的值
- Jquery实用小案例,适合初学者练习使用
- jQuery小练习2——下拉框应用
- jQuery小练习4——多选框应用
- POJ 3715 Blue and Red 二分图
- JSON标准格式
- 2014上海全国邀请赛Maze
- protobuf 使用相关
- 路径和文件处理
- JQuery小练习
- spring mvc和jquery uploadify 404
- insertion mergesort bubble sort 复习 python
- 偶尔文艺-关于想要转录MIDI从YAMAHA到MAC
- ubuntu启动时加载的服务
- BZOJ1009 [HNOI2008]GT考试(KMP算法+矩阵加速dp)
- javascript--&& II 问题总结
- 【设计模式】-单例模式(Singleton)
- 终端密码输入问题