jquery选择器之属性过滤选择器详解,Selectors_jquery_脚本之家

本类别小说分为:基本篇、档期的顺序篇、简单篇、内容篇、可知性篇、属性篇、子成分篇、表单篇、表单对象属性篇共9篇文章。
本篇疏解:[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。
您对本类别小说有任何建议或意见请发送到邮箱:sjzlgt@qq.com
由于是首先次写工夫性类别文章,难免会出错或代码BUG,招待建议,在那谢过!
运维后,请刷新下代码,以便加载jquery

本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
本系列文章分为:基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
本篇讲解:[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。
您对本系列文章有任何建议或意见请发送到邮箱:[email protected]
由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过!
您可以到jQuery官网来学习更多的有关jQuery知识。
版权所有:code-cat 博客:http://www.cnblogs.com/bynet/ 转载请保留出处和版权信息!

复制代码 代码如下:

jQuery-Selectors-5

至于火狐,IE8在浏览此文章时会有局地谬误(选取器失灵卡塔尔国现象的扬言:
率先,谢谢大家对本种类小说的爱慕及建议的BUG。
小编写小说时,用的是IE7的景况,未有思考到火狐和别的浏览器,那是自己的大意,在这里后的小说中,笔者会作浏览器测量试验。经笔者测量试验,Radio和CheckBox在火狐浏览器下改变背景观是展示不出去的,在IE8下亦是那般,增添边框也是展示不出来的,如$(“input”).css(“border”,”red
2px
solid”);是不曾效率的。但jQuery接受器接收的结果是不错的,假诺您用$(“input”).attr(“checked”,”true”);那句代码就能够测出。
这篇小说小编生机勃勃有的时候间就能够做出改善,找一些火狐、IE等浏览器都帮助的效果与利益来作为实例。

<style type=”text/css”>
  /*高亮呈现*/
  .highlight{  
   background-color: gray
  }
 </style>

jQuery-Selectors
本连串文章主要叙述jQuery框架的采纳器使用办法,笔者将以实例方式张开描述,以简练,周全为根底,不会提到很深,作者的就学情势:先入门,后进级!
本连串文章分为:基本篇、等级次序篇、轻易篇、内容篇、可知性篇、属性篇、子成分篇、表单篇、表单对象属性篇共9篇散文。
本篇批注:[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。
您对本系列小说有此外提议或意见请发送到邮箱:sjzlgt@qq.com
由于是首先次写技巧性体系小说,难免会出错或代码BUG,接待建议,在那谢过!
您可以到jQuery官方网址来读书越来越多的关于jQuery知识。 版权全体:code-cat
博客: 转发请保留出处和版权音讯!
1.
[attribute]用法 定义:相配包含给定属性的因素 重返值:Array
参数:attribute : 属性名
实例:将ID为”div_a1″的DIV中有ID属性的span成分的背景象改为深褐 代码:
$.css(“background-color”,”red”); //点击开关生龙活虎将施行那句代码 DIV
ID=”div_a1″ span ID=”span_1″ span 无ID属性 span ID=”span_2″ DIV
ID=”div_a5″ 2. [attribute=value]用法
定义:相配给定的质量是某些特定值的要素 重回值:Array 参数:attribute
:属性名 value
:属性值。引号在超过50%场地下是可选的。但在境遇比方属性值满含”]”时,用以制止矛盾。
实例:将ID为”div_b1″的DIV中name属性值为chk_attribute_test的input成分的背景色改为革命
代码:$(“#div_b1
input[name=chk_attribute_test]”).css(“background-color”,”red”);
//点击开关二将实行那句代码 DIV ID=”div_b1″ radio name=’rd’ radio
name=’rd’ checkbox name=’chk_attribute_test’ checkbox
name=’chk_attribute_test’ checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’ checkbox
name=’chk_attribute_test’ DIV ID=”div_b5″ 3. [attribute!=value]用法
定义:相配给定的性质是不带有有些特定值的要素 重回值:Array
参数:attribute :属性名 value
:属性值。引号在大部情形下是可选的。但在碰着举个例子属性值包蕴”]”时,用以幸免冲突。
实例:将ID为”div_c1″的DIV中name属性值不是chk_attribute_test的input成分的背景观改为丁香紫代码:$(“#div_c1 >
input[name!=chk_attribute_test]”).css(“background-color”,”red”);
//点击按键三将施行那句代码 DIV ID=”div_c1″ radio name=’rd’ radio
name=’rd’ checkbox name=’chk_attribute_test’ checkbox
name=’chk_attribute_test’ checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’ checkbox
name=’chk_attribute_test’ DIV ID=”div_c5″
瞩目:这里笔者用了’>’,假如将’>’换到’
‘,则按键三的背景颜色也会化为铁锈棕
4. [attribute^=value]用法
定义:相配给定的脾性是以有个别值早先的要素 再次来到值:Array 参数:attribute
:属性名 value
:属性值。引号在一大半情况下是可选的。但在碰着例如属性值包罗”]”时,用以免止冲突。
实例:将ID为”div_d1″的DIV中name属性值以’txt’早先的input成分的背景观改为革命
代码:$(“#div_d1 >
input[name^=txt]”).css(“background-color”,”red”);
//点击开关四将推行那句代码 DIV ID=”div_d1″ radio name=’rd’ radio
name=’rd’ checkbox name=’chk_attribute_test’ checkbox
name=’chk_attribute_test’ checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’ checkbox
name=’chk_attribute_test’ DIV ID=”div_d5″ 5. [attribute$=value]用法
定义:相配给定的特性是以有些值结尾的因素 重返值:Array 参数:attribute
:属性名 value
:属性值。引号在超越二分之风度翩翩情状下是可选的。但在遇见举个例子属性值包罗”]”时,用以制止冲突。
实例:将ID为”div_e1″的DIV中name属性值以’list’结尾的input成分的背景象改为革命
代码:$(“#div_e1 >
input[name$=list]”).css(“background-color”,”red”);
//点击按键五将试行那句代码 DIV ID=”div_e1″ checkbox
name=’chk_attribute_list’ radio name=’rd’ radio name=’rd’ checkbox
name=’chk_attribute_list’ checkbox name=’chk_attribute_list’
checkbox name=’chk_attribute_list’ checkbox
name=’chk_attribute_list’ DIV ID=”div_e5″ 6.
[attribute*=value]用法 定义:相配给定的性子是以带有某个值的成分重返值:Array 参数:attribute :属性名 value
:属性值。引号在大多数情景下是可选的。但在遇到比方属性值满含”]”时,用避防止冲突。
实例:将ID为”div_f1″的DIV中name属性值富含’_’的input成分的背景象改为革命
代码:$(“#div_f1 >
input[name*=_]”).css(“background-color”,”red”);
//点击开关六将施行这句代码 DIV ID=”div_f1″ radio name=’rd’ radio
name=’rd’ checkbox name=’chk_attribute_test’ checkbox
name=’chk_attribute_test’ checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’ checkbox
name=’chk_attribute_test’ DIV ID=”div_f5″ 7.
[selector1][selector2][selectorN]用法
定义:复合属性采纳器,必要同时满意七个规格时选取。 重返值:Array
参数:selector1 :属性选择器 selector2
:另贰特质量接收器,用以进一步压缩范围 selectorN :大肆多少个性格选拔器
实例:将ID为”div_g1″的DIV中有id属性且name属性值以’rd’早先和以’test’结尾的input成分的背景象改为革命
代码:$(“#div_g1 >
input[id][name$=test][name^=rd]”).css(“background-color”,”red”);
//点击按键七将施行那句代码 DIV ID=”div_g1″ radio id=’rd_0′
name=’rd_test’ radio id=’rd_1′ name=’rd_test’ checkbox id=’chk_0′
name=’chk_attribute_test’ checkbox id=’chk_1′
name=’chk_attribute_test’ checkbox id=’chk_2′
name=’chk_attribute_test’ checkbox id=’chk_3′
name=’chk_attribute_test’ checkbox id=’chk_4′
name=’chk_attribute_test’ DIV ID=”div_g5″

  1. [attribute]用法
    概念:匹配包蕴给定属性的要素
    返回值:Array<Element>
    参数:attribute (String) : 属性名
    实例:将ID为”div_a1″的DIV中有ID属性的span成分的背景色改为深草绿
    代码:
    $(“#div_a1 span[id]”).css(“background-color”,”red”); //点击开关风姿洒脱将推行那句代码 DIV
    ID=”div_a1″
    span
    ID=”span_1″
    span
    无ID属性
    span
    ID=”span_2″
    DIV ID=”div_a5″ 2.
    [attribute=value]用法
    概念:匹配给定的习性是有些特定值的因素
    返回值:Array<Element>
    参数:attribute (String):属性名 value
    (String):属性值。引号在超越三分之一意况下是可选的。但在遇见举例属性值饱含”]”时,用以制止冲突。
    实例:将ID为”div_b1″的DIV中name属性值为chk_attribute_test的input成分的背景观改为革命
    代码:$(“#div_b1
    input[name=chk_attribute_test]”).css(“background-color”,”red”); //点击按键二将实践那句代码 DIV
    ID=”div_b1″

