zoukankan      html  css  js  c++  java
  • jQuerySelectors(选择器)的使用(六、属性篇)

    jQuery-Selectors(选择器)的使用(六、属性篇)
    本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
    本系列文章分为:基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
    本篇讲解:[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。
    您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com
    由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过!
    您可以到jQuery官网来学习更多的有关jQuery知识。
    版权所有:code-cat 博客:http://www.cnblogs.com/bynet/ 转载请保留出处和版权信息!
    关于火狐,IE8在浏览此文章时会有一些错误(选择器失灵)现象的声明:
    首先,感谢大家对本系列文章的关注及提出的BUG。
    我写文章时,用的是IE7的环境,没有考虑到火狐和其它浏览器,这是我的疏忽,在以后的文章中,我会作浏览器测试。经我测试,Radio和CheckBox在火狐浏览器下改变背景色是体现不出来的,在IE8下亦是如此,添加边框也是体现不出来的,如$("input").css("border","red 2px solid");是没有效果的。但jQuery选择器选择的结果是正确的,如果您用$("input").attr("checked","true");这句代码即可测出。
    这篇文章我一有时间就会做出修改,找一些火狐、IE等浏览器都支持的效果来作为实例。
    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"

    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"

    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"

    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'

    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<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'

    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"

    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"

       你可以下载这篇文章的HTML源文件:download

  • 相关阅读:
    GhostBSD 3.0RC3,基于GNOME的FreeBSD
    Nagios 3.4.3 发布,企业级监控系统
    Jolokia 1.0.6 发布, JMX远程访问方法
    微软希望开发人员不要使 WebKit 成为新版 IE6
    Kwort Linux 3.5 正式版发布
    EJDB 1.0.24 发布,嵌入式 JSON 数据库引擎
    Pale Moon 15.3 Firefox“苍月”优化版发布
    Galera Load Balancer 0.8.1 发布
    SmartSVN V7.5 正式发布
    PostgresQL建立索引如何避免写数据锁定
  • 原文地址:https://www.cnblogs.com/bynet/p/1618650.html
Copyright © 2011-2022 走看看