【Jquery】前端学习记录（2）【身份证、左侧导航、模糊搜索】

最新推荐文章于 2023-02-21 22:00:24 发布

时间飞逝子非鱼

最新推荐文章于 2023-02-21 22:00:24 发布

阅读量294

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/lgysjfs/article/details/78843467

版权

Jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前端学习记录（2）【身份证、左侧导航、模糊搜索】

判断身份证号码

//判断身份证号码
var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"} 
function isCardID(sId){
     var iSum=0 ;
     var info="" ;
     if(!/^\d{17}(\d|x)$/i.test(sId)) return "你输入的身份证长度或格式错误";
     sId=sId.replace(/x$/i,"a");
     if(aCity[parseInt(sId.substr(0,2))]==null) return "你的身份证地区非法";
     sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
     var d=new Date(sBirthday.replace(/-/g,"/")) ;
     if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "身份证上的出生日期非法";
     for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) ;
     if(iSum%11!=1) return "你输入的身份证号非法";
     //aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女");//此次还可以判断出输入的身份证号的人性别
     return true;
}

点击左侧导航

//CSS代码
.menu-list dd{ background:#222a69;color: #fff; border:none; font-size:15px;}
.menu-list.active dt span{border:none;}
.menu-wraper,.iframe-wraper{ box-shadow:none;}
div.body{margin-top:0px;}
.menu-list dt {border:none; font-weight:normal; font-size:15px;}
.menu-list dt>span，.menu-wraper .menu.active,.menu-wraper .menu.active{border:none;}
.menu-list.active dt{color:#fff; background:#236eed;}
.menu-list dd.active, .menu-list dd:hover{ background:#222a69; color:#236eed;}

//标签代码
<dl class="menu-list index_menu-list icon-jiaoshiguanli2 hidden" data-repeat="list" style="height:42px;padding-bottom:1px;">
    <dt>
        <span class="re">
            <img data-img="icon" class="linkimg" />
            <i class="listto"></i>
            <span data-text="name"></span>
        </span>
    </dt>
    <dd data-repeat="children" class="hidden">
        <span class="dturl" data-iframeurl="url">
            <!--<i class="c">●</i>-->
            <span data-text="name" class="dtmsg"></span>
        </span>
    </dd>
</dl>

//js代码
//点击左侧导航
$('.index_menu-list dt').click(function(){
    var dl=$(this).closest('dl');
    var speed=200;
    var dl=$(this).closest('dl');
    var minh=42;
    var h=dl.children('dd:visible').size()*40+minh;         
    if(!dl.hasClass('active')){
        if(dl.siblings('.active').size()>0){
            dl.siblings('.active').removeClass('active').animate({'height':minh+'px'},speed);
        }   
        dl.addClass('active').animate({'height':h+'px'},speed);

    }else{
        dl.animate({'height':minh+'px'},speed).removeClass('active');
    }   
});
//点击左侧列表
$('.index_menu-list dd').click(function(){
    $(".nextlinkto").html("");
    var dtmsg = $(this).find(".dtmsg").html();
    var dturl = $(this).find(".dturl").attr("data-iframeurl");
    $(".nextlinkto").append("<em class='line'></em><span data-iframeurl="+dturl+" onclick='nextlink(this)' class='nextlink fg h50 lh50 aunline7'>"+dtmsg+"</span>");
    var name=$(this).attr('data-iframeName');
    var permission = $(this).attr('data-permission');
    var url=$(this).find("span").attr('data-iframeurl');
    var formal = $(this).attr('data-formal');
    if(permission=="false"){
        url = "/freeVersionTips.do?formal="+formal+"&menuCode="+menuCode;
    }
    $(this).siblings('.active').removeClass('active');
    $(this).addClass('active');
    openIframe(url,name);
});

高亮模糊搜索

<div class="exam_examSubject exam_list1">
    <div class="searchNotice vw100s h40 lh40 bghhh">
        <input type="text" class="searchNoticeinput ti w200 h30 lh30 bd1 ml10" name="" id="" value="" placeholder="请输入专业名称进行搜索" />
        <!--<input type="button" name="" id="exam_searchBtn" class="exam_searchBtn cm fg noticeSearch" value="查询" style="margin-left: 10px;margin-top: 2px;" />-->
    </div>
    <input type="button" name="" class="exam_searchBtn fg mb10" onclick="showadd()" value="新增新专业" />
    <table class="exam_table exam_subList mb10" border="0" cellspacing="" cellpadding="">
        <tr>
            <th>专业名称</th>
            <th>英文名称</th>
            <th>起止级</th>
            <th>起止级英文</th>
            <th>操作</th>
        </tr>
        <tr data-repeat="list" class="hidden noticelist">
            <td>
                <span data-text="name" class="gradename"></span>
            </td>
            <td>
                <span data-text="nameEN" class="gradename"></span>
            </td>
            <td>
                <span data-text="remark"></span>
            </td>
            <td>
                <span data-text="introduceEN"></span>
            </td>
            <td>
                <a href="#!" class="exam_change anot mr10" onclick="showsub(this)">查看</a>
                <span data-text="id" class="hidden"></span>
                <a href="#!" class="exam_delete anot ml10" onclick="deleteOutlist(this)">删除</a>
                <span data-text="id" class="hidden"></span>
            </td>
        </tr>
    </table>
    <span class="exam_numBox color999 ml10" style="padding-left: 5px;">共 <em class="exam_searchNum">0</em> 条记录</span>
</div>

//点击search时，执行highlight函数；
$('.searchNoticeinput').on("keydown",function(){
    var searchval = $('.searchNoticeinput').val();
    if(event.keyCode == "13"){
        if(searchval == ""){
            query();
        }else{
            highlight();
        }
    }
}); 
 function highlight()
 {
     clearSelection();//先清空一下上次高亮显示的内容；
     var searchText = $('.searchNoticeinput').val();//获取你输入的关键字；
     var regExp = new RegExp(searchText, 'g');//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了；
     var noticeTitle = $('.gradename');
//      var noticeContent = $('.noticeContent');
     for(var i=1,len=noticeTitle.length;i<len;i++){
        var noticeTitles = noticeTitle.eq(i);
         var html = noticeTitles.html();
         var newHtml = html.replace(regExp, '<a class="thiss" >'+searchText+'</a>');//将找到的关键字替换，加上highlight属性；
         noticeTitles.html(newHtml);//更新文章；
  }
//      for(var i=1,len=noticeContent.length;i<len;i++){
//          var noticeContents = noticeContent.eq(i);
//          var html = noticeContents.html();
//          var newHtml = html.replace(regExp, '<a class="colorf25" >'+searchText+'</a>');//将找到的关键字替换，加上highlight属性；
//          noticeContents.html(newHtml);//更新文章；
//      }
     setTimeout(function(){
      var noticelist = $(".noticelist");
      for(var i=1,len=noticelist.length;i<len;i++){
        if(noticelist.eq(i).find("a").hasClass("thiss")){
            noticelist.eq(i).removeClass("hidden");
        }else{
            noticelist.eq(i).addClass("hidden");
        }
   }
      setTimeout(function(){
        var num = $(".noticelist:visible") .length;
        $(".exam_searchNum").html(num);
      },200)
     },200)
 }
 function clearSelection()
 {
     $('.noticeTitle').each(function()//遍历
     {
         $(this).find('.colorf25').each(function()//找到所有highlight属性的元素；
         {
             $(this).replaceWith($(this).html());//将他们的属性去掉；
         });
     });
 }