jQuery实现选择方法和保护信息方法

最近呢!一直在学习jQuery语法,也没时间发布文章,现在学的差不多了,先跟大家分享下学习感受吧!JavaScript学过后,再学习jQuery语法,应该是简单的,但我总是容易把它们搞混,学起来很是难受!现在基本上能分清了,jQuery是基于JavaScript写的一个包,超级好用,能节省大量的代码!写起来的效率超级高,所以,想学好JavaScript的人,最好再进阶下,学习下jQuery语法,学好后,会有质的提升。

下面我就让大家看看现在用jQuery语法写写选择和保护信息有多简单吧!


 

<html>
<head>
    <title>Title</title>
    <script src="js/My97DatePicker/WdatePicker.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<center>
    <form action="ApplyServlet?m=searchApply" method="post">
        申请人:<input type="text" name="name" value="${name}">
        <input type="submit" value="搜索"/>
    <table  border="1" cellspacing="0">
          <thead>
          <tr>
              <td></td>
              <td>编号</td>
              <td>名称</td>
              <td>身份证号</td>
              <td>手机号</td>
              <td>报销金额</td>
              <td>申请报销时间</td>
              <td>申请状态</td>
              <td>备注</td>
              <td>报销类别</td>
              <td>操作</td>
          </tr>
          </thead>
          <tbody>
           <c:forEach  items="${applyList}" var="as">
                 <tr class="t">
                     <td>
                         <input type="checkbox" class="ck" value="${as.aid}"/>
                     </td>
                     <td>${as.aid}</td>
                     <td>${as.name}</td>
                     <td class="idcard">${as.idcrad}</td>
                     <td class="phone">${as.tel}</td>
                     <td class="bx">${as.amount}</td>
                     <td>${as.aoolydate}</td>
                     <td>
                         <c:if test="${as.status==1}">待审核</c:if>
                         <c:if test="${as.status==2}">通过</c:if>
                         <c:if test="${as.status==3}">驳回</c:if>
                     </td>
                     <td>${as.detail}</td>
                     <td>${as.cname}</td>
                     <td>
                         <c:if test="${as.status==1}">
                             <input  type="button"  value="通过"  οnclick="test1(${as.aid})"/>
                             <input  type="button"  value="驳回"  οnclick="test2(${as.aid})"/>
                         </c:if>
                     </td>
                 </tr>
           </c:forEach>
          </tbody>
        ${pageHelper.html}
    </table>
    </form>
    <input type="button" value="全选" οnclick="qx()"/>
    <input type="button" value="全不选" οnclick="qbx()"/>
    <input type="button" value="反选" οnclick="fx()"/>
    <input type="button" value="排序" οnclick="pxx()">
    <a href="apply_add.jsp"><input type="button" value="添加"></a><br>
    <input type="button" value="日志信息" οnclick="test3()"/>
    <script>
        //全选、全不选、反选
        function qx(){
            $(".ck").prop("checked",true);
        }
        function qbx(){
            $(".ck").prop("checked",false);
        }
        function fx(){
            $(".ck").each(function (){
                this.checked=!this.checked;
            })
        }
        $(".idcard").each(function (){
            let idcard=$(this).text();
            let idcard2=idcard.substring(0,6)+"########"+idcard.substring(14);
            $(this).text(idcard2);
        })
        $(".phone").each(function (){
            let phone1=$(this).text();
            let phone2=phone1.substring(0,4)+"####"+phone1.substring(8);
            $(this).text(phone2);
        })

        </script>


 因为我通过sql语法,把mysql里的数据直接输出到页面上,没有展示全,大家可以直接把内容写固定来进行练习。我给大家看看页面效果

看绿色的代码,通过$(".ck"),这个叫做class类选择器,可以获取到所有的复选框,由于有些人可能现在只学习前端,可以写成

$(".ck").each(function (){
    this.checked=true;
})

进行练习,each()是jQuery的一种语法,是一种循环语句,上面的是全选,如果想全不选将true换成false就可以啦!,反选就是上面代码的写法。

$(".idcard").each(function (){

let idcard=$(this).text();

let idcard2=idcard.substring(0,6)+"########"+idcard.substring(14);

$(this).text(idcard2);

})

