h5关于jq静态查找，外加传值

最新推荐文章于 2021-08-24 15:08:14 发布
最新推荐文章于 2021-08-24 15:08:14 发布
阅读量177 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cold__Star/article/details/88315946
版权

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>缴费</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/layout.css">
</head>
<body>
    <div class=" navbar-fixed-top navTop">
        <div class="col-xs-3 col-sm-3 col-md-3" style="text-align: left;"><a href="javascript:history.back()"><span class="glyphicon glyphicon-chevron-left"></span></a></div>
        <div class="col-xs-6 col-sm-6 col-md-6">缴费</div>
        <div class="col-xs-3 col-sm-3 col-md-3 "style="text-align: right;"><a href="faceHome.html"><span class="glyphicon glyphicon-home"></span></a></div>
    </div>
    <div class="pay-input">
        <input type="text" value="房产快码、业主姓名、业主手机号" onfocus="if(this.value==this.defaultValue){this.value=''}" onblur="if(this.value==''){this.value=this.defaultValue}" >
        <button type="button" class="btn btn-success btn-sm" id="search">查询</button>
    </div>
    <input type="text" class="txt" style="display: none;">
    <div class="pay-msgBox">
        <ul class="pay-msg">
            <li class="details">
                <div>
                    <p class="details1">名门世家-1期-2栋-3单元-405室</p>
                    <p class="details2">张一 13607911234</p>
                </div>
                <button class="btn btn-default">缴费</button>
            </li>
            <li class="details">
                <div>
                    <p class="details1">名门世家-1期-2栋-3单元-405室</p>
                    <p class="details2">张二 13607911234</p>
                </div>
                <button class="btn btn-default" >缴费</button>
            </li>
            <li class="details">
                <div>
                    <p class="details1">名门世家-1期-2栋-3单元-405室</p>
                    <p class="details2">张三 13607911234</p>
                </div>
                <button class="btn btn-default">缴费</button>
            </li>
            <li class="details">
                <div>
                    <p class="details1">名门世家-1期-2栋-3单元-405室</p>
                    <p class="details2">张四 13607911234</p>
                </div>
                <button class="btn btn-default">缴费</button>
            </li>
            <li class="details">
                <div>
                    <p class="details1">名门世家-1期-2栋-3单元-405室</p>
                    <p class="details2">张五 13607911234</p>
                </div>
                <button class="btn btn-default">缴费</button>
            </li>
            <li class="details">
                <div>
                    <p class="details1">名门世家-1期-2栋-3单元-405室</p>
                    <p class="details2">张六 13607911234</p>
                </div>
                <button class="btn btn-default">缴费</button>
            </li>
          
        </ul>


    </div>
    </body>
</html>

js：

    <script src="js/jquery-3.1.0.min.js"></script>
    <script>
    $(function(){
             $(".txt").val('');
            //  封装发送数据detailMsg()
            function detailMsg(){
                $(".details button").on('click',function(){
                var msg=$(this).prev().html();
                $(".txt").val(msg);
                var s=$(".txt").val()
                console.log(msg);
                location.href="payDetails.html?"+"txt="+encodeURI( s );
            })
            }
            // 调用发送数据
            detailMsg();
        $("#search").on('click',function(){
          
             //遍历移除span标签，防止第二次搜索bug
            $(".changeStyle").each(function()
            {
                 var xx=$(this).html();  
                 $(this).replaceWith(xx);
                 console.log(xx);
             });
            
            //另存整个信息
            var str = $(".pay-msg").html();
            var searchText = $(this).prev().val();
             var notFind= $(".details").filter(":contains('"+searchText+"')");
             
            if ($.trim(searchText) != "" && "房产快码、业主姓名、业主手机号") {
                //定义span标签样式绿背景白字体
                var re="<span class='changeStyle'>"+searchText+"</span>";
                //替换搜索相关的所有内容
              var nn=str.replace( new RegExp(searchText,"gm"),re);
              //赋值
              $(".pay-msg").html(nn);
               //显示搜索内容
            $(".details").hide().filter(":contains('"+searchText+"')").show();
                
            }
            if(notFind.length==0){
                $(".details").show();
            }
            // 调用发送数据
            detailMsg();
            })
       
    })
    </script>

