显示隐藏，页面搜索，操作DOM

要做一个点击事件实现显示隐藏的功能，效果如下图

我用的是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"});
});