jQuery学习之一---选择器

本博文记录了大部分常用的jq选择器，需要的小伙伴可以过来瞅一眼哦，我会陆陆续续的更新系统的jq博文，一起加油吧！

基本选择器

1.id选择器：通过id名获取

 <div id="div"></div>
 $("$div");//<div id="div"></div>

2.element：标签名选择器

<div></div>
$("div");//<div></div>

3.类名选择器：通过类名选取

<div class="div"></div>
$(".div");//<div class="div"></div>

4.*：统配选择器，匹配所有元素

<div></div>
<span></span>
$("*");//<div></div><span></span>

5.群组选择器：将每一个选择器匹配到的元素合并后一起返回

<div id="div"></div>
<span class="span"></span>
<p></p>
$("div#div,p");//<div id="div"></div>,<p></p>

---

层级选择器

1.后代选择器 div span

<div>
    <span>1</span>
    <div>
        <span>2</span>
    </div>
</div>
$("div span");//<span>1</span>,<span>2</span>

2.子代选择器 div>span

<div class="div">
    <span>1</span>
    <div>
        <span>2</span>
    </div>
</div>
$(".div span");//<span>1</span>
请注意观察，这个时候第二个span标签是类名为div的孙子级了哦，所以不包含它

3.兄弟相邻选择器 div + span
紧邻在div后面的span标签

<div class="div">
    <span>1</span>
    <div>1</div>
    <div>
        <span>2</span>
    </div>
</div>
$("span + div");//<div>1</div>

4.兄弟选择器 div ~ span

<div class="div">
    <span>1</span>
    <div>1</div>
    <div>2</div>
</div>
$("span ~ div");//<div>1</div>，<div>2</div>

---

基本筛选选择器

1.：first和：last
获取第一个和最后一个元素

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
$("li:first");//<li>1</li>
$("li:last");//<li>3</li>

2.：gt(index)和：lt(index)
获取比大于/小于索引值的元素

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
$("li:gt(1)");//<li>3</li>
$("li:lt(2));//<li>1</li>

3.：header，标题元素的匹配

<ul>
    <li>1</li>
    <h1></h1>
    <li>2</li>
    <h5></h5>
    <li>3</li>
</ul>
$(":header");//<h1></h1>,<h5></h5>

---

内容选择器

1.：has(selector)，匹配含有选择器所匹配的元素的元素

<div><p>hello</p></div>
<div>hi</div>
$("div:has(p)");//<div><p>hello</p></div>

2.：parent，含有子元素或文本的元素
：empty，不含子元素或文本的元素

<div><p>hello</p></div>
<div>hi</div>
<div></div>
$("div:parent");//<div><p>hello</p></div>,<div>hi</div>
$("div:empty");//<div></div>

3.：contains（text），包含给定文本的元素

<div>hello</div>
<div>hi</div>
$("div:contains('hi')");//<div>hi</div>

---

可见性

:visible：匹配所有可见元素
:hidden：匹配所偶遇不可见或者type为hidden的元素

<div style="display:none"></div>
<div></div>
$("div:visible");//<div></div>
$("div:hidden");//<div style="display:none"></div>

---

属性选择器

1.[attr]：匹配包含给定属性的元素

<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
$("div[id]");//<div id="test2"></div>

2.[attr = value]：匹配给定的属性是某个特定值的元素
[attr != value]：匹配给定的属性不是某个特定值的元素

<div id="test1"></div>
<div id="test2"></div>
$("div[id = 'test1']");//<div id="test1"></div>
$("div[id != 'test1']");//<div id="test2"></div>

3.[attr^ = value]：匹配给定属性以value开头的元素
[attr$ = value]：匹配给定属性以value结尾的元素
[attr* = value]：匹配给定属性包含value的元素

<div id="news"></div>
<div id="youngGirl"></div>
<div id="test1"></div>
$("div[id* = '1']");//<div id="test1"></div>
$("div[id^ = 'new']");//<div id="news"></div>
$("div[id$ = 'Girl']");//<div id="youngGirl"></div>

---

子元素选择器

1.nth-child()：匹配其父元素下的第N个子或奇偶元素

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
$("ul li:nth-child(2)");//<li>Karl</li>,<li>Tane</li>
必须是同级里面所有标签顺序的第二个

2.nth-of-type()：选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。

<ul>
  <li>John</li>
  <span></span>
  <li>Karl</li>
  <span></span>
  <li>Brandon</li>
</ul>
$("li:nth-of-type(2)");//<li>Karl</li>
只要是同类标签的第几个即可，不用在乎中间有没有其他的标签

3.：first-child，：last-child，：only-child
匹配所给选择器的第一个元素；最后一个元素；如果某个元素是父元素中唯一的子元素，那将会被匹配

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
<ul>
  <li>Mike</li>
</ul>
$("ul li:first-child");// <li>John</li>, <li>Glen</li>
$("ul li:last-child");// <li>Brandon</li>, <li>Ralph</li>
$("ul li:only-child");//<li>Mike</li>

4.first-of-type，last-of-type
所有所有匹配标签的第一个，最后一个，和唯一一个

<ul>
  <span></span>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <span></span>
</ul>
$("ul li:first-of-type");//  <li>Karl</li>, <li>Glen</li>
$("ul li:last-of-type");// <li>Brandon</li>, <li>Tane</li>

---

表单选择器

1.：input

 <input type="file" />
 <input type="hidden" />
 <input type="image" />
 $(":input");//<input type="file" />,<input type="hidden" />,<input type="image" />

2.其他的就很简单了，是哪个选择器就对应的选择标签就可以了，下面以单选框和复选框打比方。
：radio，：checkbox

<input type="checkbox" />
<input type="file" />
<input type="password" />
<input type="radio" />
$("input:radio");//<input type="radio" />
$("input:checkbox");//<input type="checkbox" />

---

表单对象属性

1.:enabled,:disabled
匹配所有可用的不可用的元素

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>
$("input:enabled");//<input name="id" />
$("input:disabled");//<input name="email" disabled="disabled" />

2.:checked，单复选框的选中，select的option被选中

<input type="checkbox" checked="checked" />
<input type="radio" />
<select>
    <option checked="checked">1</option>
    <option></option>
</select>
$("input:checked");//<input type="checkbox" checked="checked" />
$("option:checked");//<option checked="checked">1</option>

3.:selected：匹配所有被选中的option元素

<select>
    <option checked="checked">1</option>
    <option>2</option>
    <option checked="checked">3</option>
</select>
$("select option:selected");//<option checked="checked">1</option>,<option checked="checked">3</option>