本博文记录了大部分常用的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>