JQuery案例（笔记）

来源：互联网发布：mysql unique select 编辑：程序博客网时间：2024/05/25 20:01

JQuery练习：小例子

1.评分控件：

<scripttype="text/javascript">

$(function () {

$("#tab td").mouseover(function () {

$("tab td").text("★");

$(this).nextAll().text("☆");

});

</script>

//动态添加图片

<scripttype="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>

<scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script>

<scripttype="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>

<tableid="tab">

</table>

</body>

</html>

3.元素的each

<head>

<scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script>

<scripttype="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>

<inputtype="checkbox" name="chkbox" value="value1"/>value1

<inputtype="checkbox" name="chkbox" value="value2"/>value2

<inputtype="checkbox" name="chkbox" value="value3"/>value3

<pid="pId"></p>

</body>

</html>

4.动态创建节点

<head>

<scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script>

<scripttype="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>

<tableid="tab">

</table>

</body>

</html>

5.JQuery实现无刷新评论

<head>

<scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script>

<scripttype="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>

<tableid="tab">

</table>

<inputtype="text" /><br />

<textareaid="ta"></textarea><br/>

<inputtype="button" value="评论"/>

</body>

</html>

6．歌曲选择

<head>

$(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>

</body>

</html>

7搜索文本框

<head>

<styletype="text/css">

.gray

{

color:Gray;

}

</style>

<scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script>

<scripttype="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>

<inputtype="text" id="txt" />

<inputtype="button" id="btn" value="搜索"/>

</body>

</html>

8.跟着鼠标移动的图片

<head>

<scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script>

<scripttype="text/javascript">

$(function () {

$(document).mousemove(function (e) {

$("#fly").css("left", e.pageX).css("top", e.pageY);

});

</script>

</head>

<body>

<divid="fly" style="position:absolute">

<imgsrc="Image/25.gif"/>fly

</div>

</body>

</html>

9.小图变大图

<head>

<scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script>

<scripttype="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>

<divid="imgList" style="display:none;position:absolute">

<pid="detailName"></p>

<pid="detailHeight"></p>

</div>

</body>

</html>

10.qq分组效果

<head>

ul{list-style-type:none}

.header{background-color:Blue}

.body{border-color:Green;border-style:solid;border-width:thin}

</style>

$(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>

</body>

</html>

11.动态创建元素，使用选择器易错点

$(function () {

//动态创建元素

var link = $("<a href='http://www.baidu.com' id='linkId'>百度</a>");

$("body").append(link);

$("#linkId").text("baidu"); //必须把动态创建的元素添加到界面上，才能通过选择器选择它。

});

12.记录用户的选择器（cookie）

$(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>

<tableid="tab">

<tr><tdstyle="background-color:Yellow">Yellow</td></tr>

</table>

</body>