JQuery 选择器
2012-04-26 19:23
$() 是jQuery的一个工厂，可以把一个包含CSS选择器的字符串作为参数
例如：
$(‘.poem’) -> 获取到class=”poem”的所有元素
$(‘#pic .title’) -> 获取到id=”pic”下的所有class=”title”的元素
(和CSS选择器一样的方式)
.addClass(‘poem’)
在元素的class属性中加入poem，他的作用就是给元素添加CSS样式
与之相反的是
.removeClass(‘poem’)
$(‘.poem’).addClass(‘sized’) –> <div class=”poem sized”>
所有的开始class=”poem”的元素都会添加上sized
$(‘div’) –> 获取页面上所有的div元素
JQuery选择器 CSS XPath
$(‘#plays > li’) –> id=”plays”的下一级元素中的所有li元素，仅为子元素不包括孙子元素等再下级的元素
$(‘#plays li’) –> id=”plays”之下的所有li元素
$(‘#plays li:not(poem)’) –> id=”plays”之下所有class不含有poem的li元素，意思就是说将class=”poem”的li
元素剔除
XPath选择器
属性选择器
$(‘a[@href^=”mailto”]’) -> 得到href值以mailto开头的所有a元素
$(‘a[@href$=”.pdf”]’) -> 得到href值以.pdf结尾的所有a元素
$(‘a[@href*=”shzh.net”]’) -> 得到href值中包含shzh.net的所有a元素
//属性选择器 不知道怎么的 不可以成功还会出错：例外被抛出且没有被接住
自定义选择器
$(‘div.plays:eq(1)’) -> 得到class=”plays”的所有div元素的第二项，eq(0)是获取第一项
//这个有点类似CSS中的伪类选择符a.pic:link{}, a.pic:hover{}
$(‘div.nth-child(0)’) -> 得到所有div元素父元素的第一个子元素
在来看看另外两个选择器：基于:eq()的:odd 和 :even
$(‘div:odd’) -> 在获取的所有div元素中获取下标是奇数的元素
$(‘div:even’) -> 上面的相反 在获取的所有div元素中获取下标是偶数的元素
$(‘#plays’).parent() -> 获取id=”plays”的父节点。
$(‘li:not([span]):odd’) -> 获取所有li 排除子元素是<span>的 并且 该li在集合中的下标是奇数的。
$(‘li:odd:not([span])’) -> 获取所有li 并且下标是奇数的，子元素不是<span>的
$(‘#plays’).next() -> 获取id=”plays”的下一个兄弟节点
$(‘#plays’).siblings() -> 获取id=”plays”的所有兄弟节点
$(‘#plays’).find(‘td:gt(0)’) -> 获取id=”plays”下的所有td元素,然后获取td下标大于0的 //find()
== $(‘#plays td:gt(0)’)
$(‘#plays’).find(‘td’) -> 获取id=”plays”下的所有td元素
== $(‘#plays td’)
$(‘td:contains(“kko”)’) -> 获取所有td中有文字kko的td
一个例子：
$(‘td:contains(“kko”)’).parent().find(‘td:not(:contains(“kko”))’).addClass(‘highlight’);
分步骤解释：
·首先获取所有的td中有文字kko的td $(‘td:contains(“kko”)’)
·获取到上一级父元素 .parent()
·查找子元素td中不包含文字kko的td .find(‘td:not(:contains(“kko”))’)
·添加class属性值highlight .addClass(‘highlight’)
.get()
在JQuery中的JQuery对象中获取DOM元素的方式。因为上面介绍的选择器获取到的对象并非是DOM对象而是JQuery对象
，JQuery对象可以看做是具有一系列自己的方法的DOM集合对象。
$(‘div’).get(0) -> 获取到第一个div元素的DOM对象方式
== $(‘div’)[0]
$(‘div’).eq(0) -> 获取到第一个div元素的JQuery对象方式