html如何實(shí)現(xiàn)查找框功能？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有瑞昌免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

最近在搞一個(gè)被很多人改了的框架，天天看代碼看的頭的暈了，不過(guò)感覺(jué)進(jìn)步還挺大的，自己做了一個(gè)后臺(tái)可配置前臺(tái)查看兩個(gè)庫(kù)不同數(shù)據(jù)范圍的東西，還挺滿意，那天拿出來(lái)分享一下，今天先說(shuō)一個(gè)這幾天做的功能，就是html頁(yè)面的查找功能。

這個(gè)功能主要是實(shí)現(xiàn)在查找框內(nèi)輸入字符，之后按后面的上一個(gè)下一個(gè)按鈕，會(huì)自動(dòng)把查詢區(qū)域內(nèi)的匹配字符用特殊的樣式標(biāo)記，之后可以繼續(xù)按上一個(gè)下一個(gè)按鈕把按照順序?yàn)g覽匹配字符，并把當(dāng)前匹配的字符用另一種樣式與其他匹配字符加以區(qū)別。

前臺(tái)顯示大概是這個(gè)樣子：

html是這樣：

        

            查找：
            
            
            
        
    

script代碼：

接下來(lái)記一下實(shí)現(xiàn)原理：

首先先把上一次的查詢結(jié)果清除掉，然后根據(jù)key的值，用正則表達(dá)式把區(qū)域內(nèi)所有匹配的字符全都加上特殊的樣式，比如方法中就全部加了一個(gè)類名為result的span標(biāo)簽，用odKey0變量記錄key的值（下次再進(jìn)入先比較如果一樣的話說(shuō)明是要看下一個(gè)或者上一個(gè)的內(nèi)容，就不用在進(jìn)入用正則表達(dá)式匹配了），oldCount0記錄總共查詢出來(lái)的個(gè)數(shù)，newflag置0（如果不是初次查詢newflag為1）。

接著進(jìn)入getNext方法，flg表示用戶按下的是上一個(gè)還是下一個(gè)按鈕，用index0記錄當(dāng)前查看的是哪一個(gè)匹配字符，與oldCount0比較，確定是遞增或遞減還是置0（如果大于oldCount0或者小于0，就要重新開(kāi)始）。

focusMove方法就是使頁(yè)面定位到當(dāng)前元素的操作。

學(xué)到的jquery方法：

eq() 選擇器：選擇器選取帶有指定 index 值的元素。例如：$(".contrast .result:eq(1)")，就是選擇類名contrast元素中的第二個(gè)類名為result的元素。

parents()方法：元素的所有父元素。$("p").parents('.contrast-wrap')，p元素所有類名為contrast-wrap的元素。

replace()方法：用指定的html內(nèi)容替換被選元素，注意是把被選元素的元素也替換掉。

offset()方法：返回或設(shè)置匹配元素相對(duì)于文檔的偏移（位置）。

scrollTop()方法：返回或設(shè)置匹配元素的滾動(dòng)條的垂直位置。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)html如何實(shí)現(xiàn)查找框功能大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

網(wǎng)站欄目：html如何實(shí)現(xiàn)查找框功能-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://weahome.cn/article/eccsi.html