复制代码 代码如下:

[Ctrl+A 全选 注:如需引入外界Js需刷新手艺进行]

radio name=’rd’
radio name=’rd’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
DIV ID=”div_b5″ 3.
[attribute!=value]用法
概念:匹配给定的特性是不分包有个别特定值的成分
返回值:Array<Element>
参数:attribute (String):属性名 value
(String):属性值。引号在好多景况下是可选的。但在蒙受比方说属性值满含”]”时,用以制止冲突。
实例:将ID为”div_c1″的DIV中name属性值不是chk_attribute_test的input成分的背景观改为革命
代码:$(“#div_c1
>
input[name!=chk_attribute_test]”).css(“background-color”,”red”); //点击按键三将举行那句代码 DIV
ID=”div_c1″

<body>
   <div>
      <p>Hello</p>
   </div>
   <div id=”test”>ID为test的DIV</div>
   <input type=”checkbox” id=”s1″ name=”football” value=”足球”
/>足球
   <input type=”checkbox” name=”volleyball” value=”排球” />排球
   <input type=”checkbox” id=”s3″ name=”basketball” value=”篮球”
/>篮球
   <input type=”checkbox” id=”s4″ name=”other” value=”其他”
/>其他
  </body>

radio name=’rd’
radio name=’rd’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
DIV ID=”div_c5″ 留心:这里自个儿用了’>’,要是将’>’换到’
‘,则开关三的背景颜色也会形成灰褐
4.
[attribute^=value]用法
概念:相配给定的质量是以有些值开端的成分
返回值:Array<Element>
参数:attribute (String):属性名 value
(String):属性值。引号在大很多情状下是可选的。但在遇到比方说属性值包罗”]”时,用以制止冲突。
实例:将ID为”div_d1″的DIV中name属性值以’txt’开头的input成分的背景观改为革命
代码:$(“#div_d1
> input[name^=txt]”).css(“background-color”,”red”); //点击开关四将实行这句代码 DIV
ID=”div_d1″

