• JQuery选择器


    语法风格

    • jquery入口
    $(function(){
    //页面加载完毕后开始执行此方法
    });

    选择器

    • $("选择器") 选中需要的元素DOM对象(有可能是多个)并封装为jquery对象

    基础选择器 Basic Selectors

    $("*") 选中所有的元素 别用啊~

    id选择器

    • $("#属性名") 选中第一个找到的属性名为"属性名"的元素
    用法: $("#id属性值");   返回值是单个元素组成的集合
    如:$(“#myDiv”);
    说明: 这个就是直接选择html中的id="myDiv"的标签

    class选择器

    • $(".类名") 选中全部拥有此class属性的值为"类名"的元素
    用法:$(".class属性"); 返回所有相同class属性相同的元素,是个数组
    如:$(“.myclass”)
    说明:返回所有class=“myclass”的标签数组

    标签名选择器

    • $("标签名")选中全部标签名为"标签名"的元素
    用法:$(“标签名”) ; 返回所有选中的标签名相同的元素数组
    如:$(“p”)
    说明:返回所有的p元素组成的数组

    并集选择器

    • $("元素1,元素2,元素n") 选中多个元素,元素1-n可以是以上任意一种选择器
    就是多个选择器同时使用、
    如: $("div,p,.title" )选取所有div、p和拥有class为title的元素

    属性选择器Attribute Selector

    • $("元素属性名") 选中全部包含"属性名"的"元素"
    • $("元素[属性名='属性值']")选中全部包含“属性名”为“属性值”的"元素"
    • $("元素[属性名!='属性值']")选中全部包含“属性名”不为“属性值”的"元素"
    • $("元素[属性名|='属性值']")选中全部包含“属性名”为“属性值”前缀的"元素",前缀指的是要么单独出现,要么和后面单词有一定的分割 " "和"-"
    • $("元素[属性名$='属性值']")选中全部包含“属性名”为“属性值”后缀的"元素",后缀只要包含了'属性值'就会被选中
    • $("元素[属性名^='属性值']")选中全部包含“属性名”为“属性值”前缀的"元素",前缀只要包含了'属性值'就会被选中
    • $("元素[属性名~='属性值']")选中全部包含“属性名”为“属性值”的"元素",包含指的是 单词是独立的,不存在字符的拼接。包含man 是 n man 或 man kim ,不能是nman 、manjjj这样的 $("元素[属性名*='属性值']")选中全部包含“属性名”为“属性值”的"元素",此包含指的是 只要字符中包含了属性值就可以了,无论是否有拼写,包含man 是 n man 或 man kim 也可以是nman 、manjjj这样的

    基础过滤选择器:Basic Filter

    • $("基础选择器:first") 选中需要包含的第一个元素
    • $("基础选择器:last") 过滤包含的最后一个元素
    • $("基础选择器:eq(下标)") 选中包含多个元素的 下标 元素
      • (选中下标所表示的元素)
      • 下标如果是正数则从前向后找
      • 如果为负数则从后向前找
      • 负数没有-0,如果要找最后一个元素是-1
    • $("基础选择器:even") 选中下标为偶数的元素 从0开始
    • $("基础选择器:odd") 选中下标为奇数的元素
    • $("基础选择器:lt(下标)") 选中包含下标之前的全部元素
      • 如果下标为2 则会选中 0-1下标的元素
      • 如果为负数则从后向前选对选中的对象进行排除
    • $("基础选择器:not(selector)") 排除selector为选择器的元素
      • selector是选择器
      • 在“基础选择器”选中的元素中排除通过"selector"选中的元素

    关系选择器

    • $("父级 子级") 选中"父级"全部的“子级”元素,无论中间是否有其他标签
    • $("父级>子级") 选中"父级"的直接“子级”元素,只会选中第一层的关系。
    • $("p+n") 选中p元素后的n元素,只选中p元素后的第一个n元素
    • $("p~n") 选中p元素后的全部n元素

    子过滤选择器

    • $("父级 子级:first-child") 选中全部的“父级”下第一个“子级”元素
      • 如果用"父级 子级:first"只会选中第一元素,而“父级 子级:first-child”可以选中多个元素
      • 坑:如果"父级 子级"的"子级"不是第一个元素则不会被选中
    $("div p:first-child")
    

    这样的形式 会选中第一个p标签

    这样的形式 不会选中第一个p标签

    • $("子级:first-of-type") 选中作为子级的第一个“子级”元素,无论是否是第一个子标签
    $("p:first-of-type")
    

    这样的形式 会选中第一个p标签

    这样的形式 也会选中第一个p标签

    这样的形式 也会选中第一个p标签 $("div p:first-of-type")

    这样的形式 会选中第一个p标签

    这样的形式 也会选中第一个p标签

    这样的形式不会选中第一个p标签

    • $("父级 子级:nth-child(元素的位置)") 选中“父级 子级”的第“元素的位置”的元素
      • 元素的位置不是下标,从1开始
      • 子元素指的是父元素下的子元素,不一定是“子级”代表的同样标签的子元素
    • ("子级:nth-of-type(元素的位置)") 选中“子级”在父级的第几个相同元素,元素的位置不能为负值

    表单元素选择器: 只能用于表单标签

    • $("p:checked") 选中被选中的元素,一般用于复选按钮、单选按钮和option
    • $("p:enabled") 选中被激活的元素
    • $("p:disabled") 选中被屏蔽的元素
  • 相关阅读:
    Python中利用SQLAlchemy模块操作MySQL数据库
    MP4 格式:最少加载多少数据就能渲染出视频首帧?优化短视频播放体验必须先了解它丨音视频基础
    FreeRTOS学习day1
    java考点之程序看界面响应
    【Java基础】分支结构之switch语句及for循环结构
    【吴恩达机器学习-笔记整理】SVM-支持向量机(新的代价函数,最大间隔,高斯核函数,特征数与样本数不同大小关系时的选择)
    【填空题】130道面试填空题
    python写一个文本处理器
    企业数字化转型与供应链效率-基准回归复刻(2007-2022年)
    git rebase与git merge图文详解(一文看懂区别)
  • 原文地址:https://blog.csdn.net/m0_73030012/article/details/126905544