jQuery实战技巧-优快云博客

本文通过多个实例展示了jQuery在网页开发中的应用技巧，包括节点遍历、动态创建节点、鼠标跟踪效果等，帮助读者深入理解jQuery的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//节点遍历

$(function () {

   $("div").click(function () {
   $.each($(this).nextAll("div"), function () { $(this).css("background","red")})
   })
   $("div").click(function () { $(this).nextAll("div").css("background", "red"); });
   $("div").click(function () { $(this).css("background", "red"); $(this).siblings("div").css("background", "white"); });
   $("div").click(function () { $(this).css("background","red").siblings("div").css("background","white")});

});

//评分控件

//选择过滤器

//相对选择器

//属性过滤器

//链式each

//动态创建节点

<title>动态创建节点</title>
   <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
   var link = $("<a href='http://www.baidu.com'>百度</a>");
   $("div:first").append(link);
   });
   $(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>");
   $("#tableSite").append(tr);
   })
   });
   </script>

//搜索框效果

//背景颜色切换

//Cookie记住文本框用户名值

//模拟QQ好友列表

<title>模拟QQ好友列表</title>
   <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
   $("#qq li:odd").addClass("body");
   $("#qq li:even").addClass("header").click(function () {
   $(this).next("li.body").show("fast").siblings("li.body").hide("fast");
   });
   $("#qq li:first").click();
   });
   </script>
   <style type="text/css">
   ul{ list-style-type:none}
   .header{ background-color:Red; cursor:pointer;}
   .body{ background-color:white; border-style:solid; border-width:1px;}
   </style>
</head>
<body>
   <form id="form1" runat="server">
   <div style="width:200px">
   <ul id="qq">
   <li>我的好友</li>
   <li>张三<br />李四<br /></li>
   <li>我的同学</li>
   <li>laden<br />小泉<br /></li>
   <li>陌生人</li>
   <li>张宇<br />张雨生<br /></li>
   </ul>
   </div>
   </form>

//点击小图显示大图

<title>点击小图显示大图</title>
   <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   //Ajax传递过来的数据格式
   var data = { "images/0small.jpg": ["image/0.jpg", "布莱尼", "185"], "images/1small.jpg": ["image/1.jpg", "布莱尼2", "175"], "images/0smal2.jpg": ["image/2.jpg", "布莱尼2", "165"] };
   $(function () {
   $.each(data, function (key, value) {
   var smallimg = $("<img src=" + key + "/>");
   smallimg.attr("bigmappath", value[0]);
   smallimg.attr("personname", value[1]);
   smallimg.attr("personheight", value[2]);
   smallimg.mouseover(function (e) {
   $("#detailImg").attr("src", $(this).attr("bigmappath"));
   $("#detailHeight").text($(this).attr("personheight"));
   $("#detailName").text($(this).attr("personname"));
   $("#details").css("top", e.pageX).css("left", e.pageY).css("display", "");
   });
   $("body").append(smallimg);
   });
   $("#closeDetails").click(function () {
   $("details").css("display", "none");
   });
   });
   </script>
</head>
<body>
   <form id="form1" runat="server">
   <div style=" display:none; position:absolute;" id="details">
   <img id="detailImg" src="" />
   <p id="detailHeight"></p>
   <p id="detailName"></p>
   <p><input type="button" value="关闭" id="closeDetails" /></p>
   </div>
   </form>

//跟着鼠标飞的图片

<title>跟着鼠标飞的图片</title>
   <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function () {
   $(document).mousemove(function (e) {//body只是元素的显示范围，document是整个文档
   $("#fly").css("left", e.pageX).css("top", e.pageY);
   });
   });
   </script>
</head>
<body>
   <form id="form1" runat="server">
   <div id="fly" style=" position:absolute; ">
   <img src="images/1.jpg" width=100px; height="100px" />
   </div>
   </form>