jQuery选择器

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的a
• find（） 后代 $('#box').find('a') // 返回内容为3,8的a
• parent() 父元素 $('.one').parent() // 返回ul
• siblings()兄弟元素（不包括自己） $('.one').siblings('li') // 返回内容为2,3，4,5，6,7的li
• next() 下一个兄弟 $(’.two’).next() //返回内容为3的li
• prev() 上一个兄弟 $(’.two’).prev() //返回内容为1的li
• prevAll() 前面所有的兄弟
• prevUntil() 前面直到某一个兄弟
• nextAll() 后面所有的兄弟
• nextUntil() 后面直到某一个兄弟
• eq() 指定下标 $(‘li’).eq(0) //返回内容为1的li

注：

• jQuery获取元素下标：$(’.two’).index() // 1

前端进阶精选：点此去