要做一个点击事件实现显示隐藏的功能，效果如下图
我用的是toggle，很简单，代码如下
1 JS代码 2 $(".show span").toggle(function(){ 3 $(".goods ul li").next().show(); 4 $(".show > a").find("span").text("隐藏全部内容") 5 }, 6 function(){ 7 $(".goods ul li:gt(5):not(:last)").hide(); 8 $(".show > a").find("span").text("显示全部内容") 9 }) 10 HTML代码 11 <div class="goods"> 12 <ul> 13 <li> 14 <a href="javascript:void(0)">联想</a> 15 </li> 16 <li> 17 <a href="javascript:void(0)">宏基</a> 18 </li> 19 <li> 20 <a href="javascript:void(0)">苹果</a> 21 </li> 22 <li> 23 <a href="javascript:void(0)">华硕</a> 24 </li> 25 <li> 26 <a href="javascript:void(0)">戴尔</a> 27 </li> 28 <li> 29 <a href="javascript:void(0)">英特尔</a> 30 </li> 31 <li> 32 <a href="javascript:void(0)">酷派</a> 33 </li> 34 <li> 35 <a href="javascript:void(0)">神州</a> 36 </li> 37 <li> 38 <a href="javascript:void(0)">摩天</a> 39 </li> 40 <li> 41 <a href="javascript:void(0)">战神</a> 42 </li> 43 <li> 44 <a href="javascript:void(0)">战神1</a> 45 </li> 46 <li> 47 <a href="javascript:void(0)">战神2</a> 48 </li> 49 <li> 50 <a href="javascript:void(0)">战神3</a> 51 </li> 52 <li> 53 <a href="javascript:void(0)">战神4</a> 54 </li> 55 <li> 56 <a href="javascript:void(0)">战神5</a> 57 </li> 58 <li> 59 <a href="javascript:void(0)">战神6</a> 60 </li> 61 <li> 62 <a href="javascript:void(0)">战神7</a> 63 </li> 64 <li> 65 <a href="javascript:void(0)">战神8</a> 66 </li> 67 <li> 68 <a href="javascript:void(0)">战神9</a><p> 69 </li> 70 <li> 71 <a href="javascript:void(0)">其他电脑</a><p> 72 </li> 73 </ul> 74 </div>
实现页面搜索
代码如下
JS代码 $("#keyname").keyup(function(){ $("#tabless tbody tr").hide().filter(":contains('"+($(this).val())+"')").show(); }) HTML代码 <div> <input id="keyname" type="text"/> <table id="tabless"> <tr><td>姓名</td> <td>性别</td> <td>年龄</td> <td>收入</td></tr> <tr> <td>王总</td> <td>女</td> <td>222</td> <td>342323</td> </tr> <tr> <td>老张</td> <td>男</td> <td>13</td> <td>45000</td> </tr> <tr> <td>老王</td> <td>男</td> <td>13</td> <td>45000</td> </tr><tr> <td>老李</td> <td>男</td> <td>13</td> <td>45000</td> </tr><tr> <td>老洪</td> <td>男</td> <td>13</td> <td>45000</td> </tr><tr> <td>老校</td> <td>男</td> <td>13</td> <td>45000</td> </tr> </table> </div>
还有鼠标滑过实现添加元素，操作dom结构
代码如下：
HTML代码 <div class="pic"> <img src="apple.png" class="imgs" title="我是苹果"/> <img src="9.png" class="imgs" title="我是知乎"/> <img src="logo.gif" class="imgs" title="博客园"/> </div> JS代码 var x=10, y=20;//定义显示的坐标位置 $(".imgs").mouseover(function(e){ this.myti=this.title;//获取当前的title var tooltop="<div id='tooltop'><img src='"+this.src+"' alt='产品预览图' title='"+this.myti+"'/></div>"; $("body").append(tooltop);//将需要添加的内容，用append添加到之后 $("#tooltop").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show("fast");//将添加的元素显示 }).mouseout(function(){ this.title=this.myti; $("#tooltop").remove();//鼠标滑过后再删除元素 }).mousemove(function(e){ $("#tooltop").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}); });