jQuery学习总结01-选择器

下面简单介绍一个常用的jQuery使用方法，其他详细的猛戳这里

一、选择器

1.parent > child

说明：在给定父类的情况下匹配所有的子类

示例：

描述：匹配表单中所有的的子级input元素

HTML代码：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery代码：

$('form > input')

结果：

[<input name="name" />]

2.prev + next

说明：匹配紧跟在prev后面的next元素

示例：

描述：匹配所有跟在 label 后面的 input 元素

HTML代码：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery代码：

$('label + input')

结果：

[<input name="name" />, <input name="newsletter" />]

3.prev ~ siblings

说明：匹配prev元素之后的所有siblings元素

示例：

描述：找到所有与表单form元素同辈的input元素

HTML代码：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery代码：

$('form ~ input')

结果：

[ <input name="none" /> ]

4、:first

说明：获取第一个元素

示例：

描述：获取ul下面的第一个li元素

HTML代码：

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

jQuery代码：

$('li:first');

结果：

[li]

5、:not(selector)

说明：去除所有与给定选择器匹配的元素

示例：

描述：查找所有未选中的input元素

HTML代码：

<input name="apple" type="checkbox" />
<input name="organge" type="checkbox" />
<input name="flower" type="checkbox" checked="checked" />

jQuery代码：

$("input:not(:checked)")

结果：

[<input name="apple" type="checkbox" />, <input name="organge" type="checkbox" />]

6、:eq(index)

说明：匹配一个给定索引值的元素

示例：

描述：查找第二行

HTML代码：

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery代码：

$("tr:eq(1)")

结果：

[<tr><td>Header 1</td></tr>]

7、:gt(index) 和 :lt(index)

说明：获取匹配所有大于给定索引值的元素和获取匹配所有小于给定索引值的元素

示例：

描述：查找第二行和第三行

HTML代码：

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery代码：

$('tr:gt(0)')

结果：

[tr, tr]

8、:last

说明：获取匹配最后一个元素

示例：

描述：获取最后一个tr元素

HTML代码：

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery代码：

$('li:last')

结果：

[li]

9、:header

说明：匹配如h1、h2、h3之类的标签元素

示例：

描述：给页面所有标签加上背景色

HTML代码：

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

jQuery代码：

$(":header").css("background", "red");

结果：

h1和h2的背景色已经为红色
[h1, h2]

10、:animated

说明：匹配所有正在执行动画效果的元素

示例：

描述：只对不在执行动画效果的元素执行一个动画特效

HTML代码：

 <button id="run">Run</button>
 <div style="background-color: #303a40;width: 20px;height: 20px;position: relative"></div>

jQuery代码：

$('#run').click(function(){
    $('div:not(:animated)').animate({left: '+=20'},1000);
});

11、:focus

说明：匹配当前获取焦点的元素

示例：

描述：添加一个'focus'类名给那些有focus方法的元素

CSS代码：

.focused {
    background: #abcdef;
}

HTML代码：

<div id="content">
    <input tabIndex="1">
    <input tabIndex="2">
    <select tabIndex="3">
        <option>select menu</option>
    </select>
    <div tabIndex="4">
        a div
    </div>
</div>

jQuery代码：

$( "#content" ).delegate( "*", "focus blur", function( event ) {
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});

12、:contains(text)

说明：匹配包含给定文本的元素

示例：

描述：查找所有包含John的div元素

HTML代码：

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

jQuery代码：

$('div:contains("John")')

结果：

[div, div]

13、:empty

说明：匹配不包含子元素或者文本为空的元素

示例：

描述：查找不包含子元素或文本为空的元素

HTML代码：

<table>
      <tr>
          <td>Value 1</td>
          <td></td>
      </tr>
      <tr>
          <td>Value 2</td>
          <td></td>
      </tr>
</table>

jQuery代码：

$('td:empty')

结果：

[td, td]

14、:has(selector)

说明：匹配含有选择器所匹配的元素的元素

示例：

描述：给所有包含p元素的div元素添加一个text类

HTML代码：

 <div>
    <p>Hello</p>
 </div>
 <div>Hello again!</div>

