jquery系列之一——选择器（其他选择器）

 29. 匹配所有 input, textarea, select 和 button 元素：Array<Element(s)>:input

示例：查找所有的input元素，下面这些元素都会被匹配到。  

html:

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
</form>

jquery:

$(":input")

结果:

[
    <input type="button" value="Input Button"/>,
    <input type="checkbox" />,
    <input type="file" />,
    <input type="hidden" />,
    <input type="image" />,
    <input type="password" />,
    <input type="radio" />,
    <input type="reset" />,
    <input type="submit" />,
    <input type="text" />,
    <select><option>Option</option></select>,
    <textarea></textarea>,
    <button>Button</button>
]

如果要查找所有input元素中类型为checkbox的元素：

 $(":input[type=checkbox]")

 

30. 匹配所有的单行文本框text：Array<Element(s)>:text

注意：不包括textarea（多行文本框）。

示例：查找所有文本框。  

html:

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jquery:

$(":text")

结果:

[<input type="text" />]

其他的还有：

匹配所有密码框：     $(":password")

匹配所有单选按钮：  $(":radio")

匹配所有复选框：      $(":checkbox")

匹配所有提交按钮：   $(":submit")

匹配所有图像域：      $(":image")

匹配所有重置按钮：   $(":reset")

匹配所有按钮：          $(":button")

匹配所有文件域：       $(":file")

 

 31. 匹配所有不可见元素，或者type为hidden的元素：Array<Element(s)>:hidden

示例：匹配type为hidden的元素。  

html:

<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>

jquery:

$("input:hidden")

结果:

[<input type="hidden" name="id" />]

还有一种场景：

例如：查找隐藏的 tr。

 html:

<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jquery:

$("tr:hidden")

结果:

[<tr style="display:none"><td>Value 1</td></tr>]

 

 32. 匹配所有可用元素：Array<Element(s)>:enabled

示例：查找所有可用的input元素。  

html:

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

jquery:

$("input:enabled")

结果:

[<input name="id" />]

 

 33. 匹配所有不可用元素：Array<Element(s)>:disabled

示例：查找所有不可用的input元素。  

html:

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

jquery:

$("input:disabled")

结果:

[<input name="email" disabled="disabled" />]

 

34. 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)：Array<Element(s)>:checked

示例：查找所有选中的复选框元素。  

html:

<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

jquery:

$("input:checked")

结果:

[
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />, 
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
]

 

35. 匹配所有选中的option元素：Array<Element(s)>:selected

示例：查找所有选中的选项元素。  

html:

<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

jquery:

$("select option:selected")

结果:

[<option value="2" selected="selected">Gardens</option>]

 

36.jQuery 属性选择器

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。