您的位置：首页 > Web前端 > JQuery

jquery 练习题

2015-12-24 16:27 666 查看

一.高亮选择（主要用到addclass和removeclass方法，它们用于增删样式）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
.hightlight{background-color:Yellow}
</style>

<script type="text/javascript">
$(function () {
$("#table1 tr").mouseover(function () {
$(this).addClass("hightlight").siblings().removeClass("hightlight");
});
});
</script>
</head>
<body>
<table id="table1" border="" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>fadfa</td>
</tr>
<tr>
<td>fafdaf</td>
</tr>
<tr>
<td>fafaf</td>
</tr>
<tr>
<td>fafdafa</td>
</tr>
</table>
</body>
</html>

二、换肤功能

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
<script src="JScript/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
if ($.cookie("lastcolor")) {
$(document.body).css("background-color", $.cookie("lastcolor"));
};

$("table td").click(function () {
$.cookie("lastcolor", $(this).css("background-color"), {expires:1});
$(document.body).css("background-color", $(this).css("background-color")).css("cursor","Pointer");

});
});

</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="10%">
<tr>
<td style="background-color:Red">红色</td>
<td style="background-color:Blue">蓝色</td>
<td style="background-color:Green">绿色</td>
</tr>
</table>
</body>
</html>

三、全选、反选等

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#selall").click(
function () {
$(":checkbox").attr("checked", true);
});
});

$("#selnone").click(
function () {
$(":checkbox").attr("checked", false);
});
});

$("#resver").click(function () {
$(":checkbox").each(function () {
$(this).attr("checked",!$(this).attr("checked"))
});
});

});
$(function () {

});
</script>
</head>
<body>
<div id="plalst">

<input type="checkbox"  />一队
<input type="checkbox" />二队
<input type="checkbox" />三队
<input type="checkbox" />四队
<input type="checkbox" />五队
<input type="checkbox" />六队
</div>
<br /><br /><br />

<input type="button" id="selall"  value="全选" />
<input type="button" id="selnone" value="全不选" />
<input type="button" id="resver" value="反选" />
<a href="http://www.sina.com" id="link1">sina</a>
</body>
</html>

四、把ul当成table来处理，并在点击表头时自动展开或关闭子项

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">
$(function () {
$("#qq li:even").addClass("header").mouseover(function () {
$(this).next("li.detail").show().siblings("li.detail").hide("slow");
}); /*所有包含detail的li的元素隐藏或显示*/
$("#qq li:odd").addClass("detail");
});
</script>

<style type="text/css">
ul{list-style-type:none } /*去掉前面的点号*/
.header{background-color:Blue;cursor:pointer;} /*头样式*/
.detail{background-color:Lime;border-color:Gray;border-width:1px;} /*明细样式*/
</style>
</head>
<body>
<ul id="qq" >
<li>我的好友</li>
<li>张三<br/>李四</li>

<li>我的同学</li>
<li>ABC<br />FFX</li>

<li>陌生人</li>
<li>And1<br/>Jim</li>

</ul>
</body>
</html>

五、网页变灰白，主要是用到样式，把documnet全变个背景色为灰白的即可

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {//目前不支持哦
$(document.body).toggleClass("blackwhite");

});
});
</script>

<style type="text/css">
.blackwhite{filter:Gray;}
</style>

</head>
<body>
<input type="button" id="btn" value="变黑白"/>
<img src="imgs/45280.jpg"/>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航