1. [attribute]用法 概念:相称包涵给定属性的因素

radio name=’rd’
radio name=’rd’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’

复制代码 代码如下:

DIV ID=”div_d5″ 5.
[attribute$=value]用法
概念:相称给定的质量是以有个别值结尾的成分
返回值:Array<Element>
参数:attribute (String):属性名 value
(String):属性值。引号在大部气象下是可选的。但在遇见比方属性值包括”]”时,用防止止冲突。
实例:将ID为”div_e1″的DIV中name属性值以’list’结尾的input成分的背景象改为革命
代码:$(“#div_e1
> input[name$=list]”).css(“background-color”,”red”); //点击开关五将实行那句代码 DIV
ID=”div_e1″
checkbox name=’chk_attribute_list’

$(“div[id]”).addClass(“highlight”); //查找全数含有ID属性的div成分

radio name=’rd’
radio name=’rd’
checkbox name=’chk_attribute_list’
checkbox name=’chk_attribute_list’
checkbox name=’chk_attribute_list’

2. [attribute=value]用法 概念:相配给定的习性是某些特定值的要素

checkbox name=’chk_attribute_list’
DIV ID=”div_e5″ 6.
[attribute*=value]用法
概念:相配给定的性质是以带有某个值的要素
返回值:Array<Element>
参数:attribute (String):属性名 value
(String):属性值。引号在大部分动静下是可选的。但在碰着比如属性值包括”]”时,用避防止冲突。
实例:将ID为”div_f1″的DIV中name属性值包括’_’的input成分的背景观改为革命
代码:$(“#div_f1
> input[name*=_]”).css(“background-color”,”red”); //点击按键六将推行那句代码 DIV
ID=”div_f1″

