图灵学院--Java高级架构师-互联网企业级实战VIP课程(价值6380)(qq:1324981084)

jq是一般程序员在前台开发的时候都会使用的技术，其中模糊匹配查询在动态添加标签的时候经常用到，这里我写出我经常用到的几个模糊匹配的方法。

其中有:^(前缀)、$(后缀)、*(包含)

例如有这样一段代码：

<div>

    <input id="id1" type="text" name="name1" value="1" id_temp="haha"/>

    <input id="id2" type="text" name="name2" value="2"/>

    <input id="id3" type="text" name="name3" value="3" />

    <input id="id4" type="text" name="name4" value="4"/>

</div>

1、利用id获得id1的value值

var id1_value = $("#id1").val() ;

var id1_value1 = $(input:text[id='id1']).val();//获得id等于id1的text文本的值

//var id1_value1 = $(input:text[name='name1']).val();//获得name等于name1的text文本的值

2、利用attr()方法获得任意属性的值

var attr_value = $("#id1").attr("id_temp");

3、按name值的前缀进行匹配,返回一个包含input所有属性的的jq对象

$(input:text[name^='name'])

4、按name的后缀进行匹配

$(input:text[name$='name'])

5、按name是否包含某些字母进行匹配

$(input:text[name*='nam'])

例子3、4、5都是模糊匹配，返回的是一个jq的集合对象，所以需要用jq提供的方法取出所需要的值。方法如下：

.each(function(i，n){

  //i会循环出匹配到的jq对象的个数，i从0开始

  //n是匹配到的jq对象，取值为n.id,这样就会把id的值取出来

}); 
<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>
//添加内容，拼接想要添加的内容

function add(){

   var num = $("#num").val();

   var temp = '<input type="text" id="id'+num+'" name="name'+num+'"/>'+

   '<input type="button" value="删除" id="delete_id'+num+'"onclick="delete1(this.id)"/></br>';

$("#temp").append(temp);//将拼接好的字符串添加到预备好的位置

$("#num").val(++num)

}
//利用id删除一行数据

function delete1(id){

var text_id = id.replace("delete_","");

$("#"+text_id).remove();

$("#"+id).next().remove();

$("#"+id).remove();
//模糊匹配将id和name进行重新赋值

$("input[id^='id']").each(function(i,n){

    $("#"+n.id).attr("id","id"+i);

    $("#"+n.id).attr("name","name"+i);

        });

$("input[id^='delete_id']").each(function(i,n){

    $("#"+n.id).attr("id","delete_id"+i);

        });

var num = $("#num").val();

$("#num").val(--num);

}

</script>

</head>

<body>

<input tuype="text" id="num" value="0"/>

<input type="button" value="添加" onclick="add()"/>

<div id="temp">

//用于放置添加的内容

</div>

</body>

</html>