jQuery代码：

$('div:has(p)').addClass('text');

15、:parent

说明：匹配含有子元素或者文本的元素

示例：

描述：查找所有包含文本或者子元素的td元素

HTML代码：

<table>
      <tr>
          <td>Value 1</td>
          <td></td>
      </tr>
      <tr>
          <td>Value 2</td>
          <td></td>
      </tr>
</table>

jQuery代码：

$('td:parent')

结果：

[ <td>Value 1</td>, <td>Value 2</td> ]

16、:hidden和:visible

说明：匹配所有不可见元素或者type为hidden的元素，:visible匹配所有可见元素

示例：

描述：查找隐藏的tr元素

HTML代码：

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

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

jQuery代码：

$('tr:hidden');
$('input:hidden');

结果：

[tr]
[input]

17、[attribute]、[attribute=value]、[attribute!=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]、[selector1][selector2][selectorN]操作

说明：[attribute] 匹配包含给定属性的元素

　　　[attirbute=value] 匹配给定某个属性为value值的元素

　　　[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于 :not([attr=value]) 要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])

　　　[attribute^=value] 匹配给定的属性是以某些值开始的元素

　　　[attribute$=value] 匹配给定的属性是以某些值结尾的元素

　　　[attribute*=value] 匹配给定的属性包含某些值的元素

　　　[selector1][selector2][selectorN] 复合性选择器，需要同时满足多个条件时使用

示例：

描述：1.查找含有id属性的的div元素

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

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

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

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

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

　　   7.查找含有id属性，并且name属性是以man结尾的

HTML代码：

示例一：
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

示例二：
<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 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" />
<input name="milkman" />
<input name="newsboy" />

示例五：
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

示例六：
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />

jQuery代码：

$('div[id]');
$('input[name="newsletter"]');
$('input[name^="news"]');
$('input[name$="letter"]');
$("input[name*='man']");$("input[id][name$='man']");

18、:first-child和:last-child

说明：匹配所给选择器（：之前的选择器）的第一个子元素，类似:first匹配第一个元素，但是:first-child可以同时匹配多个元素，即为每个父级元素匹配第一个子元素

　　　匹配所给选择器（：之前的选择器）的最后一个子元素，类似:last匹配第一个元素，但是:last-child可以同时匹配多个元素，即为每个父级元素匹配第后一个子元素

示例：

描述：在每个 ul 中查找第一个 li

　　　在每个 ul 中查找最后一个li

HTML代码：

<ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
 </ul>
 <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
 </ul>

jQuery代码：

$('ul li:first-child');
$('ul li:last-child');

19、:input

说明：匹配所有 input, textarea, select 和 button 元素

示例：

描述：查找所有的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>,
 ]

20、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file、:enable、:disable、:checked、:selected

说明：:text 匹配所有的单行文本框

　　　:password 匹配所有密码框

　　　:radio 匹配所有单选按钮

　　　:checkbox 匹配所有复选框

　　　:submit 匹配所有提交按钮，理论上只匹配 type="submit" 的input或者button，但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果。为了防止歧义或者误操作，建议所有的button在使用时都添加type属性。

　　　:image 匹配所有图像域

　　　:reset 匹配所有重置按钮

　　　:button 匹配所有按钮

　　　:file 匹配所有文件域

　　　:enable 匹配所有可用元素

　　　:disable 匹配所有不可用元素

　　　:checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected

　　　:selected 匹配所有选中的option元素

示例：

描述：查找所有文本框

　　　查找所有密码框

　　　查找所有单选按钮

　　　查找所有复选框

　　　查找所有提交按钮

　　　查找所有图像域

　　　查找所有重置按钮

　　　查找所有按钮

　　　查找所有文件域

　　　查找所有可用元素

　　　查找所有不可用元素

　　　查找所有选中的复选框元素

　　　查找所有选中的选项元素

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>

#特殊示例  查找所有选中的复选框元素
<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>

#特殊示例 查找所有选中的选项元素
<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

jQuery代码：

$(':button');
$('input:checked')
$('select option:selected');

结果：

[ <input type="button" />,<button></button> ]

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

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