jquery属性选择器

yyzhu 2014-04-12

  1. [name|='value'] 该类型选择器选择匹配value或value-的元素,例子:
    <a href="http://www.baidu.com" title="en-x">百度</a>
    <a href="http://www.google.com" title="enp">谷歌</a>
    <a href="http://www.qq.com" title="en">腾讯</a>
     以下语句将使百度,腾讯字体变红
    $("[title|='en']").css("color","red");
  2.  [name*='value']
    该选择器选择包含value的元素,例如:
    <input name="myNo1" value="myNo1"/>
    <input name="yourNo1" value="youNo1"/>
    <input name="hisNo1" value="hisNo1" />
    <input name="*No" value="*No" />
    <input name="no" value="no" />
     以下语句将使前四个字体变红
    $("[name*=No]").css("color","red");
  3. [name~='value']该选择器以单词为组进行选择,例如:
    <input type="text" name="man woman" value="man woman"/>
    <input type="text" name="man1 woman1" value="man1 woman1" />
     使用以下语句:
    $("[name~='man']").css("color","blue");
  4. [name$='value']该选择器将以词尾完全匹配进行选择,例如:
    <input name="boygirl" value="boygirl" />
    <input name="girlboy" value="girlboy" />
    <input name="girlgirl" value="girlgirl" />
    <input name="girlgirl1" value="girlgirl1" />
     使用如下代码:
    $("[name$='girl']").css("background-color","red");;
     input的第一个,第三个背景将变色
  5. [name='value']该选择器进行完全匹配选,例如:
    <input name="man" value="man"/>
    <input name="woman" value="woman"/>
     使用如下代码:
    $("[name='man']").css("background-color","blue");
     第一个input将背景将变色
  6. [name!='value']该选择器进行反向匹配选择元素,例如:
    <input name="man" value="man" />
    <input name="woman" value="woman" />
    <input name="children" value="children" />
     使用如下代码:
    $("[name!='man']").css("color","green");
     input的第二个,第三个字体将变绿色
  7. [name^='value']该选择器进行开头匹配选择,例如:
    <input name="man1" value="man1"/>
    <input name="man2" value="man2"/>
    <input name="woman1" value="woman1"/>
     使用如下代码:
    $("[name^='man']").css("color","red");
     input的第一个,第二个字体颜色将变红

相关推荐