zoukankan      html  css  js  c++  java
  • 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");
     
  • 相关阅读:
    [中文翻译] ASP.NET 5 简介(Introducing ASP.NET 5,原作ScottGu 2015/2/23)
    会写网页 就会写手机APP #2-- 范例修正 , Hybrid Mobile Apps for ASP.NET Developers (Apache Cordova)
    vue事件处理
    vue渲染
    vue数组和对象方法
    vue样式绑定
    vue模板语法与绑定指令
    墨刀的使用
    ajax基础一
    解构赋值中圆括号问题及解构赋值的用途
  • 原文地址:https://www.cnblogs.com/lixiang1013/p/7620000.html
Copyright © 2011-2022 走看看