jquery实现网页查找功能示例分享

            i++;
            if (i > $(“.highlight”).size() – 1) {
                i = 0;
            }
        }
    }
      …
});

上述代码中提到的clearSelection()函数用来清空高亮效果，代码如下：

 
function clearSelection(){
        $(‘p’).each(function(){
            //找到所有highlight属性的元素；
            $(this).find(‘.highlight’).each(function(){
                $(this).replaceWith($(this).html());//将他们的属性去掉；
            });
        });
}

最后加上showTips()函数，该函数用来显示在输入查找关键字后的查找结果提示信息。

 
$(function(){
    var tipsDiv = ‘<div class=”tipsClass”></div>’; 
    $( ‘body’ ).append( tipsDiv );
    function showTips( tips, height, time,left ){ 
        var windowWidth = document.documentElement.clientWidth; 
        $(‘.tipsClass’).text(tips);
        $( ‘div.tipsClass’ ).css({ 
        ‘top’ : height + ‘px’, 
        ‘left’ :left + ‘px’, 
        ‘position’ : ‘absolute’, 
        ‘padding’ : ‘8px 6px’, 
        ‘background’: ‘#000000’, 
        ‘font-size’ : 14 + ‘px’, 
        ‘font-weight’: 900,
        ‘margin’ : ‘0 auto’, 
        ‘text-align’: ‘center’, 
        ‘width’ : ‘auto’, 
        ‘color’ : ‘#fff’,