jQuery几乎支持主流的css1~css3选择器的写法
<div
class="container">
<ul id
="box">
<li
class="one">1</li
>
<li
class="two">2</li
>
<li
><a
>3</a
></li
>
<li
>4</li
>
<li
>5</li
>
<li
>6</li
>
<li
>7</li
>
<a
>8</a
>
</ul
>
</div
>
一、基本选择器
全选选择器 $('*')标签选择器 $('li')类选择器 $(".container")id选择器 $("#box")交集选择器 $("p .one")并集选择器 $(".one,.two")
二、层级选择器
子代 $("#box > a") //选中内容为8的a标签
后代 $("#box a") //选中内容为8和内容为3的a标签
一般兄弟选择器 $(".one ~ li") // 选中内容为2,3,4,5,6的li
// 一般兄弟选择器$(‘prev ~ siblings’)选择’prev’元素之后的所有同级的’siblings’元素,并返回集合元素
相邻兄弟选择器 $(".one + li") // 选中内容为2的li
// 相邻兄弟选择器$(‘prev + next’)选择所有紧跟在’prev’元素后的’next’元素,并返回集合元素
三、过滤选择器(部分)
:odd 奇数 $('li:odd') // 返回内容为2,4,6的li:even 偶数 $('li:even') // 返回内容为1,3,5,7的li:eq 指定下标 $(‘li:eq(0)’) // 返回内容为1的li:first 第一个子元素 $(‘li:first’) // 返回内容为1的li:last 最后一个子元素 $(‘li:last’) // 返回内容为7的li:gt 大于第几个下标的子元素 $('li:gt(5)') // 返回内容为7的li:lt 小于第几个下标的子元素 $('li:lt(1)') // 返回内容为1的li
四、筛选选择器 (方法)
children()子元素 $('#box').children('a') // 返回内容为8的afind() 后代 $('#box').find('a') // 返回内容为3,8的aparent() 父元素 $('.one').parent() // 返回ulsiblings()兄弟元素(不包括自己) $('.one').siblings('li') // 返回内容为2,3,4,5,6,7的linext() 下一个兄弟 $(’.two’).next() //返回内容为3的liprev() 上一个兄弟 $(’.two’).prev() //返回内容为1的liprevAll() 前面所有的兄弟prevUntil() 前面直到某一个兄弟nextAll() 后面所有的兄弟nextUntil() 后面直到某一个兄弟eq() 指定下标 $(‘li’).eq(0) //返回内容为1的li
注:
jQuery获取元素下标:$(’.two’).index() // 1
web前端交流QQ群:327814892