从品牌网站建设到网络营销策划,从策略到执行的一站式服务
html如何实现查找框功能?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
10年积累的成都网站建设、网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先建设网站后付款的网站建设流程,更有瑞昌免费网站建设让你可以放心的选择与我们合作。最近在搞一个被很多人改了的框架,天天看代码看的头的晕了,不过感觉进步还挺大的,自己做了一个后台可配置前台查看两个库不同数据范围的东西,还挺满意,那天拿出来分享一下,今天先说一个这几天做的功能,就是html页面的查找功能。
这个功能主要是实现在查找框内输入字符,之后按后面的上一个下一个按钮,会自动把查询区域内的匹配字符用特殊的样式标记,之后可以继续按上一个下一个按钮把按照顺序浏览匹配字符,并把当前匹配的字符用另一种样式与其他匹配字符加以区别。
前台显示大概是这个样子:
html是这样:
script代码:
接下来记一下实现原理:
首先先把上一次的查询结果清除掉,然后根据key的值,用正则表达式把区域内所有匹配的字符全都加上特殊的样式,比如方法中就全部加了一个类名为result的span标签,用odKey0变量记录key的值(下次再进入先比较如果一样的话说明是要看下一个或者上一个的内容,就不用在进入用正则表达式匹配了),oldCount0记录总共查询出来的个数,newflag置0(如果不是初次查询newflag为1)。
接着进入getNext方法,flg表示用户按下的是上一个还是下一个按钮,用index0记录当前查看的是哪一个匹配字符,与oldCount0比较,确定是递增或递减还是置0(如果大于oldCount0或者小于0,就要重新开始)。
focusMove方法就是使页面定位到当前元素的操作。
学到的jquery方法:
eq() 选择器:选择器选取带有指定 index 值的元素。例如:$(".contrast .result:eq(1)")
,就是选择类名contrast元素中的第二个类名为result的元素。
parents()方法:元素的所有父元素。$("p").parents('.contrast-wrap')
,p元素所有类名为contrast-wrap的元素。
replace()方法:用指定的html内容替换被选元素,注意是把被选元素的元素也替换掉。
offset()方法:返回或设置匹配元素相对于文档的偏移(位置)。
scrollTop()方法:返回或设置匹配元素的滚动条的垂直位置。
感谢各位的阅读!看完上述内容,你们对html如何实现查找框功能大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联网站制作公司行业资讯频道。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图