1.
请使用
jQuery
编写一个函数,此函数绑定到
body
的
mousemove
事件上,可以获取鼠标的位置。
1.mousemove事件
2.通过API文档查找获取鼠标位置的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--1、 请使用jQuery编写一个函数,
此函数绑定到body的mousemove事件上,可以获取鼠标的位置。-->
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
</script>
<title>mousemove</title>
</head>
<body>
<span></span>
</body>
</html>
2.遍历数组【
2
,
4
,
6
,
8
】,为每个元素加
1
数组的遍历函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--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为: '+(n+1));
});
</script>
<title>遍历数组</title>
</head>
<body>
</body>
</html>
3.鼠标移到菜单上时改变菜单样式
鼠标移出菜单时恢复为原来的样式
1.鼠标的移动(mouseover、mouseout)
2.改变样式(.css)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--3、 鼠标移到菜单上时改变菜单样式
鼠标移出菜单时恢复为原来的样式-->
<style>
div{
float: left;
width: 150px;
height: 40px;
background-color: #828282;
border: 1px solid white;
border-radius: 20px 20px 0 0;
text-align: center;
font-size: 18px;
color: white;
padding-top: 15px;
}
</style>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
$('div').mouseover(function(){
$(this).css('background-color','red');
}).mouseout(function(){
$(this).css('background-color','#828282');
})
})
</script>
<title>Title</title>
</head>
<body>
<div>资讯动态</div>
<div>产品世界</div>
<div>市场营销</div>
</body>
</html>
4.单选水果,点击改变图片,显示选择的水果图片
1.获取单选框的属性值(.checked)
2.改变图片(图片地址发生改变.attr())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--4、 单选水果,点击改变图片,显示选择的水果图片-->
<style>
div{
float: left;
width: 350px;
height: 300px;
overflow: hidden;
}
div img{
width: 350px;
height: 300px;
}
p{
margin-top: 20px;
font-size: 30px;
}
</style>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
$('#button').click(function(){
if ($('#apple').get(0).checked){
$("img").attr("src", "../../img/苹果.jpg");
}else if ($('#banana').get(0).checked){
$("img").attr("src", "../../img/香蕉.jpg");
}else if ($('#grape').get(0).checked){
$("img").attr("src", "../../img/葡萄.jpg");
}else if ($('#pear').get(0).checked){
$("img").attr("src", "../../img/梨.jpg");
}else if ($('#weatermelon').get(0).checked){
$("img").attr("src", "../../img/西瓜.jpg");
}
})
})
/*方法二:
$(function(){
$("#b").click(function(){
var val=$("input:checked").val();
switch(val) {
case 'a':
$("img").attr('src','../img/a.jpg');
break;
case 'b':
$("img").attr('src','../img/b.jpg');
break;
case 'c':
$("img").attr('src','../img/c.jpg');
break;
case 'd':
$("img").attr('src','../img/d.jpg');
break;
case 'e':
$("img").attr('src','../img/e.jpg');
break;
}
})
}) */
</script>
<title>使用getAttribute读取节点的属性值</title>
</head>
<body>
<div>
<img src="../../img/水果.jpg" alt="">
</div>
<div>
<p>选择你喜欢的水果:</p><br>
<input type="radio" name="radio" value="apple" id="apple">苹果
<input type="radio" name="radio" value="banana" id="banana">香蕉
<input type="radio" name="radio" value="grape" id="grape">葡萄
<input type="radio" name="radio" value="pear" id="pear">梨
<input type="radio" name="radio" value="weatermelon" id="weatermelon">西瓜
<br><br><br><br>
<input type="button" name="button" value="改变图片" id="button">
</div>
</body>
</html>
5
、实现如图所示功能
1.表格中增加一行(.append())
2.删除一行(.remove())
3.修改标题样式(获取标题属性(table tr:first-child)、修改样式(.css))
4.复制最后一行(获取最后一行属性(table tr:last-child)、复制(.clone().appendTo()))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
table{
border: 1px solid black;
text-align: center;
border-collapse:collapse;
width: 500px;
height: 300px;
}
td{
border: 1px solid black;
}
div{
margin-top: 20px;
}
div input{
margin-left:20px;
}
</style>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
var row_count = 4;
//增加一行
$('#a').click(function(){
var table1 = $('#table1');
var row = $("<tr></tr>");
var td = $("<td></td><td></td>");
row.append(td);
table1.append(row);
row_count++;
})
//删除第二行
$('#b').click(function(){
$("#table1 tr:gt(0):eq(0)").remove();
});
//修改标题
$('#c').click(function(){
$('table tr:first-child').css('background-color','red')
});
//复制最后一行
$("#d").click(function(){
$('table tr:last-child').clone().appendTo($('#table1'))
});
})
</script>
<title>操作表格</title>
</head>
<body>
<table id="table1">
<tr id="1">
<td>书名</td>
<td>价格</td>
</tr>
<tr id="2">
<td>看得见风景的房间</td>
<td>¥30.00</td>
</tr>
<tr id="3">
<td>幸福从天而降</td>
<td>¥18.50</td>
</tr>
<tr id="4">
<td>60个幸福瞬间</td>
<td>¥32.00</td>
</tr>
</table>
<div>
<input type="button" value="增加一行" id="a">
<input type="button" value="删除第二行" id="b">
<input type="button" value="修改标题样式" id="c">
<input type="button" value="复制最后一行" id="d">
</div>
</body>
</html>