jquery-练习题
1、 请使用jQuery编写一个函数，此函数绑定到body的mousemove事件上，可以获取鼠标的位置。
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<title></title>
<script
src="../../js/jquery-3.1.1.min.js"></script>
<!-- mousemove([[data],fn])
data:mousemove([Data], fn)
可传入data供函数fn处理。
fn:在每一个匹配元素的mousemove事件中绑定的处理函数。-->
<script>
$(function(){
$("#d").mousemove(function(e){
$(this).text(e.pageX
+
", "
+ e.pageY);
});
})
</script>
</head>
<body
id="d">
放在我上面
<!--编写一个函数，绑定到body的mousemove事件上，可以获取鼠标位置-->
</body>
</html>
2、 遍历数组【2，4，6，8】，为每个元素加1
<script
src="../../js/jquery-3.1.1.min.js"></script>
<script>
$.each(
[2,4,6,8],
function(i, n){
alert(
"Item #"
+ i +
": "
+ (n+1) );
});
</script>
3、 鼠标移到菜单上时改变菜单样式
鼠标移出菜单时恢复为原来的样式
<style>
td{
background-color:
#42668f;
height:
50px;
width:
100px;
}
.a{
background-color:
red;
}
</style>
<script
src="../../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
$("td").mouseover(function(){
$(this).addClass('a')
}).mouseout(function(){
$("td").removeClass('a')
})
})
</script>
<table>
<tr>
<td>资讯动态</td>
<td>产品世界</td>
<td>市场营销</td>
</tr>
</table>
4、 单选水果，点击改变图片，显示选择的水果图片
<style>
img{
height:
300px;
width:
300px;
}
</style>
<script
src="../../js/jquery-3.1.1.min.js"
type="text/javascript"
charset="utf-8"></script>
<script
type="text/javascript">
$(function(){
$("#b").click(function(){
var
val=$("input:checked").val();
switch(val)
{
case
'a':
$("img").attr('src','../../img/xiangjiao.jpg');
break;
case
'b':
$("img").attr('src','../../img/li.jpg');
break;
case
'c':
$("img").attr('src','../../img/putao.jpg');
break;
case
'd':
$("img").attr('src','../../img/pingguo.jpg');
break;
case
'e':
$("img").attr('src','../../img/xigua.jpg');
break;
}
})
})
</script>
<body>
<img
src="../../img/xiangjiao.jpg"/>
<br
/>
<h1>请选择水果</h1>
<input
type="radio"
name="fruit"
value="a"
checked="checked"
/>香蕉
<input
type="radio"
name="fruit"
value="b"
/>梨
<input
type="radio"
name="fruit"
value="c"
/>葡萄
<input
type="radio"
name="fruit"
value="d"
/>苹果
<input
type="radio"
name="fruit"
value="e"
/>西瓜
<input
type="button"
id="b"
value="改变图片"
/>
</body>
5、实现如图所示功能
<script
src="../../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
!function(window,
$, undefined) {
$('#add').click(function(){
$('#table tbody').append('<tr><td>***</td><td>***</td></tr>');
})
$('#remove_two').click(function(){
$('#table tbody tr:eq(1)').remove();
})
$('#change_title').click(function(){
$('#table thead tr td').css({'background':'#000','color':'#fff'});
})
$('#clone_last').click(function(){
//$('#table tbody tr:last').clone();
$('#table
tbody').append($('#table
tbody tr:last').clone());//复制并插入
})
}(window,
jQuery,
undefined);
})
</script>
<body>
<table
id="table"
border="1"
cellpadding="5"
cellspacing=0>
<thead>
<tr>
<td>书名</td>
<td>价格</td>
</tr>
</thead>
<tbody>
<tr>
<td>看得见风景的房间</td>
<td>¥30.00</td>
</tr>
<tr>
<td>60个瞬间</td>
<td>¥32.00</td>
</tr>
</tbody>
</table><br>
<button
id="add">增加一行</button>
<button
id="remove_two">删除第二行</button>
<button
id="change_title">修改标题样式</button>
<button
id="clone_last">复制最后一行</button>
</body>