看下蓝色的代码,也是通过class类选择器,通过each()方法来对数据进行操作,this代表当前,每次循环都会用到this,text是获取文本的数据,通过$(this).text()的组合,就能获取到所有的身份证号码数据,下面的就是js语句了,用到了substring,js里数据是从0开始的,然后substring是左闭右开,所以想取前6为数据就是(0,6),从第15位开始到最后就直接写成substring(14)就可以啦!最后再循环语句里,注意!一定是循环语句里,因为是多条数据,必须再循环语句里一条一条的进行赋值。

手机号部分隐藏跟身份证号码隐藏同理,如果大家省份证号隐藏确定学会了,可以自己上手练一下

练后感受下,相较于js语法,jQuery语法的好处吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/349077.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Alzet渗透泵工作原理,你清楚么?

由于Alzet渗透泵独特的释放原理&#xff0c;使得许多化学试剂、药剂或者其他物质&#xff0c;可以通过Alzet渗透泵应用到科研试验中。一个小小的胶囊就可以完成持续的动物给药实验&#xff0c;对于科研实验者来说就是一个福音。 那你了解Alzet渗透泵么?让我们一起来简单了解一…

Android HIDL概述与绑定模式的实现

一、前言 Android O(8.0) 版本之后&#xff0c;底层实现有了比较大的变化&#xff0c;最显著的一个方面就是 HIDL 机制的全面实施。本文对于理解系统源码中 Gnss、Usb、Camera 等模块的工作原理有极大帮助。 二、HIDL 设计目的 在 Android O(8.0) 之前系统的升级牵扯多方协作…

循环购:电商新时代的消费革命

随着电商市场的竞争加剧&#xff0c;消费者需求日益多样化&#xff0c;电商企业需要不断创新以满足市场需求。循环购模式作为一种新兴的消费模式&#xff0c;正逐渐受到消费者的青睐&#xff0c;成为电商行业的新热点。本文将深入剖析循环购模式的魅力&#xff0c;探索其在电商…

chromedriver下载地址与安装方法

用到例如selenium时&#xff0c;需要使用谷歌浏览器并配合chromedriver进行模拟浏览等 分享chromedriver的实时更新的下载网址&#xff1a; https://registry.npmmirror.com/binary.html?pathchromedriver/ 。。。 需要找到自己电脑谷歌浏览器版本所对应的chromedriver版本 …

CQ 社区版 2.8.0 | 支持TiDB、StarRocks,新增列过滤算法、导出模式设置等

Hello&#xff0c;CloudQuery 社区版 2.8.0 已发布&#xff0c;本文将带大家详细解析本次更新的功能~&#xff08;完整的讲解视频可点击 &#x1f449;&#x1f3fb; CloudQuery 社区版2.8.0 功能讲解演示 本期亮点更新 新增支持数据源 TiDB、StarRocks数据保护新增列过滤脱敏…

HNSW算法

From&#xff1a; HNSW算法(nsmlib/hnswlib)-CSDN博客HNSW算法的基本原理及使用 - 知乎 HNSW是一种广泛使用的ANN图索引结构&#xff0c;包括DiskANN、DF-GAS、SmartSSD等。本文档主要总结HNSW的结构与工作流程&#xff0c;便于后期研究其工作流程在迁移到CSD中存在的I/O问题…

计算CNN卷积层和全连接层的参数量

计算CNN卷积层和全连接层的参数量 先前阅读 CNN ExplainerA Comprehensive Guide to Convolutional Neural Networks — the ELI5 way 本文主旨意在搞明白2个问题&#xff1a; 第一个问题 一个卷积操作&#xff0c;他的参数&#xff0c;也就是我们要训练的参数&#xff0c;也…

50. Pow(x, n)

分治算法&#xff1a; 从右往左开始递归计算&#xff0c;假设yx^(n/2)&#xff0c;那么当n为偶数时&#xff0c;x^ny*y&#xff0c;当n为奇数时&#xff0c;x^ny*y*x。 另外&#xff0c;注意n有可能是负数。 class Solution {public double myPow(double x, int n) {int N n…

Kettle-Docker部署+Sqlserver数据同步Mysql+Start定时任务

一. 背景介绍 1. ETL是什么 ETL&#xff08;Extract-Transform-Load&#xff09;&#xff0c;即数据抽取、转换、装载的过程。它是一种思想&#xff0c;主要是说&#xff0c;从不同的数据源获取数据&#xff0c;并通过对数据进行处理&#xff08;格式&#xff0c;协议等转换&a…

