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>