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

news2024/11/15 19:41:44

最近呢!一直在学习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语法的好处吧!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

day16打卡

day16打卡 104. 二叉树的最大深度 递归法时间复杂度&#xff1a;O(N)&#xff0c;空间复杂度&#xff1a;O(N) class Solution { public:int maxDepth(TreeNode* root) {if(root nullptr) return 0;return 1 max(maxDepth(root->left), maxDepth(root->right));} };…

蓝牙----蓝牙消息传输_GATT服务发现

蓝牙消息传输_GATT服务发现 1.主机和从机GATT服务的发现2.通知的使用 1.主机和从机GATT服务的发现 GATT服务的发现由主机执行&#xff0c;一共三个阶段  1.处理交换 MTU 请求和响应&#xff0c;启动对 Simple Service 服务的发现。 if (discState BLE_DISC_STATE_MTU){// MT…

C语言之指针的地址和指向的内容总结(八十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

Tomcat_项目部署局域网可访问方法

Tomcat_项目部署局域网可访问方法 前提假设tomcat已经正确安装部署,项目已经部署。 1. win+r运行ipconfig/all,查看wlan的IPv4地址。 2. 修改Tomcat配置文件Server.xml,修改以下两处为:以上查找本地IP地址。

动手学深度学习7 线性回归+基础优化算法

线性回归基础优化算法 1. 线性回归1. 模型1. 房价预测--一个简化的模型2. 拓展到一般化线性模型3. 线性模型可以看做是单层神经网络 2. 预测1. 衡量预估质量2. 训练数据3. 求解模型4. 显示解5. 总结 2. 基础优化算法1. 梯度下降2. 小批量随机梯度下降3. 总结练习 3. 线性回归的…

基于物联网设计的水稻田智能灌溉系统(STM32+华为云IOT)

一、项目介绍 随着科技的不断发展和人们生活水平的提高&#xff0c;农业生产也逐渐向智能化、高效化的方向发展。水稻作为我国主要的粮食作物之一&#xff0c;其生长过程中的灌溉管理尤为重要。传统的灌溉方式往往依赖于人工观察和控制&#xff0c;不仅效率低下&#xff0c;而…

【AD-阻塞卡顿感-捕捉功能】移动布线、移动元器件时有很强的阻塞卡顿感,移动不到想要的地方

现象如下&#xff1a; 解决办法&#xff1a; 出现这种问题是因为AD的捕捉功能设置不对&#xff0c;我这边设置的是全部选择&#xff0c;所以出现了这种阻塞卡顿感。把选项全部取消&#xff0c;阻塞感就消失了。 取消后的现象&#xff1a; 至于原理上为什么会这样&#xff0…

区块链技术在教育领域的应用:Web3教育变革

随着Web3时代的来临&#xff0c;区块链技术在各个领域都展现出了巨大的潜力&#xff0c;而在教育领域&#xff0c;区块链的应用正引领着一场教育变革。本文将深入探讨区块链技术在教育领域的创新应用&#xff0c;以及这一应用如何推动Web3时代的教育变革。 1. 学历和成绩的去中…

C语言实现归并排序算法(附带源代码)

归并排序 把数据分为两段&#xff0c;从两段中逐个选最小的元素移入新数据段的末尾。 可从上到下或从下到上进行。 动态效果过程演示&#xff1a; 归并排序&#xff08;Merge Sort&#xff09;是一种分治算法&#xff0c;它将一个数组分为两个子数组&#xff0c;分别对这两个…

学习gin框架知识的小注意点

Gin框架的初始化 有些项目中 初始化gin框架写的是&#xff1a; r : gin.New() r.Use(logger.GinLogger(), logger.GinRecovery(true)) 而不是r : gin.Default() 为什么呢&#xff1f; 点击进入Default源码发现其实他也是new两个中间件&#xff0c;&#xff08;Logger&…

单调性的应用

1单调性 应用场景&#xff1a;常应用于双指针的进一步优化问题中含义&#xff1a;针对指针 i 1 > i i1>i i1>i一定有 j 1 > j j1>j j1>j或者 j 1 < j j1<j j1<j这样我们就可以利用该性质对算法进行进一步优化&#xff0c;避免一些不必要的遍历…

基于卡尔曼滤波的平面轨迹优化

文章目录 概要卡尔曼滤波代码主函数代码CMakeLists.txt概要 在进行目标跟踪时,算法实时测量得到的目标平面位置,是具有误差的,连续观测,所形成的轨迹如下图所示,需要对其进行噪声滤除。这篇博客将使用卡尔曼滤波,对轨迹进行优化。 优化的结果为黄色线。 卡尔曼滤波代码…

微信小程序元素/文字在横向和纵向实现居中对齐、两端对齐、左右对齐、上下对齐

元素对齐往往是新学者的一大困惑点&#xff0c;在此总结常用的各种元素和文字对齐方式以供参考&#xff1a; 初始显示 .wxml <view style"width: 100%;height: 500rpx; background-color: lightgray;"><view style"width: 200rpx;height:100rpx;bac…

STM32CubeMX教程29 USB_HOST - 使用FatFs文件系统读写U盘

目录 1、准备材料 2、实验目标 3、USB概述 3.1、USB协议 3.2、USB设备 3.3、USB接口 3.4、硬件原理 4、实验流程 4.0、前提知识 4.1、CubeMX相关配置 4.1.0、工程基本配置 4.1.1、时钟树配置 4.1.2、外设参数配置 4.1.3、外设中断配置 4.2、生成代码 4.2.0、配…

C++ day2 类 访问权限

1> 思维导图 2> 自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c; 定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出该矩形的周长和面积函数:void s…

数据权限方案设计(后端)

有些BO模型放在bo包下用来装一些SQL语句查询返回&#xff0c;用于在Service层中进行处理业务逻辑,不会出现在Controller接口层的包装中。在持久层的基础组件中&#xff0c;我司业务种用的是Mysql5.7版本。在前后端开发使用的是分离技术&#xff0c;即前端使用流行的VUEElement-…

RISC-V常用汇编指令

RISC-V寄存器表&#xff1a; RISC-V和常用的x86汇编语言存在许多的不同之处&#xff0c;下面将列出其中部分指令作用&#xff1a; 指令语法描述addiaddi rd,rs1,imm将寄存器rs1的值与立即数imm相加并存入寄存器rdldld t0, 0(t1)将t1的值加上0,将这个值作为地址&#xff0c;取…

6家券商综合评级上升,12月券商App终端业务体验评测报告发布

随着移动金融服务的盛行&#xff0c;手机 App 炒股成为广大股民普遍的选择。股市行情变幻莫测&#xff0c;行情推送速度会影响到投资者的交易决策&#xff0c;委托下单与撤单等关键操作环节的响应性能又会极大影响投资者的收益。由此&#xff0c;行情数据的推送实时性和交易的快…

小程序系列--14.小程序分包

一、基础概念 1. 什么是分包 分包指的是把一个完整的小程序项目&#xff0c;按照需求划分为不同的子包&#xff0c;在构建时打包成不同的分包&#xff0c;用户在使用时按需进行加载。 2. 分包的好处 3. 分包前项目的构成 4. 分包后项目的构成 5. 分包的加载规则 6. 分包的…

vue3预览pdf文件的几种方法

vue3预览pdf集中方法 方法一&#xff1a; iframe&#xff1a;这种方法显示有点丑 <iframesrc"E:\\1.pdf"frameborder"0"style"width: 80%; height: 100vh; margin: auto; display: block"></iframe>方法二&#xff1a; 展示效果&…