以下是 jQuery关键词查找元素高亮代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery关键词查找元素高亮代码</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="css/chinaz.css" />
<style>
</style>
</head>
<body>
<div class="container" role="main">
<h1>jQuery关键词查找元素高亮代码</h1>
<div class="faq">
<input type="search" value="" placeholder="Type some keywords (e.g. giza, babylon, colossus)" />
<ul>
<li id="faq-1">
<h2><a href="#faq-1">Great Pyramid of Giza</a></h2>
<div>
<p>The Great Pyramid of Giza (also known as the Pyramid of Khufu or the Pyramid of Cheops) is the oldest and largest of the three pyramids in the Giza Necropolis bordering what is now El Giza, Egypt. It is the oldest of the Seven Wonders of the Ancient World, and the only one to remain largely intact.</p>
</div>
</li>
<li id="faq-2">
<h2><a href="#faq-2">Hanging Gardens of Babylon</a></h2>
<div>
<p>The Hanging Gardens of Babylon were one of the Seven Wonders of the Ancient World, and the only one whose location has not been definitely established.</p>
<p>The Hanging Gardens were a distinctive feature of ancient Babylon. They were a great source of pride to the people, and were often described in accounts written by visitors to the city. Possibly built by King Nebuchadnezzar II in 600 BC, the gardens are believed to have been a remarkable feat of engineering: an ascending series of tiered gardens containing all manner of trees, shrubs, and vines. The gardens were said to have looked like a large green mountain constructed of mud bricks, rising from the center of the city.</p>
</div>
</li>
<li id="faq-3">
<h2><a href="#faq-3">ChinaZ To Sc.ChinaZ.Com</a></h2>
<div>
<p>The Statue of Zeus at Olympia was a giant seated figure, about 13 m (43 ft) tall, made by the Greek sculptor Phidias around 435 BC at the sanctuary of Olympia, Greece, and erected in the Temple of Zeus there. A sculpture of ivory plates and gold panels over a wooden framework, it represented the god Zeus sitting on an elaborate cedar wood throne ornamented with ebony, ivory, gold and precious stones. It was regarded as one of the Seven Wonders of the Ancient World until its eventual loss and destruction during the 5th century AD. No copy of the statue has ever been found, and details of its form are known only from ancient Greek descriptions and representations on coins.</p>
</div>
</li>
<li id="faq-4">
<h2><a href="#faq-4">Temple of Artemis</a></h2>
<div>
<p>The Temple of Artemis or Artemision (Greek: Ἀρτεμίσιον, Turkish: Artemis Tapınağı), also known less precisely as the Temple of Diana, was a Greek temple dedicated to the goddess Artemis and is one of the Seven Wonders of the Ancient World. It was located in Ephesus (near the modern town of Selçuk in present-day Turkey), and was completely rebuilt three times before its eventual destruction in 401. Only foundations and sculptural fragments of the latest of the temples at the site remain.</p>
</div>
</li>
<li id="faq-5">
<h2><a href="#faq-5">Mausoleum at Halicarnassus</a></h2>
<div>
<p>The Mausoleum at Halicarnassus or Tomb of Mausolus (Persian: آرامگاه هالیکارناسوس; Modern Greek: Μαυσωλείο της Αλικαρνασσού; Turkish: Halikarnas Mozolesi) was a tomb built between 353 and 350 BC at Halicarnassus (present Bodrum, Turkey) for Mausolus, a satrap in the Persian Empire, and Artemisia II of Caria, who was both his wife and his sister. The structure was designed by the Greek architects Satyros and Pythius of Priene.</p>
</div>
</li>
<li id="faq-6">
<h2><a href="#faq-6">Colossus of Rhodes</a></h2>
<div>
<p>The Colossus of Rhodes /roʊdz/ (Ancient Greek: ὁ Κολοσσὸς Ῥόδιος ho Kolossòs Rhódios) was a statue of the Greek titan-god of the sun Helios, erected in the city of Rhodes, on the Greek island of the same name, by Chares of Lindos in 280 BC. It is one of the Seven Wonders of the Ancient World. It was constructed to celebrate Rhodes' victory over the ruler of Cyprus, Antigonus I Monophthalmus, whose son unsuccessfully besieged Rhodes in 305 BC. Before its destruction in the earthquake of 226 BC, the Colossus of Rhodes stood over 30 metres (98 feet) high, making it one of the tallest statues of the ancient world.</p>
</div>
</li>
<li id="faq-7">
<h2><a href="#faq-7">Lighthouse of Alexandria</a></h2>
<div>
<p>The Lighthouse of Alexandria, sometimes called the Pharos of Alexandria (/ˈfɛərɒs/; Ancient Greek: ὁ Φάρος τῆς Ἀλεξανδρείας), was a lighthouse built by the Ptolemaic Kingdom between 280 and 247 BC which was between 393 and 450 ft (120 and 137 m) tall. It was one of the tallest man-made structures in the world for many centuries, and was regarded as one of the Seven Wonders of the Ancient World. Badly damaged by three earthquakes between AD 956 and 1323, it then became an abandoned ruin. It was the third longest surviving ancient wonder (after the Mausoleum at Halicarnassus and the extant Great Pyramid of Giza) until in 1480 the last of its remnant stones were used to build the Citadel of Qaitbay on the site. In 1994, French archaeologists discovered some remains of the lighthouse on the floor of Alexandria's Eastern Harbour.</p>
</div>
</li>
</ul>
<div class="faq__notfound"><p>No matches were found… Try “giza”.</p></div>
</div>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
'use strict';
// search & highlight
;( function( $, window, document, undefined )
{
var $container = $( '.faq' );
if( !$container.length ) return true;
var $input = $container.find( 'input' ),
$notfound = $container.find( '.faq__notfound' ),
$items = $container.find( '> ul > li' ),
$item = $(),
itemsIndexed = [];
$items.each( function()
{
itemsIndexed.push( $( this ).text().replace( /\s{2,}/g, ' ' ).toLowerCase() );
});
$input.on( 'keyup', function( e )
{
if( e.keyCode == 13 ) // enter
{
$input.trigger( 'blur' );
return true;
}
$items.each( function()
{
$item = $( this );
$item.html( $item.html().replace( /<span class="highlight">([^<]+)<\/span>/gi, '$1' ) );
});
var searchVal = $.trim( $input.val() ).toLowerCase();
if( searchVal.length )
{
for( var i in itemsIndexed )
{
$item = $items.eq( i );
if( itemsIndexed[ i ].indexOf( searchVal ) != -1 )
$item.removeClass( 'is-hidden' ).html( $item.html().replace( new RegExp( searchVal+'(?!([^<]+)?>)', 'gi' ), '<span class="highlight">$&</span>' ) );
else
$item.addClass( 'is-hidden' );
}
}
else $items.removeClass( 'is-hidden' );
$notfound.toggleClass( 'is-visible', $items.not( '.is-hidden' ).length == 0 );
});
})( jQuery, window, document );
// toggling items on title press
;( function( $, window, document, undefined )
{
$( document ).on( 'click', '.faq h2 a', function( e )
{
e.preventDefault();
$( this ).parents( 'li' ).toggleClass( 'is-active' );
});
})( jQuery, window, document );
// auto-show item content when show results reduces to single
;( function( $, window, document, undefined )
{
var $container = $( '.faq' );
if( !$container.length ) return true;
var $input = $container.find( 'input' ),
$items = $container.find( '> ul > li' ),
$item = $();
$input.on( 'keyup', function()
{
$item = $items.not( '.is-hidden' );
if( $item.length == 1 )
$item.addClass( 'js--autoshown is-active' );
else
$items.filter( '.js--autoshown' ).removeClass( 'js--autoshown is-active' );
});
})( jQuery, window, document );
</script>
</body>
</html>
CSS代码(defaults.css):
/*AUTHOR:Osvaldas Valutis,www.osvaldas.info*/
/* general */
*,h1,/* see normalize.css */
figure /* see normalize.css */
{font-size:100%;font-family:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;vertical-align:baseline;border:0;padding:0;margin:0;}
/* box sizing */
*,*::before,*::after,input[type='search'] /* see normalize.css */
{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* font smoothing */
*,*::before,*::after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/* main scrollbar */
html{-ms-overflow-style:-ms-autohiding-scrollbar;}
/* killing 300ms touch delay */
html{-ms-touch-action:manipulation;touch-action:manipulation;}
/* svg */
svg{fill:currentColor;vertical-align:middle;pointer-events:none;}
/* list */
ul,ol{list-style:none;}
/* text */
em{font-style:italic;}
b{font-weight:inherit;}
i{font-style:inherit;}
ins{text-decoration:none;}
/* form */
input,textarea,select{border-radius:0;border:none;outline:none;}
select:-moz-focusring{text-shadow:0 0 0 #000;color:transparent;}
input[type='text'],input[type='email'],input[type='number'],input[type='search'],input[type='tel'],input[type='url'],textarea,select{-webkit-appearance:none;-moz-appearance:textfield;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input::-ms-reveal{display:none;}
input::-ms-clear{display:none;}
button,input[type='submit']{border:none;background-color:transparent;}
CSS代码(normalize.css):
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change,without disabling * user zoom. */
html{font-family:sans-serif;/* 1 */
-ms-text-size-adjust:100%;/* 2 */
-webkit-text-size-adjust:100%;/* 2 */
}
/** * Remove default margin. */
body{margin:0;}
/* HTML5 display definitions ========================================================================== */
/** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. * Correct `block` display not defined for `main` in IE 11. */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
/** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome,Firefox,and Opera. */
audio,canvas,progress,video{display:inline-block;/* 1 */
vertical-align:baseline;/* 2 */
}
/** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]){display:none;height:0;}
/** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11,Safari,and Firefox < 22. */
[hidden],template{display:none;}
/* Links ========================================================================== */
/** * Remove the gray background color from active links in IE 10. */
a{background:transparent;}
/** * Improve readability when focused and also mouse hovered in all browsers. */
a:active,a:hover{outline:0;}
/* Text-level semantics ========================================================================== */
/** * Address styling not present in IE 8/9/10/11,Safari,and Chrome. */
abbr[title]{border-bottom:1px dotted;}
/** * Address style set to `bolder` in Firefox 4+,Safari,and Chrome. */
b,strong{font-weight:bold;}
/** * Address styling not present in Safari and Chrome. */
dfn{font-style:italic;}
/** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+,Safari,and Chrome. */
h1{font-size:2em;margin:0.67em 0;}
/** * Address styling not present in IE 8/9. */
mark{background:#ff0;color:#000;}
/** * Address inconsistent and variable font size in all browsers. */
small{font-size:80%;}
/** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
/* Embedded content ========================================================================== */
/** * Remove border when inside `a` element in IE 8/9/10. */
img{border:0;}
/** * Correct overflow not hidden in IE 9/10/11. */
svg:not(:root){overflow:hidden;}
/* Grouping content ========================================================================== */
/** * Address margin not present in IE 8/9 and Safari. */
figure{margin:1em 40px;}
/** * Address differences between Firefox and other browsers. */
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
/** * Contain overflow in all browsers. */
pre{overflow:auto;}
/** * Address odd `em`-unit font size rendering in all browsers. */
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}
/* Forms ========================================================================== */
/** * Known limitation:by default,Chrome and Safari on OS X allow very limited * styling of `select`,unless a `border` property is set. */
/** * 1. Correct color not being inherited. * Known issue:affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+,Safari,and Chrome. */
button,input,optgroup,select,textarea{color:inherit;/* 1 */
font:inherit;/* 2 */
margin:0;/* 3 */
}
/** * Address `overflow` set to `hidden` in IE 8/9/10/11. */
button{overflow:visible;}
/** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox,IE 8/9/10/11,and Opera. * Correct `select` style inheritance in Firefox. */
button,select{text-transform:none;}
/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */
button,html input[type="button"],/* 1 */
input[type="reset"],input[type="submit"]{-webkit-appearance:button;/* 2 */
cursor:pointer;/* 3 */
}
/** * Re-set default cursor for disabled elements. */
button[disabled],html input[disabled]{cursor:default;}
/** * Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
/** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */
input{line-height:normal;}
/** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing,padding,or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;/* 1 */
padding:0;/* 2 */
}
/** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`,it causes the cursor style of the * decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}
/** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */
input[type="search"]{-webkit-appearance:textfield;/* 1 */
-moz-box-sizing:content-box;-webkit-box-sizing:content-box;/* 2 */
box-sizing:content-box;}
/** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
/** * Define consistent border,margin,and padding. */
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
/** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend{border:0;/* 1 */
padding:0;/* 2 */
}
/** * Remove default vertical scrollbar in IE 8/9/10/11. */
textarea{overflow:auto;}
/** * Don't inherit the `font-weight` (applied by a rule above). * NOTE:the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup{font-weight:bold;}
/* Tables ========================================================================== */
/** * Remove most spacing between table cells. */
table{border-collapse:collapse;border-spacing:0;}
td,th{padding:0;}
分享到QQ
分享到微博
微信扫一扫
