jquery属性选择器

jquery属性选择器


一、[attribute] 属性选择器


1、匹配包含给定属性的元素,用于判断拥有某个属性的元素
 

2、例如

查找所有含有 id 属性的 li 元素

  •  
  • 
    <li>
      <p>Hello!</p>
    </li>
    <li id="test2"></li>
    
    $("li[id]")
    
    //结果
    
    			

    <li id="test2"></li>

     

  • 二、[attribute=value] 属性选择器

    1、匹配给定的属性的值是value的元素

    2、例如

    查找所有 name 属性值是 newsletter 的 input 元素

  •  
  • 
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="accept" value="Evil Plans" />
    
    
    $("input[name='newsletter']").attr("checked", true);
    
    
    
    					

    //结果

      <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />

      <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" />

     

  • 
    	

     

    三、[attribute!=value] 属性选择器


    1、匹配给定的属性的值不等于value的元素

    2、例如

    查找所有 name 属性不是 newsletter 的 input 元素

  •  
  • 
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="accept" value="Evil Plans" />
    
    
    $("input[name!='newsletter']").attr("checked", true);
    
    
    
    			

    //结果:

      <input type="checkbox" name="accept" value="Evil Plans" checked="true" />

     

  • 四、[attribute^=value] 属性选择器

    1、匹配给定的属性的值是以value开头的元素

    2、例如

    查找所有 name 以 'news' 开始的 input 元素

  •  
  • 
    <input name="newsletter" />
    <input name="milkman" />
    <input name="newsboy" />
    
    
    $("input[name^='news']")
    
    
    //结果:
    
    			

    <input name="newsletter" />, <input name="newsboy" />

  • 五、[attribute$=value] 属性选择器

    1、匹配给定的属性的值是以value结尾的元素

    2、例如

    查找所有 name 以 'letter' 结尾的 input 元素

  •  
  • 
    <input name="newsletter" />
    <input name="milkman" />
    <input name="jobletter" />
    
    $("input[name$='letter']")
    
    
    
    					

    //结果:

      <input name="newsletter" /> <input name="jobletter" />

     

  • 
    
    
    
    

    六、[attribute*=value] 属性选择器


    1、匹配给定的属性的值包含value的元素

    2、例如

    查找所有 name 包含 'man' 的 input 元素

  •  
  • 
    <input name="man-news" />
    <input name="milkman" />
    <input name="letterman2" />
    <input name="newmilk" />
    
    
    $("input[name*='man']")
    
    
    
    			

    结果:

       <input name="man-news" /> <input name="milkman" /> <input name="letterman2" />

     

  • 七、[selector1][selector2][selectorN] 多个属性选择器

    1、复合属性选择器,需要同时满足多个条件时使用,多个属性值取交集

    2、例如

    (1)、查询一个input,类型是checkbox,name是chkName

    $("input[type=checkbox][name=chkName]")

    (1)、找到所有含有 id 属性,并且它的 name 属性是以 man 结尾

  •  
  • 
    <input id="man-news" name="man-news" />
    <input name="milkman" />
    <input id="letterman" name="new-letterman" />
    <input name="newmilk" />
    
    
    $("input[id][name$='man']")
    
    
    //结果:
    
    <input id="letterman" name="new-letterman" />
    
    					

     

  • 标签: