最近在搞一個被很多人改了的框架，天天看代碼看的頭的暈了，不過感覺進步還挺大的，自己做了一個后臺可配置前臺查看兩個庫不同數據范圍的東西，還挺滿意，那天拿出來分享一下，今天先說一個這幾天做的功能，就是html頁面的查找功能。

這個功能主要是實現在查找框內輸入字符，之后按后面的上一個下一個按鈕，會自動把查詢區域內的匹配字符用特殊的樣式標記，之后可以繼續按上一個下一個按鈕把按照順序瀏覽匹配字符，并把當前匹配的字符用另一種樣式與其他匹配字符加以區別。

前臺顯示大概是這個樣子：

html是這樣：

 p >
script代碼：
 script //搜索功能 var oldKey0 =  var index0 = -1;var oldCount0 = 0; var newflag = 0; var currentLength = 0; function wordSearch(flg) { var key = $( #key ).val(); //取key值 if (!key) { return; //key為空則退出 getArray(); focusNext(flg); function focusNext(flg) { if (newflag == 0) {//如果新搜索,index清零 index0 = 0; if (!flg) { if (oldCount0 != 0) {//如果還有搜索 if (index0 oldCount0) {//左邊如果沒走完，走左邊 focusMove(index0); index0++; } else if (index0 == oldCount0) {//都走完了 index0 = 0; focusMove(index0); index0++; else { index0 = 0;//沒確定 focusMove(index0); index0++; } else { if (oldCount0 != 0) {//如果還有搜索 if (index0 = oldCount0 index0 0) {//左邊如果沒走完，走左邊 index0--; focusMove(index0); } else if (index0 == 0) {//都走完了 index0 = oldCount0; index0-- focusMove(index0); function getArray() { newflag = 1; $( .contrast .result ).removeClass( res  var key = $( #key ).val(); //取key值 if (!key) { oldKey0 =  return; //key為空則退出 if (oldKey0 != key || $( .current ).length != currentLength) { //重置 index0 = 0; var index = 0; $( .contrast .result ).each(function () { $(this).replaceWith($(this).html()); pos0 = new Array(); if ($( .contrast-wrap ).hasClass( current )) { currentLength = $( .current ).length; $( .current .contrast ).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm ), span id= result + (index++) + >
接下來記一下實現原理：
首先先把上一次的查詢結果清除掉，然后根據key的值，用正則表達式把區域內所有匹配的字符全都加上特殊的樣式，比如方法中就全部加了一個類名為result的span標簽，用odKey0變量記錄key的值（下次再進入先比較如果一樣的話說明是要看下一個或者上一個的內容，就不用在進入用正則表達式匹配了），oldCount0記錄總共查詢出來的個數，newflag置0（如果不是初次查詢newflag為1）。
接著進入getNext方法，flg表示用戶按下的是上一個還是下一個按鈕，用index0記錄當前查看的是哪一個匹配字符，與oldCount0比較，確定是遞增或遞減還是置0（如果大于oldCount0或者小于0，就要重新開始）。
focusMove方法就是使頁面定位到當前元素的操作。
學到的jquery方法：
eq() 選擇器：選擇器選取帶有指定 index 值的元素。例如：$( .contrast .result:eq(1) )，就是選擇類名contrast元素中的第二個類名為result的元素。
parents()方法：元素的所有父元素。$( p ).parents( .contrast-wrap )，p元素所有類名為contrast-wrap的元素。
replace()方法：用指定的html內容替換被選元素，注意是把被選元素的元素也替換掉。
offset()方法：返回或設置匹配元素相對于文檔的偏移（位置）。
scrollTop()方法：返回或設置匹配元素的滾動條的垂直位置。
總結：以上就是本篇文的全部內容，希望能對大家的學習有所幫助。
相關推薦：
HTML的列表、表單、語義化使用方法總結
使用HTML5中postMessage知識點解決Ajax中POST跨域問題
Chart.js 輕量級HTML5圖表繪制工具庫使用步驟詳解
以上就是html查找框功能的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。