zoukankan      html  css  js  c++  java
  • 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
      })

     

     

                          

  • 相关阅读:
    XML(学习笔记)
    css样式学习笔记
    Request(对象)
    sql一些错误修改的总结
    转载(如何学习C#)
    sql server(学习笔记2 W3Cschool)
    sql sqrver(学习笔记1 W3Cschool)
    关于 flutter开发碰到的各种问题,有的已经解决有的一直没解决或者用其他方法替代
    关于 Flutter IOS build It appears that your application still contains the default signing identifier.
    关于 flutter本地化问题 The getter 'pasteButtonLabel' was called on null
  • 原文地址:https://www.cnblogs.com/lzb0803/p/9189184.html
Copyright © 2011-2022 走看看