另一个页面接参数值：

  $(function(){
            var loc = location.href;
            var n1 = loc.length;//地址的总长度
            var n2 = loc.indexOf("=");//取得=号的位置
            var id = decodeURI(loc.substr(n2+1, n1-n2));//获取=号后面的内容
            $(".pay-msgDetails").html(id);//将内容展示出来
            var sum=0;
            for(var i=0;i<$('.moneyDetails').length;i++){
                sum+=parseFloat($(".moneyDetails")[i].innerHTML);
            }
            $(".money").text(sum);

        })
Cold__Star
关注
静态页面用JS实现搜索功能
Kevincram的博客
02-02 6963
调用方法 highlight（）： function encode(s){   return s.replace(/&/g,"&").replace(//g,">").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1"); } function decode(s){   return s.replace(/\\([\\\.\*\[\]\(\)\$\^])
uni-app嵌套H5，H5向uniapp传值
kinghuahua
08-06 5147
实时获取百度地图经纬度，传值uniapp
jquery实现静态搜索功能(可输入搜索文字)
12-04
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery实现静态搜索功能</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32Om
html静态jquery搜索,jquery - JQuery在静态HTML页面中搜索，突出显示找到的单词 - 堆栈内存溢出...
weixin_34284072的博客
06-04 161
我一直在尝试使用JQuery在静态HTML页面中进行简单搜索。 我不得不提到这是我第一次使用JQuery。我正在尝试更改页面中找到的单词的背景，这是我到目前为止所尝试的：myJavascript.js：$(document).ready(function(){$('#searchfor').keyup(function(){page = $('#all_text').text();searche...
js 在静态页面搜索
Black Shadow
04-25 2414
搜索 这是主体内容，有很多内容，很多很多啊啊啊……，比如1234abcd啊啊啊啊 这是主体内容，有很多内容，很多很多啊啊啊……，比如1234abcd啊啊啊啊 这是主体内容，有很多内容，很多很多啊啊啊……，比如1234abcd啊啊啊啊 这是主体内容，有很多内容，很多很多啊啊啊……，比如1234abcd啊啊啊啊 function $(id){ return document.g
jquery实现静态筛选功能
jiangbinwangyi的博客
06-02 572
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery实现静态搜索功能</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <...
手机H5页面静态模板.zip
11-03
30款网页模板，HTML+CSS+JS组成的静态网页，涵盖商城、博客、旅游、资讯、搜索和菜单类的页面，在网页中F12即可呈现手机和浏览器两种显示模式，拿来即用，直接二次开发（编辑图片和文字）。
H5+JQ模拟支付页面
10-11
在IT行业中，构建一个模拟支付页面是常见的需求，特别是在电商网站和移动应用中。...总的来说，这个“H5+JQ模拟支付页面”提供了一个便捷的起点，帮助开发者快速实现一个功能完备且具有良好用户体验的支付界面。
H5中利用js页面跳转并传值的常用方法
weixin_44719554的博客
04-18 1715
***在url路径后面带参数，参数与url之间用?隔开，参数与参数之间用&符隔开 *** window.location.href = "a.html?name=’kevin’&age=’20’"; 2.通过localStorage 和 sessionStorage 先存本地在取出数据 //用setItem来存数据，第一个参数是 名字，第二个参数是存数的数据 //存数据 win...
android与H5交互传参
05-29
本文将深入探讨Android与H5之间的参数传递，包括H5调用Android的方法以及Android调用JavaScript的方法。 首先，让我们关注H5调用Android的方法。Android提供了WebView组件，它允许在应用程序中嵌入一个浏览器内核，...
jQuery实现静态页面的多条件筛选查询
qq_40650064的博客
08-18 1804
jQuery实现静态页面的多条件筛选查询 静态页面实现table的条件筛选 html页面代码 姓名：<input type="text" id="id02" value="" placeholder="请输入姓名"/><br /><br /> 地址：<select id="address02"> <option value="全部" selected="selected">全部</option> <option v
使用 jQuery 实现搜索功能
-ELZ-
09-22 2918
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="./node_modules/jqu
【H5开发】02手把手带你开发H5列表页面 ~ 包含查询、重置、提交功能
Sabrina_cc的博客
08-24 2344
不要害怕孤独，应为这个世界上总有一个人在努力走向你。 上节回顾：从一个简单页面带你体验H5开发https://blog.csdn.net/Sabrina_cc/article/details/119865234 这一节我们来做一个稍微有点难度的页面。首先还是上原型和UI设计 了解主要功能：（1）数据库获取列表数据展示（2）年度、季度、部门、岗位的查询（3）重置（4）点击某一项弹出评分框-获取该条数据打分详情并展示（5）点击保存按钮发送请求、提交数据（6）点击提交按钮按照年份、季度提交...
html静态jquery搜索,jquery实现网页查找功能示例分享
weixin_39559382的博客
06-04 579
本文以查找车站名为例，仿12306官网查找车站售票时间页面效果，当用户输入关键字点击查找按钮或按回车键时，jQuery通过正则匹配内容，准确匹配关键字，并迅速将页面定位滚动到第一个匹配的位置，并显示相关信息(本例中附加信息为车站开始售票时间)。HTML页面需要放置一个输入框用来输入要查找的关键字，以及一个查找按钮，然后就是主体内容#content，里面包含着n个，即每个时间段开售车票的车站名。8：...
PHP中网页怎么实现查询,如何在html页面中实现查找功能
weixin_39751195的博客
03-10 1029
前台效果：html查找：相关教程推荐：html教程js//搜索功能var oldKey0 = "";var index0 = -1;var oldCount0 = 0;var newflag = 0;var currentLength = 0;function wordSearch(flg) {var key = $("#key").val(); //取key值if (!key) {return;...
JavaScript让HTML静态页面传值的方法
热门推荐
hsany330的专栏
12-08 1万+
刚有个好友问我HTML页面之间如何传递数据，这确实是比较棘手的问题，如果是动态页面，根本就不需要考虑这个问题，可以如果是一个纯HTML+JavaScript的应用，那么就无法使用数据库等操作，没有保存数据，当然我们可能想到了HTML5的离线数据储存，那样也可以实现数据的交换，现在我就给大家分享几个可以实现在HTML静态网页之间传值的方法。 假设我们有两个网页分别为index.html和sin
静态html页面关键字搜索高亮
tanzhenyan的博客
08-29 7305
静态html页面关键字搜索高亮最近项目要实现一个页面关键字搜索，刚好上网找了一款不错的插件，叫mark.js,官网地址,下面演示一个基于jq的案列，这个插件可以不依赖任何插件也可以实现这个功能，详情见官网例子。基于jq的小小例子：<!DOCTYPE> <html> <head> <title> new document </title> <meta name="ge
HTML通过JQ中load方法引入公共静态HTML模块事件无法生效
梦凝哲雪
05-22 1646
最近有一个小项目，公共的静态HTML模块居多 如下： 1、用户登陆与否显示的两种模块 2、搜索和导航模块 3、尾部版权和广告模块 然后多个界面都需要使用该模块，故想简化一点各个页面的代码量 方案一 – 工具把模块转换成js文件 再引入指定网页中 很久以前使用该方法 此时因为同步从上往下一次执行 也不干扰 事件的使用 但是还是嫌麻烦，需要对每个静态界面转换然后引入 <!-- 公共模块 html转成js 可以直接指定元素 --> <script src="comm/head.js"&g
H5抽奖活动静态页面：LuckDraw.zip
由于文件描述中提到的“抽奖”、“静态”和“H5”，我们可以推断这是一个针对移动端或桌面端的交互式网页应用。 2. HTML在抽奖页面的作用： HTML（超文本标记语言）是构建网页内容的基础。在LuckDraw.zip中，HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值