jQuery学习之一_H5之家 - 中国HTML5教程资源分享第一站

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

基本选择器

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

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

2.element：标签名选择器

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

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

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

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

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

> > <p></p> $("div#div,p");//>,<p></p> 层级选择器

1.后代选择器 div span

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

2.子代选择器 div>span

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

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

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

4.兄弟选择器 div ~ span

>1>2</div> </div> $("span ~ div");//<div>1</div>，<div>2</div> 基本筛选选择器

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

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

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

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

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

>>> $(":header");//> 内容选择器

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

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

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

> > $("div:parent");//>,<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></div> $("div:visible");//<div></div> $("div:hidden");//> 属性选择器

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

> > $("div[id]");//>

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

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

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

> > > $("div[id* = '1']");//> $("div[id^ = 'new']");//> $("div[id$ = 'Girl']");//> 子元素选择器

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

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

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

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

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

>Karl> >Tane> > $("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>