jQuery（选择器）

 

 

1、基本选择器

　　a、id选择器

//1. 选择id为div1的元素
   $('#div1').css('background', 'red')
   $('#div1').css({"background":"red"})

　　b、元素选择器

//2. 选择所有的div元素
   $('div').css('background', 'red')

　　c、类型选择器

//3. 选择所有class属性为box的元素
  $('.box').css('background', 'red')

　　d、任意选择器

$('*').css('background', 'red')

　　e、并集选择器

//4. 选择所有的div和span元素
  $('div,span').css('background', 'red')

　　f、交集选择器

//5. 选择所有class属性为box的div元素
  $('div.box').css('background', 'red')

 

2、层次选择器：查找子元素, 后代元素, 兄弟元素的选择器

　　a、后代元素选择器：ancestor descendant    在给定的祖先元素下匹配所有的后代元素

//1. 选中ul下所有的的span
  $('ul span').css('background', 'yellow')

　　b、子元素选择器：parent>child   在给定的父元素下匹配所有的子元素

//2. 选中ul下所有的子元素span
  $('ul>span').css('background', 'yellow')

　　c、prev+next　　匹配所有紧接在 prev 元素后的 next 元素

//3. 选中class为box的下一个li
  $('.box+li').css('background', 'yellow')

　　d、prev~siblings    匹配 prev 元素之后的所有 siblings 元素

//4. 选中ul下的class为box的元素后面的所有兄弟元素
  $('ul .box~*').css('background', 'yellow')

 

 

3、过滤选择器：在原有选择器匹配的元素进一步进行过滤的选择器

　　a、基本过滤选择器

//1. 选择第一个div
  $('div:first').css('background', 'red')

//2. 选择最后一个class为box的元素
  $('.box:last').css('background', 'red')

//3. 选择所有class属性不为box的div
  $('div:not(.box)').css('background', 'red')  //没有class属性也可以

//4. 选择第二个和第三个li元素
  $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次
  $('li:lt(3):gt(0)').css('background', 'red')

　　b、内容过滤选择器

//5. 选择内容为BBBBB的li
  $('li:contains("BBBBB")').css('background', 'red')

　　c、可见性过滤选择器

//6. 选择隐藏的li
  console.log($('li:hidden').length, $('li:hidden')[0])

　　d、属性过滤选择器

 //7. 选择有title属性的li元素
  $('li[title]').css('background', 'red')

  //8. 选择所有属性title为hello的li元素
  $('li[title="hello"]').css('background', 'red')

 

隔行变色效果：

<script type="text/javascript">
  $('#data>tbody>tr:odd').css('background', '#ccccff')
  $('#data>tbody>tr:odd').addClass('odd')
  $('#data>tbody>tr:odd').attr('class', 'odd')
</script>

 

3、表单选择器

　　a、表单

　　b、表单对象属性

//1. 选择不可用的文本输入框
  $(':text:disabled').css('background', 'red')

//2. 显示选择爱好 的个数
  console.log($(':checkbox:checked').length)


  //3. 显示选择的城市名称
  $(':submit').click(function () {
    var city = $('select>option:selected').html() // 选择的option的标签体文本
    city = $('select').val()  // 选择的option的value属性值
    alert(city)
  })

 

 多Tab点击切换：

 var $contents = $('#container>div')
  // 给3个li加监听
  $('#tab>li').click(function () { // 隐式遍历
    //alert('----')
    // 隐隐藏所有内容div
    $contents.css('display', 'none')
    // 显示对应的内容div
    // 得到当前点击的li在兄弟中下标
    var index = $(this).index()
    // 找到对应的内容div, 并显示
    $contents[index].style.display = 'block'
    // $($contents[index]).css('display', 'block')
  })

 

var currIndex = 0 //当前显示的内容div的下标
  $('#tab>li').click(function () { // 隐式遍历
    //alert('----')
    // 隐藏当前已经显示的内容div
    $contents[currIndex].style.display = 'none'
    // 显示对应的内容div
      // 得到当前点击的li在兄弟中下标
    var index = $(this).index()
      // 找到对应的内容div, 并显示
    $contents[index].style.display = 'block'

    // 更新下标
    currIndex = index
  })