JQuery练习:小例子
1.评分控件:
<script type="text/javascript">
$(function () {
$("#tab td").mouseover(function () {
$("tab td").text("★");
$(this).nextAll().text("☆");
});
});
</script>
//动态添加图片
<script type="text/javascript">
$(function () {
$("#tab td").html("<img src='Image/30.gif'/>")
.mousemove(function () {
$("#tab td").html("<img src='Image/25.gif'/>");
$(this).nextAll().html("<img src='Image/30.gif'/>");
});
});
</script>
2.过滤选择器
第一行是表头,显示大字体(30);最后一行是汇总,显示红色字体;正文前三行显示稍大字体(27);表格的奇数行是黄色背景。
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tab tr:first").css("fontSize", "30");
$("#tab tr:last").css("color", "red");
$("#tab tr:gt(0):lt(3)").css("fontSize", "27");//lt(3)中的序号3是从gt(0)后的新序列中的序号为基准的
$("#tab tr:gt(0):even").css("background", "Yellow");//奇、偶行序号是从1开始的
});
</script>
</head>
<body>
<table id="tab">
<tr><td>学生</td><td>成绩</td></tr>
<tr><td>Tom</td><td>90</td></tr>
<tr><td>Jim</td><td>69</td></tr>
<tr><td>Sun</td><td>78</td></tr>
<tr><td>John</td><td>89</td></tr>
<tr><td>Lily</td><td>96</td></tr>
<tr><td>平均分</td><td>87</td></tr>
</table>
</body>
</html>
3.元素的each
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[name=chkbox]").click(function () {
var arry = new Array();
$("input[name=chkbox]:checked").each(function (key, value) { arry[key] = $(value).val(); });
$("#pId").text("共选中"+arry.length+"项:"+arry.join(","));
});
});
</script>
</head>
<body>
<input type="checkbox" name="chkbox" value="value1"/>value1
<input type="checkbox" name="chkbox" value="value2" />value2
<input type="checkbox" name="chkbox" value="value3" />value3
<p id="pId"></p>
</body>
</html>
4.动态创建节点
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com" };
$.each(data, function (key, value) {
var tr = $("<tr><td>" + key + "</td><td><a href="+value +">"+ key+"</a></td></tr>");
$("#tab").append(tr);
});
});
</script>
</head>
<body>
<table id="tab">
</table>
</body>
</html>
5.JQuery实现无刷新评论
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input:[type=button]").click(function () {
var nickname = $("input:[type=text]").val();
var content = $("#ta").val();
var tr = $("<tr><td>" + nickname + ":êo</td><td>" + content + "</td></tr>");
$("#tab").append(tr);
});
});
</script>
</head>
<body>
<table id="tab">
<tr><td>冷冷:</td><td>很好</td></tr>
</table>
<label>昵称:</label>
<input type="text" /><br />
<label>评论:</label>
<textarea id="ta"></textarea><br />
<input type="button" value="评论"/>
</body>
</html>
6.歌曲选择
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnAll").click(function () {
$("#div1 :checkbox").attr("checked", true);
});
$("#btnNone").click(function () {
$("#div1 :checkbox").attr("checked", false);
});
$("#btnReverse").click(function () {
$("#div1 :checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
});
});
</script>
</head>
<body>
<div id="div1">
<input type="checkbox" />歌曲1<br />
<input type="checkbox" />歌曲2<br />
<input type="checkbox" />歌曲3<br />
<input type="checkbox" />歌曲4<br />
<input type="checkbox" />歌曲5<br />
</div>
<input type="button" value="全选" id="btnAll"/>
<input type="button" value="全不选" id="btnNone" />
<input type="button" value="反选" id="btnReverse"/>
</body>
</html>
7搜索文本框
<head>
<title></title>
<style type="text/css">
.gray
{
color:Gray;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txt").val("请输入关键字").addClass("gray")
.focus(function () {
if ($(this).val() == "请输入关键字") {
$(this).val("").removeClass("gray");
}
})
.blur(function () {
if ($(this).val().length <= 0) {
$(this).addClass("gray").val("请输入关键字");
}
});
});
</script>
</head>
<body>
<input type="text" id="txt" />
<input type="button" id="btn" value="搜索" />
</body>
</html>
8.跟着鼠标移动的图片
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(document).mousemove(function (e) {
$("#fly").css("left", e.pageX).css("top", e.pageY);
});
});
</script>
</head>
<body>
<div id="fly" style="position:absolute">
<img src="Image/25.gif" />fly
</div>
</body>
</html>
9.小图变大图
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
var data = { "Image/25.gif": ["Image/30.gif","美¨¤女?1","176"], "Image/30.gif": ["Image/25.gif","美¨¤女?2","167"] };
$(function () {
$.each(data, function (key, value) {
var smallImag = $("<img src='" + key + "'/>");
smallImag.attr("bigMapPath", value[0]);
smallImag.attr("personName", value[1]);
smallImag.attr("personHeight", value[2]);
smallImag.mouseover(function (e) {
$("#imgList img1").attr("src", $(this).attr("bigMapPath"));
$("#imgList detailName").text($(this).attr("personName"));
$("#imgList detailHeight").text($(this).attr("personHeight"));
$("#imgList").css("left", e.pageX).css("top", e.pageY).css("display", "");
});
$("body").append(smallImag);
});
$("#btn").click(function () {
$("#imgList").css("display", "none");
});
});
</script>
</head>
<body>
<div id="imgList" style="display:none;position:absolute">
<p><img src="" id="img1" /></p>
<p id="detailName"></p>
<p id="detailHeight"></p>
<p><input type="button" id="btn" value="关?闭À?"/></p>
</div>
</body>
</html>
10.qq分组效果
<head>
<title></title>
<style type="text/css">
ul{list-style-type:none}
.header{background-color:Blue}
.body{border-color:Green;border-style:solid;border-width:thin}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#qq li:odd").addClass("body").hide(); //偶数行添加样式并先隐藏
$("#qq li:even").addClass("header").click(function () {
$(this).next("li.body").show("fast").siblings("li.body").hide("fast");
});
});
</script>
</head>
<body>
<ul id="qq">
<li>我的好友</li>
<li>好友1<br />好友2<br /></li>
<li>我的同学</li>
<li>同学1<br />同学2<br /></li>
<li>陌生人</li>
<li>莫1<br />莫2<br /></li>
</ul>
</body>
</html>
11.动态创建元素,使用选择器易错点
$(function () {
//动态创建元素
var link = $("<a href='http://www.baidu.com' id='linkId'>百度</a>");
$("body").append(link);
$("#linkId").text("baidu"); //必须把动态创建的元素添加到界面上,才能通过选择器选择它。
});
12.记录用户的选择器(cookie)
<script type="text/javascript">
$(function () {
$("#tab td").click(function () {
var bgcolor = $(this).css("background-color");
$("body").css("background-color", bgcolor);
//保存在Cookie变量中
$.cookie("LastBgColor", bgcolor, { expires: 10 }); //设定expires参数不会关闭浏览器就清除cookie
}).css("cursor", "pointer");
var bgcolor = $.cookie("LastBgColor");
if (bgcolor) {
$("body").css("background-color", bgcolor);
}
});
</script>
<body>
<table id="tab">
<tr><td style="background-color:Yellow">Yellow</td></tr>
<tr><td style="background-color:Blue">Blue</td></tr>
<tr><td style="background-color:Red">Red</td></tr>
</table>
</body>