jQuery中的通配符选择器使用总结

jquery选择器中的通配符经常用到，大致的用法总结如下：

$("input[id^='code']");//id属性以code开始的所有input标签
$("input[id$='code']");//id属性以code结束的所有input标签
$("input[id*='code']");//id属性包含code的所有input标签
$("input[name^='code']");//name属性以code开始的所有input标签
$("input[name$='code']");//name属性以code结束的所有input标签
$("input[name*='code']");//name属性包含code的所有input标签

使用示例

$("input[name*='code']").each(fuction(){
  var sum=0;
if($(this).val()!=""){
 sum=parseInt(sum)+parseInt($(this).val());
}
$("#").text(sum);
})

使用时注意
关于如下input：

 <input type="text" name="code[0]" id="haorooms[0]" />

请不要用

$("#haorooms[0]")

进行选择，这样通常会出现问题，特别是select的时候。要用如下方式

$("input[id^='haorooms']")

或者

$("input[name^='code']")

这样效率上面不如直接ID，但是不会出错，假如上面的name和id都没有后缀[0]，那么推荐直接用Id选择器来选择！

赞 (0)

相关推荐

  • jQuery四种选择器使用及示例

     jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 <p> 元素. $("p#demo") 选取所有 id="demo" 的 <p> 元素. 示例代码: jquery 部分 $(document).ready(function(){/

  • jQuery中Find选择器用法示例

    本文实例讲述了jQuery中Find选择器用法.分享给大家供大家参考,具体如下: find 可以查找指定节点下的节点,它是会递归查找的,即可以查找子节点的子节点 示例如下: function CalculatePrice() { var totalMoney = 0; $(".trBookCartItem").each(function (index, item) { var price = $(item).find(".spanPrice").text(); va

  • jQuery基本选择器之标签名选择器

    jQuery基本选择器之标签名选择器

    废话不多说了,直接给大家贴代码了,关键代码如下所述: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

  • jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

    jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

    我们经常会应用到日期和时间选择器,之前我们使用最多的是jQuery UI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期选择器datedropper以及时间选择器timedropper,他们俩尤其适合在移动端上应用. 在线演示       源码下载 日期选择器datedropper 使用非常简单,分三步, 1.引入相关js和css文件.注意datedropper和timedropper都是基于jQuery的插件,所以也要引入jQuery库文件. <scr

  • jQuery常见的选择器及用法介绍

    选择器的意义就是将众多html代码中准确的找出我们想找的单元. 接下来将常见的选择器以及作用列举出来. 基本选择器 $('#test1').css('background' , 'gray'); 可以找到id = test1的单元. $('p').css('background' , 'blue'); 所有的P标签都会被选中. $('.test2').css('background' , 'green'); Class = test2的单元全部被选中. $('*').css('backgroun

  • jquery 属性选择器（匹配具有指定属性的元素）

    jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("

  • 详解jQuery选择器

    详解jQuery选择器

    大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档

  • jQuery选择器总结之常用元素查找方法

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1．简化代码的编写 2．隐式迭代 3．无须判断对象是否存在 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $

  • 浅析jQuery事件之on()方法绑定多个选择器,多个事件

    $(document).on('click', '#header .top, #main .btn', function () { // code... }); on()方法绑定多个事件 $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function()

  • jQuery中的通配符选择器使用总结

    jquery选择器中的通配符经常用到,大致的用法总结如下: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']");//id属性以code结束的所有input标签 $("input[id*='code']");//id属性包含code的所有input标签 $("input[name^='code']");//name属性以code开始的所有in

  • JQuery中基础过滤选择器用法实例分析

    本文实例讲述了JQuery中基础过滤选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • jQuery中[attribute^=value]选择器用法实例

    本文实例讲述了jQuery中[attribute^=value]选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够选取属性值是以某些值开始的元素. 语法结构: 复制代码 代码如下: $("[attribute^=value]") 参数列表: 参数 描述 attribute 属性名称. value 元素数属性开始的值. 引号在大多数情况下是可选的.但在遇到诸如属性值包含"]"时,用以避免冲突. 实例代码: 实例一: 复制代码 代码如下: <!DOCT

  • jQuery中复合属性选择器用法实例

    本文实例讲述了jQuery中复合属性选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配同时满足多个属性条件的元素. 语法结构: 复制代码 代码如下: [selector1][selector2][selectorN] 参数列表: 参数 描述 selector1 属性选择器. selector2 另一个属性选择器,用以进一步缩小范围. selectorN 任意多个属性选择器,也是用来缩小范围. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html&g

  • JQuery中属性过滤选择器用法实例分析

    本文实例讲述了JQuery中属性过滤选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • jQuery中的类名选择器（.class）用法简单示例

    jQuery中的类名选择器（.class）用法简单示例

    本文实例讲述了jQuery中的类名选择器(.class)用法.分享给大家供大家参考,具体如下: 一.介绍 类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素. 在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配的类的名称就可以被类名选择器选取到. 类名选择器很好理解,在大学的时候大部分人一定都选过课,可以把CSS类名理解为课程名称,元素理解成学生,学生可以选择多门课程,而一门课程又可以被多名学生所选择. CSS类与元素的关系既可以是多对多的

  • jQuery中的基本选择器用法学习教程

    一．简单选择器 在使用jQuery 选择器时,必须使用"$()"函数来包装CSS 规则.而CSS 规则作为参数传递到jQuery 对象内部后,再返回包含页面中对应元素的jQuery 对象.随后,就可以对这个获取到的DOM 节点进行行为操作了. #box {//使用ID 选择器的CSS 规则 color:red;//将ID 为box 的元素字体颜色变红 } 在jQuery 选择器里,我们使用如下的方式获取同样的结果: $('#box').css('color', 'red');//获取D

  • jquery 中多条件选择器,相对选择器,层次选择器的区别

    一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足"选择器"条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素

  • 在jQuery中 常用的选择器介绍

    层次选择器: $('div p');//选取div下的所有的p元素 $('div>p').css('border','1px solid red');//只选取div下的直接子元素 //相邻的元素 $('div ~ p).css('border','1px solid red');与$('div').nextAll('p')等价;//表示div后面的 所有p兄弟元素 $('div ~ *').css('border','1px solid red');//表示div后面的所有兄弟元素 $('di

  • 举例讲解jQuery中可见性过滤选择器的使用

    举例讲解jQuery中可见性过滤选择器的使用

    可见性过滤器 可见性过滤器根据元素的可见性和不可见性来选择相应的元素. 过滤器名 jQuery 语法 说明 返回 :hidden  $(':hidden')  选取所有不可见元素 集合元素 :visible  $(':visible')  选取所有可见元素 集合元素 $('p:hidden).size(); //元素p 隐藏的元素 $('p:visible').size(); //元素p 显示的元素 注意::hidden 过滤器一般是包含的内容为:CSS 样式为display:none.inpu

随机推荐