ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryは非動的検索を実装します
今回は、非動的検索を実装するための jquery について説明します。jquery が非動的検索を実装するための 注意事項 について、実際のケースを見てみましょう。
<!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title>jquery实现静态搜索功能</title> <!-- 最新版本的 Bootstrap 核心 css 文件 --> <linkrel="stylesheet"href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="external nofollow"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <linkrel="stylesheet"href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"rel="external nofollow"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <scriptsrc="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <scriptsrc="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script> <style> .navbar-collapse { padding: 0; } .alert { margin: 20px; } .input-group select.form-control:last-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; margin-right: -1px; } .tab-content{ padding-top: 20px; } </style> </head> <body> <pclass="container"> <p> </p> <pclass="bs-example bs-example-tabs"data-example-id="togglable-tabs"> <pclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1"> <ulid="myTabs"class="nav navbar-nav nav-pills"role="tablist"> <lirole="presentation"class="active"> <ahref="#first"rel="external nofollow"role="tab"id="first-tab"data-toggle="tab"aria-controls="first"aria-expanded="true">克利夫兰 骑士</a> </li> <lirole="presentation"class=""> <ahref="#second"rel="external nofollow"role="tab"id="second-tab"data-toggle="tab"aria-controls="second"aria-expanded="false">金州 勇士</a> </li> <lirole="presentation"class=""> <ahref="#third"rel="external nofollow"role="tab"id="third-tab"data-toggle="tab"aria-controls="third"aria-expanded="false">波士顿 凯尔特人</a> </li> <lirole="presentation"class=""> <ahref="#fouth"rel="external nofollow"role="tab"id="fouth-tab"data-toggle="tab"aria-controls="fouth"aria-expanded="false">休斯顿 火箭</a> </li> <lirole="presentation"class="hidden"> <ahref="#search"rel="external nofollow"role="tab"id="search-tab"data-toggle="tab"aria-controls="search"aria-expanded="false">搜索结果tab隐藏</a> </li> </ul> <formclass="navbar-form navbar-right"> <pclass="form-group"> <pclass="input-group"> <pclass="input-group-btn"> <selectclass="form-control"id="searchSelect"> <optionvalue="all"selected="selected">全部</option> <optionvalue="name">姓名</option> <optionvalue="position">位置</option> <optionvalue="about">介绍</option> </select> </p> <inputtype="text"id="searchText"class="form-control"placeholder="搜索内容"> </p> </p> <buttontype="button"class="btn btn-default"id="searchBth">搜索</button> </form> </p> <pid="myTabContent"class="tab-content"> <prole="tabpanel"class="tab-pane fade active in"id="first"aria-labelledby="first-tab"> <tableclass="table table-bordered table-striped"> <thead> <tr> <th>号码</th> <th>姓名</th> <th>位置</th> <th>身高</th> <th>体重</th> <th>介绍</th> </tr> </thead> <tbody> <tr> <td>23</td> <td>勒布朗-詹姆斯</td> <td>小前锋</td> <td>203CM</td> <td>113KG</td> <td>四届NBA最有价值球员奖</td> </tr> <tr> <td>2</td> <td>凯尔-欧文</td> <td>控球后卫</td> <td>191CM</td> <td>88KG</td> <td>15-16赛季NBA总冠军</td> </tr> <tr> <td>0</td> <td>凯文-乐福</td> <td>大前锋/中锋</td> <td>208CM</td> <td>110KG</td> <td>15-16赛季获得NBA总冠军</td> </tr> <tr> <td>13</td> <td>特里斯坦-汤普森</td> <td>大前锋</td> <td>206CM</td> <td>103KG</td> <td>擅长拼抢进攻篮板球</td> </tr> <tr> <td>5</td> <td>J.R.史密斯</td> <td>得分后卫</td> <td>198CM</td> <td>102KG</td> <td>15-16赛季NBA总冠军</td> </tr> </tbody> </table> </p> <prole="tabpanel"class="tab-pane fade"id="second"aria-labelledby="second-tab"> <tableclass="table table-bordered table-striped"> <thead> <tr> <th>号码</th> <th>姓名</th> <th>位置</th> <th>身高</th> <th>体重</th> <th>介绍</th> </tr> </thead> <tbody> <tr> <td>30</td> <td>斯蒂芬-库里</td> <td>控球后卫</td> <td>191CM</td> <td>83.9KG</td> <td>两届NBA最有价值球员奖 三分精准</td> </tr> <tr> <td>11</td> <td>克莱-汤普森</td> <td>得分后卫</td> <td>201CM</td> <td>93KG</td> <td>14-15赛季NBA总冠军</td> </tr> <tr> <td>35</td> <td>凯文-杜兰特</td> <td>小前锋/大前锋</td> <td>211CM</td> <td>106.6KG</td> <td>得分手段多样投篮精准</td> </tr> <tr> <td>23</td> <td>德雷蒙德-格林</td> <td>前锋</td> <td>201CM</td> <td>104KG</td> <td>顶级锋线防守者</td> </tr> <tr> <td>9</td> <td>安德鲁-伊格达拉</td> <td>得分后卫</td> <td>198CM</td> <td>94KG</td> <td>迷你版勒布朗身体素质极佳</td> </tr> </tbody> </table> </p> <prole="tabpanel"class="tab-pane fade"id="third"aria-labelledby="third-tab"> <tableclass="table table-bordered table-striped"> <thead> <tr> <th>号码</th> <th>姓名</th> <th>位置</th> <th>身高</th> <th>体重</th> <th>介绍</th> </tr> </thead> <tbody> <tr> <td>4</td> <td>以赛亚-托马斯</td> <td>控球后卫</td> <td>175CM</td> <td>84KG</td> <td>球风强硬 能够突破 具备三分射程</td> </tr> <tr> <td>0</td> <td>埃弗里-布拉德利</td> <td>控球后卫</td> <td>188CM</td> <td>82KG</td> <td>15-16赛季最佳防守阵容第一阵容</td> </tr> <tr> <td>42</td> <td>艾尔-霍福德</td> <td>中锋</td> <td>208CM</td> <td>111KG</td> <td>球风全面的内线 中距离精准</td> </tr> <tr> <td>9</td> <td>贾伊-克劳德</td> <td>大前锋</td> <td>198CM</td> <td>107KG</td> <td>能量四射的双能锋</td> </tr> <tr> <td>36</td> <td>马库斯-斯玛特</td> <td>控球后卫</td> <td>193CM</td> <td>100KG</td> <td>敢于突破不惧身体对抗球风无私</td> </tr> </tbody> </table> </p> <prole="tabpanel"class="tab-pane fade"id="fouth"aria-labelledby="fouth-tab"> <tableclass="table table-bordered table-striped"> <thead> <tr> <th>号码</th> <th>姓名</th> <th>位置</th> <th>身高</th> <th>体重</th> <th>介绍</th> </tr> </thead> <tbody> <tr> <td>13</td> <td>詹姆斯-哈登</td> <td>后卫</td> <td>196CM</td> <td>99.8KG</td> <td>两次入选NBA最佳阵容第一阵容</td> </tr> <tr> <td>1</td> <td>特雷沃-阿里扎</td> <td>小前锋</td> <td>203CM</td> <td>95.3KG</td> <td>08-09赛季NBA总冠军</td> </tr> <tr> <td>2</td> <td>帕特里克-贝弗利</td> <td>控球后卫</td> <td>185CM</td> <td>84KG</td> <td>2015年全明星技巧挑战赛冠军</td> </tr> <tr> <td>10</td> <td>埃里克-戈登</td> <td>得分后卫</td> <td>191CM</td> <td>100.7KG</td> <td>属于攻击型得分后卫</td> </tr> <tr> <td>3</td> <td>莱恩-安德森</td> <td>大前锋</td> <td>208CM</td> <td>109KG</td> <td>投篮型内线出手快</td> </tr> </tbody> </table> </p> <!-- 显示搜索结果框架 --> <prole="searchTable"class="tab-pane fade"id="search"aria-labelledby="search-tab"> <h3>搜索结果</h3> <tableclass="table table-bordered table-striped"> <thead> <tr> <th>号码</th> <th>姓名</th> <th>位置</th> <th>身高</th> <th>体重</th> <th>介绍</th> </tr> </thead> <tbody> </tbody> </table> </p> </p> </p> <p><em>信息摘自互联网内容 若有冒犯请原谅 请留言反馈 立即删除</em></p> </p> <script> $('#myTabs a').click(function(e) { e.preventDefault() $(this).tab('show') }) $('#searchText').change(function() { console.log("dd"); var searchText = $(this).val(); var searchSelect = $('#searchSelect').val(); var $searchTr = ""; if(searchText != "") { $('#search tbody').html(""); //筛选搜索 if(searchSelect == "name") { $searchTr = $('#myTabContent').find('td:nth-child(2):contains(' + searchText + ')').parent(); } else if(searchSelect == "position") { $searchTr = $('#myTabContent').find('td:nth-child(3):contains(' + searchText + ')').parent(); } else if(searchSelect == "about") { $searchTr = $('#myTabContent').find('td:nth-child(6):contains(' + searchText + ')').parent(); } else { $searchTr = $('#myTabContent').find('td:contains(' + searchText + ')').parent(); } $searchTr.each(function(i, e) { $('#search tbody').append($(e).clone(true)); }); //如果没有搜索结果 显示一个报错p if($searchTr.length <= 0) { $('#search tbody').html('<tdcolspan="7"><pclass="alert alert-warning"role="alert">没有内容</p></td>') } $('#search-tab').tab('show'); } }).keyup(function() { $(this).change(); }) $('#searchBth').click(function() { $('#searchText').change(); }) </script> </body> </html>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がjqueryは非動的検索を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。