复制代码 代码如下:

radio name=’rd’
radio name=’rd’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’
checkbox name=’chk_attribute_test’

$(“input[name=’basketball’]”).attr(“checked”,true);  
//name属性值为basketball的input成分选中

DIV ID=”div_f5″ 7.
[selector1][selector2][selectorN]用法
概念:复合属性接受器,必要同期知足四个原则时采取。
返回值:Array<Element>
参数:selector1 (Selector):属性接受器 selector2
(Selector):另壹天性质选取器,用以进一层降低范围 selectorN
(Selector):放肆七个属性采用器
实例:将ID为”div_g1″的DIV中有id属性且name属性值以’rd’开始和以’test’结尾的input成分的背景观改为革命
代码:$(“#div_g1
>
input[id][name$=test][name^=rd]”).css(“background-color”,”red”); //点击按键七将执行那句代码 DIV
ID=”div_g1″

3. [attribute!=value]用法 概念:相称给定的性质是不含有某些特定值的成分

radio id=’rd_0′ name=’rd_test’
radio id=’rd_1′ name=’rd_test’
checkbox id=’chk_0′ name=’chk_attribute_test’
checkbox id=’chk_1′ name=’chk_attribute_test’
checkbox id=’chk_2′ name=’chk_attribute_test’
checkbox id=’chk_3′ name=’chk_attribute_test’
checkbox id=’chk_4′ name=’chk_attribute_test’

复制代码 代码如下:

DIV ID=”div_g5″

$(“input[name!=’basketball’]”).attr(“checked”,true);  
//name属性值不为basketball的input成分选中
//此接受器等价于:not([attr=value])要合营含有一定属性但不等于特定值的要素,请使用[attr]:not([attr=value])
$(“input:not(input[name=’basketball’])”).attr(“checked”,true);

   文章导读:

4. [attribute^=value]用法 概念:相称给定的天性是以某个值起始的要素

  jQuery-Selectors(选择器)的使用(一、基本篇)

复制代码 代码如下:

  jQuery-Selectors(选择器)的使用(二、层次篇)

$(“input[name^=’foot’]”).attr(“checked”,true);  //查找全部 name 以
‘foot’ 开首的 input 成分

  jQuery-Selectors(选择器)的使用(三、简单篇)

5. [attribute$=value]用法 概念:相配给定的性子是以有个别值结尾的要素

  jQuery-Selectors(选择器)的接收(四-五、内容篇&可知性篇)

复制代码 代码如下:

  jQuery-Selectors(选择器)的使用(六、属性篇)

$(“input[name$=’ball’]”).attr(“checked”,true); //查找全体 name 以
‘ball’ 结尾的 input 成分

  jQuery-Selectors(选取器)的使用(七、子成分篇)

6. [attribute*=value]用法 概念:相配给定的性格是以包括某个值的成分

复制代码 代码如下:

$(“input[name*=’sket’]”).attr(“checked”,true);  //查找全数 name 包含’sket’ 的 input 成分

7. [selector1][selector2][selectorN]用法 概念:复合属性选拔器,必要同临时候知足三个原则时选取

复制代码 代码如下:

$(“input[id][name$=’ball’]”).attr(“checked”,true);  //找到全数含有
id属性,况且它的 name属性是以 ball结尾的

代码如下: style type=”text/css”
/*高亮呈现*/ .highlight{ background-color: gray } /style 复制代码
代码如下: body div pHello/p /div div id=”test”ID为te…

发表评论

电子邮件地址不会被公开。 必填项已用*标注