jq模糊匹配（qq:2798641729）的更多相关文章

  1. jq模糊匹配

    jq是一般程序员在前台开发的时候都会使用的技术,其中模糊匹配查询在动态添加标签的时候经常用到,这里我写出我经常用到的几个模糊匹配的方法.其中有:^(前缀).$(后缀).*(包含)例如有这样一段代码: ...

  2. EasyUi模糊匹配搜索框combobox

    现在项目当中很多已经应用了Jquery-easyUi这个界面框架了,所以,学习一点easyUI的常用工具就显得很重要了,现在介绍的就是我在项目中用到的easyUi的模糊匹配组合框combobox. c ...

  3. 1035-Spell checker(模糊匹配)

    一,题意: 给出一组字典的单词,以'#'结束,之后给出一组要执行模糊匹配的单词序列,以'#'结束 1,若某个单词能在字典中找到,则输出corret 2,若某个单词能通过 变换 或 删除 或 添加一个字 ...

  4. sql模糊匹配中%、_的处理

    防sql注入之模糊匹配中%._处理: StringBuilder sbSql = new StringBuilder(); sbSql.Append(@"SELECT * from tabl ...

  5. 记一个同时支持模糊匹配和静态推导的Atom语法补全插件的开发过程: 序

    简介 过去的一周,都睡的很晚,终于做出了Atom上的APICloud语法提示与补全插件:apicloud_autocomplete.个中滋味,感觉还是有必要记录下来的.代码基于 GPL-3.0 开源, ...

  6. 茗洋Easy UI 1.3.2 部分问题解决系列专题[Combo模糊匹配中文问题 修复]

    本次给大家带来的EasyUI的我研究拓展的新特性 我使用的是  EasyUI 1.3.2版本的,项目是ASP.NET MVC3,但是本篇讲解用不上ASP.NET MVC,仅仅修改官方Demo你就知道怎 ...

  7. Mysql 模糊匹配和转义字符

    首先创建一个测试表: insert into test(tt) values('\\\\172.18.28.153'); 现在我想使用模糊匹配,查出以 “\\172” 开头的字符串. 需要使用like ...

  8. grep是模糊匹配

    1. 我:我用的ps -nat|grep -i "80"|wc -l命令 我:解释详细点,,龙哥,对于我这种菜鸟:也是模糊匹配 :你用 grep "80" 会匹 ...

  9. ExtJs combobox支持模糊匹配

    其实很简单,我们只需要在创建下拉框时,给下拉框添加一个监听事件,代码如下:   //以下监听事件用于对下拉项进行模糊匹配                     ,listeners:{       ...

随机推荐

  1. Ubuntu18.04 安装配置mongodb

    一.安装 # 1. 更新 sudo apt-get update # 2. 安装 sudo apt-get install -y mongodb # 3. 查看是否安装成功 # a. 服务状态 sud ...

  2. Scrapy去重

    一.原生 1.模块 from scrapy.dupefilters import RFPDupeFilter 2.RFPDupeFilter方法 a.request_seen 核心:爬虫每执行一次yi ...

  3. 分析一下 原型模式的 UML　类图 。 复制对象， 深浅拷贝 月经贴 ，请回避

  4. 对于kvm配置ssh

    首先我们要让自己的机器开启ssh服务 首先更新源 sudo apt-get update 安装ssh服务 sudo apt-get install openssh-server 检测是否已启动 ps ...

  5. 启动Ubuntu的时候出现黑屏的情况

    在启动Ubuntu的时候出现黑屏的情况,是因为升级了内核导致显卡不兼容,启动的时候应该告诉内核不要加载显卡: 在进入系统选择时按e进入编辑 在quiet splash 后面添加 nomodeset 再 ...

  6. sqli_labs学习笔记（一）Less-1~Less-20

    开门见山 Less-1 GET - Error based - Single quotes - String(基于错误的GET单引号字符型注入) ·  方法一:手工UNION联合查询注入 输入单引号, ...

  7. spring源码系列博文总索引

    一 目录 准备 1 使用Gradle构建spring5源码的一些坑和步骤 IOC模块 1spring IOC接口设计分析 2 spring IOC容器实现类分析 3 spring IOC特定场景源码步 ...

  8. Kubernetes-Ingress资源详解

    什么是Ingress #阿里云称之为ingress路由!在 Kubernetes 集群中,主要用于接入外部请求到k8s内部,Ingress是授权入站连接到达集群服务的规则集合,为您提供七层负载均衡能力 ...

  9. 硬件原理系列之LED数码管(一)

    LED数码管也叫数码显示器,由8段(7段,8多一位小数点)发光二极管组成,控制不同组合,就可以显示不同字符 dp示小数点,COM为公共端,根据连接方式的不同,分为共阴极和共阳极 工作原理:若选用共阴极 ...

  10. Linux系统的用户和用户组管理

    一.用户账户管理 Linux/Unix是一个用户.多任务的操作系统:在讲Linux账号及账户组管理之前,先简单了解一下多用户.多任务操作系统的基本概念. Linux的单用户多任务 在Linux下,当你 ...