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

            var _currentTop = $this.offset().top;
            var _scrollTop = $(document).scrollTop();
            if (_scrollTop > _top) {
                $this.offset({
                    top: _scrollTop + obj.top,
                    left: _left
                });
            } else {
                $this.offset({
                    top: _top,
                    left: _left
                });
            }
        });
        return $this;
    };
})(jQuery);

接着，我们调用fixDiv()。
 
$(function(){
    $(“#search_box”).fixDiv({ top: 0 });
});

接下来，最关键的实现查找功能。当输入关键字后，点击查找按钮或按回车键，调用查找函数highlight()。
 
$(function(){
    …
    $(‘#search_btn’).click(highlight);//点击search时，执行highlight函数；
    $(‘#searchstr’).keydown(function (e) {
        var key = e.which;
        if (key == 13) highlight();
    })
    …
});

在函数highlight()需要做很多事情，1.清空上次高亮显示内容，2.隐藏并清空提示信息，3.判断输入内容为空的情况，4.获取输入的关键字，并与页面内容进行正则匹配，并用flag标记查找到结果，将查找结果高亮显示，5.根据查找结果的数量，确定提示信息的内容和位置偏移量，准确定位并显示提示信息。请看具体代码：

$(function(){
    …
    var i = 0;
    var sCurText;
    function highlight(){
        clearSelection();//先清空一下上次高亮显示的内容；