• jQuery选择器


    1、基本选择器

    名称 返回值 说明
    #myid <jQuery对象> 匹配一个id为myid的元素
    element <jQuery对象> 数组 匹配所有的element元素
    .myclass <jQuery对象> 数组 匹配所有的class为myclass的元素
    * <jQuery对象> 数组 匹配文档中所有的元素,包括html、head、body\
    selector1…selectorN <jQuery对象> 数组 匹配所有满足selector1、selector2或selectorN的元素

    2、层次选择器

    名称 返回值 说明
    elemenParent elementChild <jQuery对象> 数组 匹配elementParent下的所有子元素elementChild。如:
    $("div p")选择所有div下的p元素
    elemenParent > elementChild <jQuery对象> 数组 匹配elementParent下的子元素elementChild。如:
    $("div > p")选择所有上级元素为div的p元素
    prev+next <jQuery对象> 数组 匹配prev统计之后紧邻的元素next
    prev~siblings <jQuery对象> 数组 匹配prev同级之后所有平级的元素siblings

    3、基本滤镜选择器

    例如:
    名称 返回值 说明
    :first <jQuery对象> 匹配第一个元素
    :empty <jQuery对象> 数组 匹配所有没有子元素(包括文本内容)的元素
    都是以冒号开始的
    详细划分起来,可以分为
    位置滤镜选择器::first、:last、:even、:odd、:eq(index)、:gt(index)以及:lt(index)
    隐藏显示滤镜选择器::empty、:parent、:hidden以及:visible
    内容限制过滤选择器::contains(text)、:has(selector)、:not(selector)、:header以及:animated
    调用方式: $("div.test:contains('Lorem')").addClass("green");

    3、子元素滤镜选择器

    主要有四种形式:
    名称 返回值 说明
    E:nth-child(index/even/odd/equation) <jQuery对象> 数组 匹配所有E在其父元素下满足(index/even/odd/equation)条件的集合
    注:下表从1开始,括号中各个选项中一次只能选择一个,equation是一个表达式
    E: first-child <jQuery对象> 数组 如匹配所有E在其父元素下是第一个子元素的集合
    E: last-child <jQuery对象> 数组 如匹配所有E在其父元素下是最后一个子元素的集合
    E: only-child <jQuery对象> 数组 如匹配所有E是其父元素的唯一子元素的集合
    调用方式: $("ul li:first-child").addClass("green");
    4、表单滤镜选择器

    5、属性滤镜选择器

    名称 返回值 说明
    [attribute] <jQuery对象> 数组 匹配拥有attribute属性的元素
    [attribute=value] <jQuery对象> 数组 匹配属性attribute为value的元素
    [attribute!=value] <jQuery对象> 数组 匹配属性attribute不为value的元素
    [attribute^=value] <jQuery对象> 数组 匹配属性attribute的值以value开始的元素
    [attribute$=value] <jQuery对象> 数组 匹配属性attribute的值以value结尾的元素
    [attribute*=value] <jQuery对象> 数组 匹配属性attribute的值包含value的元素

    调用方式:$("input[class]").addClass("red");
    还有使用效果叠加的方式:
    $("input[class][name=firstname]").addClass("green");

     

  • 相关阅读:
    走进AngularJs(一)angular基本概念的认识与实战
    Android开发:关于WebView
    Mysql 命令大全
    gitHub
    jquery 使用方法
    JS:offsetWidthoffsetleft 等图文解释
    offsetHeight, clientHeight与scrollHeight的区别
    Angular学习-指令入门
    jQuery学习笔记(一):入门
    JACASCRIPT--的奇技技巧的44招
  • 原文地址:https://www.cnblogs.com/shudonghe/p/2857898.html
Copyright © 2020-2023  润新知