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>
时间： 2024-08-29 19:20:28