jQuery选择器

目录

 

选择器

基本选择器

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

过滤选择器：

表单选择器

---

选择器

css的选择器的语法

根据选择器规则在整个文档中查找所有匹配的相应的元素，并封装为对象

基本选择器

            <script type="text/javascript">
    //选择id为div1的元素
    $("#div1").css('background','red')
    //选择所有的div元素
    $('div').css('background','green')
    //选择所以class为box的元素
    $('.box').css('background','blue')
    //选择所有的div和span元素
    $('div','span')
    //选择所有class为box的
    $('div.box').css('background','yellow')
            </script>

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

   //选中ul下所有的span
    $('ul span').css('background','yellow')
    //选中ul下所有的子元素span
    $('ul>span').css('background','yellow')
    //选中class为box的下一个li
    $('.box+li').css('background','yellow')
    //选中ul下的class为box的元素后面的所有的兄弟元素
    $('ul .box~*').css('background','yellow')

过滤选择器：

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

多个过滤选择器不是同时执行的 依次执行

<script>
//       1. 选择第一个div
    $('div:first').css('background','yellow')
//    2. 选择最后一个class为box的元素
    $('div:last').css('background','yellow')
//    3. 选择所有class属性不为box的div
    $('div:not(.box)').css('background','yellow')
//    4. 选择第二个和第三个li元素
  //  $('li:gt(0):lt(2)').css('background','yellow')
    $('li:lt(3):gt(0) ').css('background','yellow')   
//    5. 选择内容为BBBBB的li
    $('li:contains("BBBBB")').css('background','blue')    
//    6. 选择隐藏的li
    console.log($('li:hidden').length,$('li:hidden')[0])   
//    7. 选择有title属性的li元素
    $('li[title]').css('background','skyblue')   
//    8. 选择所有属性title为hello的li元素
    $('li[title="hello"]').css('background','yellow')
    
</script>

 

表单选择器

      <script type="text/javascript">
            //选择不可输入的文本框
            $(':text:disabled').css('background','red')
            //选择爱好的个数
            console.log($(':checkbox:checked ').length)
            //显示选择的城市的名称
            $(':submit').click(function(){
               var city =  $('select>option:selected').html()//选择是的option的文本
               city = $('select').val() //选择的option的value属性
                alert(city)
            })
           
      </script>