ChatGPT 全域调教高手:成为人工智能交流专家

随着人工智能的快速发展&#xff0c;ChatGPT作为一种强大的文本生成模型&#xff0c;在各行各业中越来越受到重视和应用。想要利用ChatGPT实现更加智能、自然的交流&#xff0c;成为 ChatGPT 全域调教高手吗&#xff1f;本文将为您介绍如何通过优化ChatGPT的训练方法&#xff0…

全新5IUX极简搜索主页源码 /自定义浏览器主页

源码介绍&#xff1a; 全新5IUX极简搜索主页源码&#xff0c;专为自定义浏览器主页而设计。厌倦了各种导航首页上满屏幕的广告和资讯&#xff0c;可以自己尝试编写一个个性化的主页。这款源码并非镜像或代理&#xff0c;而是作为浏览器主页使用&#xff0c;同时支持自适应屏幕…

springboot快速写接口

1. 建proj形式 name会变成文件夹的名字&#xff0c;相当于你的项目名称 基础包 2. 基础依赖 3. 配置数据库 这里要打开mysql&#xff0c;并且创建数据库 方法&#xff1a; 安装好数据库&#xff0c;改好账号密码用navicat来建表和账号配置properties.yml文件即可 4.用res…

基于SpringBoot的玩具租赁系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

腾讯云轻量应用Windows服务器如何搭建幻兽帕鲁Palworld私服?

幻兽帕鲁/Palworld是一款2024年Pocketpair开发的开放世界生存制作游戏&#xff0c;在帕鲁的世界&#xff0c;玩家可以选择与神奇的生物“帕鲁”一同享受悠闲的生活&#xff0c;也可以投身于与偷猎者进行生死搏斗的冒险。而帕鲁可以进行战斗、繁殖、协助玩家做农活&#xff0c;也…

Linux文件管理(上)

因为 Linux中一切皆文件&#xff0c;所以在了解了 Linux基础和会使用一些入门级命令之后&#xff0c;接下来的重点便是 Linux文件管理的学习&#xff0c;就像 Java中一切皆对象一样&#xff0c;面向对象是 Java基础的核心和重点。该部分内容学习的重要性就像面向对象在 Java中重…

为什么时序逻辑电路会落后一拍?

1、时序逻辑电路落后一拍&#xff1f; FPGA初学者可能经常听到一句话&#xff1a;“时序逻辑电路&#xff0c;或者说用 < 输出的电路会延迟&#xff08;落后&#xff09;一个时钟周期。”但在仿真过程中经常会发现不符合这一“定律”的现象–明明是在仿真时序逻辑&#xff…

netstat引发系统负载升高故障案例一则

关键词 linux、centoscpu load、netstat、strace阻塞、卡顿 There are many things that can not be broken&#xff01; 如果觉得本文对你有帮助&#xff0c;欢迎点赞、收藏、评论&#xff01; 在一次线上业务的阻塞故障中&#xff0c;发现罪魁祸首是执行了大量netstat的命令…

使用宝塔面板部署Node.js+Mysql服务和Vue3-Admin项目到云服务器上

准备工作 一台云服务器&#xff0c;可以先用免费试用一个月的服务器进行练手&#xff1b;我这里选择的是腾讯云的轻量云服务器&#xff1b; 1、在云服务器上安装宝塔面板 宝塔面板官网地址&#xff1a;https://www.kancloud.cn/chudong/bt2017/424209 1.1 安装Xshell脚本工…

开源CRM客户管理系统-FeelCRM

FeelCRM客户管理系统 开源项目介绍 FeelCRM客户管理系统&#xff0c;符合中小企业业务流程&#xff1b;支持线索管理、客户管理、商机管理、合同管理、审核管理等多个模块&#xff1b;希望能为广大中小企业以及开发者们提供一个更多的可能性&#xff1b;本版本是我公司跨语言…

C#,打印漂亮杨辉三角形(帕斯卡三角形)的源代码

杨辉 Blaise Pascal 这是某些程序员看完会哭的代码。 杨辉三角形&#xff08;Yanghui Triangle&#xff09;&#xff0c;是一种序列数值的三角形几何排列&#xff0c;最早出现于南宋数学家杨辉1261年所著的《详解九章算法》一书。 欧洲学者&#xff0c;最先由帕斯卡&#x…