jQuery实现的快速查找

浏览数：60 / 时间：2015年06月09日

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>jQuery实现的快速查找</title>
 6 <style>
 7 <!--
 8 .on{ font-weight:700; color:#FF33FF;}
 9 -->
10 </style>
11 <script type="text/javascript" src="http://www.css88.com/demo/jQuery/jquery-1.3/jquery-1.3.min.js"></script> 
12 </head>
13 
14 <body>
15 <input type="text" name="index" id="index" /> 
16 <input type="button" onclick=‘search_do();‘ value=‘搜索电影‘/>
17 <ul>
18     <li>我的名字叫愚人码头</li>
19     <li>浙江舟山人，在杭州工作</li>
20     <li>我的个人博客网址是</li>
21     <li>我的职业是前端开发工程师，其实我现在做美工！</li>
22     <li>公司是浙江搜道网络技术有限公司，公司网址是</li>
23     <li>前端开发的主要工作职责是开发高性能的客户端页面</li>
24     <li>前端开发的技能要（X）HTML，CSS，javascript</li>
25 </ul>
26 </body>
27 <script type="text/javascript">
28 <!--
29         function search_do(){
30             var index = $.trim($(‘#index‘).val().toString());//去掉两头空格
31             if(index == ‘‘){
32                 $(‘li‘).removeClass(‘on‘);return false;
33             }
34             var parent = $(‘ul‘);
35             $(‘li‘).removeClass(‘on‘);
36             //选择包含文本框值的所有加上focus类样式，并把它（们）移到ul的最前面
37             $("li:contains(‘" + index + "‘)").prependTo(parent).addClass(‘on‘);
38         }
39 //-->
40 </script>
41 </html>