• jQ选择器学习片段(JavaScript 部分对应)


    $()函数在大多的JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是。

      $(“#id”)通过id来获取元素,用来代替document.getElementById()函数。红色函数(JavaScript)

      $(“tagName”)通过标签名来获取元素,用来代替document.getElementsByTagName()函数。

      jQuery的基本语法是:$(selector).action(), selector即选择器。

    jQuery选择器的分类

      jQuery的选择器基本可以分为四大类:

      基本选择器(basic)

      层次选择器(level)

      过滤选择器(filter)

      表单选择器(form)

    一、基本选择器(basic)

      * 匹配所有元素.示例:$(“*")选取所有元素。

      #id根据给定的id匹配元素(最多只返回一个元素).示例: $("#IdName”)选取id="IdName"的元素。

      .class根据给定的类名匹配元素.示例:$(".ClassName”)选取所有class=“ClassName"的元素。

      element根据给定的元素名匹配元素.示例: $(“p")选取所有<p>元素。

      .class.class 示例: $(".ClassName.MyClass”)选取所有且class="MyClass”的元素.(交集)。

      selector1, selector2, …, selectorN, 将每一个选择器匹配到的元素合并后一起返回.(并集)。

      除了#id选择器返回单个元素,其他选择器返回的都是元素集合。

      这是因为HTML规范里面id应该是唯一的,所以重复id的元素没有被考虑。

      如果多个元素的id相同,取这个id也只能获取第一个元素.即获取的jQuery对象的length属性是1。

      如果要匹配的元素不存在,则都返回一个空的jQuery对象。

        基本选择器之间可以组合,用逗号分隔,结果取所有条件的结果的并集。

      当没有用逗号分隔时,应该是所有条件都满足的交集。

    二、层次选择器(level)

      $(“div span”) 选取dia元素里的所有span后代元素,包括直接子元素和更深嵌套的后代元素。(即在div 即可,无论是否多层嵌套

      例:$(“div span”)选取<div>里的所有的<span>元素。

      注意:选择器都是全页面扫描,返回一个集合,所有符合选择条件的元素都会被包括进去。所以多个<div>下面的<span>都会被选择。

      $(“parent>child”)选取parent元素下的child子元素,即只有直接子元素被选取.其他后代元素不包括.

      例:$(“div>span”)选取<div>元素下元素名是<span>的子元素.

      $(“prev+next”)选取紧接在prev元素后的next元素(同一层级)。

      例:$(“.one+div”)选取class为one的下一个div元素。

      $(“prev+siblings”)选取prev元素之后的所有siblings元素(同一层级)。

      例:$(“#two~div”)选取id为two的元素后面的所有<div>兄弟元素。

      等价方法:

      $(“prev+next”)等价于方法$(“prev”).next(“next”);选取prev元素之后紧接着的一个next元素。

      $(“prev~sublings”)等价于方法$(“prev”).nextAll(“sublings”),选取prev元素之后的所有同级的sublings元素。

      而$(“prev”).sublings(“next”)方法选取与prev同辈的所有next元素,与前后位置无关。

    三、部分过滤选择器

    基本过滤选择器规则:

    基本过滤选择器
    选 择 器 描 述 返 回 示 例
    :first 选取第1个元素 单个元素 $("div:first")选取所有 <div>元素
    中第一个<div>元素
    :last 选取最后1个元素 单个元素 $("div:last")选取所有 <div>元素
    中最后一个<div>元素
    :not(selector) 去除所有与给定选择器
    匹配的元素
    集合元素 $("input:not(.myClass)")选取class不是
    myClass的<input>元素
    :even 选取索引(从0开始)是偶数
    的所有元素
    集合元素 $("input:even")选取索引是偶数的
    <input>元素
    :odd 选取索引(从0开始)是奇数
    的所有元素
    集合元素 $("input:odd")选取索引是奇数的
    <input>元素
    :eq(index) 选取索引(从0开始)等于
    index的元素
    单个元素 $("input:eq(1)")选取索引等于1的
    <input>元素
    :gt(index) 选取索引(从0开始)大于
    index的元素
    集合元素 $("input:gt(1)")选取索引大于1的
    <input>元素
    :lt(index) 选取索引(从0开始)小于
    index的元素
    集合元素 $("input:lt(1)")选取索引小于1的
    <input>元素
    :header 选取所有的标题元素,即
    <h1>到<h6>
    集合元素 $(":header")选取页面中所有的标题元素
    :animated 选取当前正在执行动画的
    所有元素
    集合元素 $("div:animated")选取当前正在执行动画
    的<div>元素

    目前先写到这里!会陆续更新~~

  • 相关阅读:
    7
    6
    Robot Motion -- 机器人路径规划
    Delaunay Triangulation
    Voronoi Diagram -- 泰森多边形 (维诺图)
    Window query -- 区间线段包含问题
    5
    es6模块化
    js模块化编程之彻底弄懂CommonJS和AMD/CMD!
    混合开发菜鸟级别总结笔记 内容来自百度一下,你就知道
  • 原文地址:https://www.cnblogs.com/jicheng/p/5936048.html
Copyright © 2020-2023  润新知