zoukankan      html  css  js  c++  java
  • jq模糊匹配

    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>
    复制代码
  • 相关阅读:
    etymology-R
    arp与免费arp的差别,arp老化
    基于S3C2440的linux-3.6.6移植——LED驱动【转】
    《unix环境高级编程》学习笔记【原创】
    安装截图工具 Shutter【转】
    《UNIX环境高级编程第三版》apue.h等源码文件的编译安装【转】
    Ubuntu 下安装Source Insight [转]
    "makefile:5: *** missing separator. Stop."【转】
    深入浅出剖析C语言函数指针与回调函数(一)【转】
    总结与反思、理想与规划---嵌入式学习之旅【原创】
  • 原文地址:https://www.cnblogs.com/shaozhu520/p/10689337.html
Copyright © 2011-2022 走看看