• jQuery选择器


     

    1、回顾CSS选择器

    基本选择器:标签选择器、ID选择器、类名选择器、多类名选择器、通配符选择器

            复杂选择器:子代选择器、后代选择器、交集选择器、并集选择器

            伪类选择器:a:link  a :hover  a:active  a:visited

    2、什么是jQuery选择器?

    1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

    2、jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。

    3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

    4、jQuery 中所有选择器都以美元符号开头:$()。

    3、划分

    ①    基本选择器

    名称

    用法

    描述

    ID选择器

    $(“#id”);

    获取指定ID的元素

    类名选择器

    $(“.class”);

    获取同一类class的元素

    标签选择器

    $(“div”);

    获取同一类标签的所有元素

    并集选择器

    $(“div,p,li”);

    使用逗号分隔,只要符合条件之一就可。获取所有的div、p、li元素

    交集选择器(标签指定式选择器)

    $(“div.redClass”);

    注意选择器1和选择器2之间没有空格,class为redClass的div元素,注意区分后代选择器。

     

    ②    层级选择器

    名称

    用法

    描述

    子代选择器

    $(“ul>li”);

    使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素

    后代选择器

    $(“ul li”);

    使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

     

    ③    过滤选择器

     

    用法

    描述

    :eq(index

    $(“li:eq(2)”).css(“color”, ”red”);

    获取到的li元素中,选择索引号为2的元素,索引号index从0开始。

    :odd

    $(“li:odd”).css(“color”, ”red”);

    获取到的li元素中,选择索引号为奇数的元素

    :even

    $(“li:even”).css(“color”, ”red”);

    获取到的li元素中,选择索引号为偶数的元素

     

    ④    筛选选择器(方法)

     

    用法

    说明

    children(selector)

    $(“ul”).children(“li”)

    相当于$(“ul>li”),子类选择器

    find(selector)

    $(“ul”).find(“li”);

    相当于$(“ul li”),后代选择器

    siblings(selector)

     

    $(“#first”).siblings(“li”);

    查找兄弟节点,不包括自己本身。

    parent()

    $(“#first”).parent();

    查找父亲

    eq(index)

    $(“li”).eq(2);

    相当于$(“li:eq(2)”),index从0开始

    next()

    $(“li”).next()

    找下一个兄弟

    prev()

    $(“li”).prev()

    找上一次兄弟

    Index()

    $(“li”).index()

    1、获取当前的位置(索引)

    2、返回指定元素相对于其他同级元素指定元素的index位置

    Not()

    $(“li”).not(“.li2”)

    返回指定元素之外的元素

  • 相关阅读:
    react之setState面试题
    react之setState异步和同步问题
    react关于setState的使用
    antd框架tree树动态插入,解决新版Antd无法使用TreeNodes问题
    postman测试接口时参数为数组时怎么测试?
    你不知道的react更新状态this.setState细节点
    浅谈md5加密技术
    浅谈纯文本&&富文本&&Markdown区别
    【LeetCode】43. Multiply Strings
    【LeetCode】44. Wildcard Matching (2 solutions)
  • 原文地址:https://www.cnblogs.com/wangxue13/p/13479754.html
Copyright © 2020-2023  润新知