• jQuery-选择器


    一:JQuery和DOM转换  

      转换:
      jquery对象[0] => Dom对象
      Dom对象 => $(Dom对象)

    $('#i1')[0] <=====>document.getElementById('i1')
    
    d=document.getElementById("i1")
    $(d)

    二:选择器

      选择器分为:基本选择器,层级选择器,属性选择器,基本筛选器

      1)基本选择器

    选择器 使用 说明 例子
    ID #id 根据给定的ID匹配一个元素 $("#li")
    元素 element 根据给定的元素标签名匹配所有元素 $("a")
    .class 根据给定的css类名匹配元素 $(".li")
    * * 匹配所有元素  
    组合

    selector1,selector2

    将每一个选择器匹配到的元素合并后一起返回
    $("div,span,p.myClass")

      

      2)层级选择器

    使用 说明 例子 备注

    ancestor descendant

    在给定的祖先元素下匹配所有的后代元素
    $("form input")
     
    parent>child 在给定的父元素下匹配所有的子元素
    $("form > input")
     
    prev+next 匹配所有紧接在 prev 元素后的 next 元素
    $("label + input")
    使用比较少,可以使用筛选器替代
    prev  ~siblings 匹配 prev 元素之后的所有 siblings 元素
    $("form ~ input")
    使用比较少,可以使用筛选器替代

      3)属性选择器

    使用 说明 例子 备注

    [attribute]

     匹配包含给定属性的元素  
    $("div[id]")
     

    [attribute=value]

     匹配给定的属性是某个特定值的元素  
    $("input[name='newsletter']")
     

    [attribute!=value]

     匹配所有不含有指定的属性  
    $("input[name!='newsletter']")
     

    [attribute^=value]

     匹配给定的属性是以某些值开始的元素  
    $("input[name^='news']")
     
     [attribute$=value]  匹配给定的属性是以某些值结尾的元素  
    $("input[name$='letter']")
     

    [attribute*=value]

     匹配给定的属性是以包含某些值的元素  
    $("input[name*='man']")
     

    [attrSel1][attrSel2][attrSelN]

     复合属性选择器,需要同时满足多个条件时使用  
    $("input[id][name$='man']")
     

      4)基本筛选器

    使用 说明 例子 备注

    :first

     获取第一个元素  
    $('li:first');
     

    :not(selector)

     去除所有与给定选择器匹配的元素  
    $("input:not(:checked)")
     

    :even

     匹配所有索引值为偶数的元素,从 0 开始计数  
    $("tr:even")
     

    :odd

     匹配所有索引值为奇数的元素,从 0 开始计数  
    $("tr:odd")
     

    :eq(index)

     匹配一个给定索引值的元素  
    $("tr:eq(1)")
     

    :gt(index)

     匹配所有大于给定索引值的元素  
    $("tr:gt(0)")
     
    :last  获取最后个元素  
    $('li:last')
     

    :lt(index)

     匹配所有小于给定索引值的元素    
    :header  匹配如 h1, h2, h3之类的标题元素  
    $(":header").css("background", "#EEE");
     
  • 相关阅读:
    Individual Reading Assignment
    Individual P1: Summary
    Individual P1: Preparation
    M1m2分析报告
    第二次阅读作业--12061161 赵梓皓
    代码互审报告
    结对编程————电梯整理报告
    读书问题之《编程之美》 -----12061161 赵梓皓
    SE Class's Individual Project--12061161 赵梓皓
    博客测试
  • 原文地址:https://www.cnblogs.com/lixiang1013/p/7620000.html
Copyright © 2020-2023  润新知