jQuery實(shí)現(xiàn)搜索頁面關(guān)鍵字的功能
在一篇文章中查找關(guān)鍵字,找到后高亮顯示。
具體代碼:
<html> <head> <title>Search</title> <style type="text/css"> p { border:1px solid black;width:500px;padding:5px;} .highlight { background-color:yellow; } </style> </head> <body> <form> <p> I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it. </p> <p> I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it. </p> <p> I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it. </p> <input type="text" id="text"/> <input type="button" id="search" value="Search"/> <input type="button" id="clear" value="Clear"/> </form> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#search').click(highlight);//點(diǎn)擊search時(shí),執(zhí)行highlight函數(shù); $('#clear').click(clearSelection);//點(diǎn)擊clear按鈕時(shí),執(zhí)行clearSelection函數(shù); function highlight() { clearSelection();//先清空一下上次高亮顯示的內(nèi)容; var searchText = $('#text').val();//獲取你輸入的關(guān)鍵字; var regExp = new RegExp(searchText, 'g');//創(chuàng)建正則表達(dá)式,g表示全局的,如果不用g,則查找到第一個(gè)就不會繼續(xù)向下查找了; $('p').each(function()//遍歷文章; { var html = $(this).html(); var newHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>');//將找到的關(guān)鍵字替換,加上highlight屬性; $(this).html(newHtml);//更新文章; }); } function clearSelection() { $('p').each(function()//遍歷 { $(this).find('.highlight').each(function()//找到所有highlight屬性的元素; { $(this).replaceWith($(this).html());//將他們的屬性去掉; }); }); } }); </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JQuery+JS實(shí)現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果
- jquery+json實(shí)現(xiàn)的搜索加分頁效果
- 基于jquery的頁面劃詞搜索JS
- jquery中用jsonp實(shí)現(xiàn)搜索框功能
- jQuery Jsonp跨域模擬搜索引擎
- jquery 表格排序、實(shí)時(shí)搜索表格內(nèi)容(附圖)
- jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表(可搜索、可分頁)
- jQuery UI仿淘寶搜索下拉列表功能
- jQuery下拉美化搜索表單效果代碼分享
- 基于jQuery實(shí)現(xiàn)頁面搜索功能
- JavaScript前端頁面搜索功能案例【基于jQuery】
相關(guān)文章
Jquery仿IGoogle實(shí)現(xiàn)可拖動窗口示例代碼
這個(gè)拖動窗口是根據(jù)一個(gè)Jquery的框架直接做出來的:easywidgets,廢話就不多說了,直接把源代碼貼出來,讓大家學(xué)習(xí)2014-08-08淺談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對象的方法
下面小編就為大家?guī)硪黄獪\談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對象的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11jquery動態(tài)調(diào)整div大小使其寬度始終為瀏覽器寬度
需要設(shè)置寬度為整個(gè)瀏覽器寬度的div,當(dāng)然我們可以使用相對布局的方式做到這一點(diǎn),下面是具體實(shí)現(xiàn),大家可以參考下2014-06-06jQuery實(shí)現(xiàn)拖動調(diào)整表格單元格大小的代碼實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)拖動調(diào)整表格單元格大小的代碼實(shí)例,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-01-01jquery 表單進(jìn)行客戶端驗(yàn)證demo
用jquery對表單進(jìn)行客戶端驗(yàn)證demo ,學(xué)習(xí)jquery的朋友可以參考下。2009-08-08Jquery中的$.each獲取各種返回類型數(shù)據(jù)的使用方法
each()方法能使DOM循環(huán)結(jié)構(gòu)簡潔,不容易出錯。each()函數(shù)封裝了十分強(qiáng)大的遍歷功能,使用也很方便,它可以遍歷一維數(shù)組、多維數(shù)組、DOM, JSON 等等,在javaScript開發(fā)過程中使用$each可以大大的減輕我們的工作量。2015-05-05JQuery設(shè)置時(shí)間段下拉選擇實(shí)例
這篇文章主要介紹了JQuery設(shè)置時(shí)間段下拉選擇的實(shí)現(xiàn)方法,實(shí)例分析了根據(jù)時(shí)間段設(shè)置下拉選項(xiàng)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12基于jQuery和CSS3制作數(shù)字時(shí)鐘附源碼下載(jquery篇)
本篇文章基于jquery讓數(shù)字時(shí)鐘真正的跑起來,實(shí)現(xiàn)一個(gè)帶有日期和星期的網(wǎng)頁版數(shù)字時(shí)鐘,效果非常逼真,感興趣的朋友一起看看吧2015-11-11