• (2)jQuery篇 —— jQuery选择器


    1. 基本选择器

    (1) id选择器: $( '#div1' )  // 选择id为div1的元素

    (2) 标签选择器: $( 'a' )  // 选择所有的a标签

    (3) 类选择器: $( '.wrap' )  // 选择class为wrap的元素

    (4) 通配符选择器: $( '*' )  // 选择所有的页面元素

    (5) 组合选择器: $( '#div1 , a , .wrap' )  // 中间需要用逗号隔开

    2. 层次选择器

    (1) 后代选择器: $( '.wrap img' )  // 选择class为wrap的元素下的所有img标签,注意中间的空格哦

    (2) 父子选择器: $( '.div1 > li' )  // 选择class为div1下面的直接子节点li标签,注意,不是太懂的可以参考CSS选择器

    (3) 相邻选择器: $( '.div2 + p' )  // 选择class为div2后面相邻的p标签

    (4) 同级选择器: $( '.div3 ~ p' )  // 选择class为div3后同级的p标签

    对于这里有不懂或不清楚的地方,我推荐两本书《图解CSS3核心技术与案例实战》和《CSS3专业网页开发指南》,可以加深对CSS选择器的理解。

    如果有需要PDF版本的,可以留言留下邮箱,我这里有高清的版本,可以免费发给你。

    3. 过滤选择器

    基本选择器:

    (1) :first : 匹配找到的第一个元素

    (2) :last : 匹配找到的最后一个元素

    (3) :not(selector) : 去除所有与给定选择器匹配的元素

    (4) :odd : 匹配所有索引值为奇数的元素,从0开始计数

    (5) :even : 匹配所有索引值为偶数的元素,从0开始计数

    (6) :eq : 匹配一个给定索引值的元素

    (7) :gt : 匹配所有大于给定索引值的元素

    (8) :lt : 选择结果集中索引小于N的elements

    (9) :header : 匹配h1、h2、h3...的header标签

    (10) :animated : 匹配所有正在执行动画效果的元素

    内容过滤选择器

    (11) :contains(text): 匹配包含给定文本的元素

    (12) :empty : 匹配所有不包含子元素或者文本的空元素

    (13) :has : 匹配含有选择器所匹配的元素的元素  例如:$( 'div:has(p)' ).addClass('test')  // 给所有包含p元素的div添加一个text类

    (14) :parent : 匹配含有子元素或者文本的元素

    可见性过滤选择器

    (12) :hidden : 匹配所有的不可见元素

    (13) :visible : 匹配所有的可见元素

    属性过滤选择器

    (14) [attribute] : 匹配包含给定属性的元素

    (15) [attribute=value] : 匹配包含给定属性是某个特定值的元素

    (16) [attribute!=value] : 匹配包含给定属性不包含某个特定值的元素

    (17) [attribute^=value] : 匹配包含给定属性是以某个特定值开头的元素

    (18) [attribute$=value] : 匹配包含给定属性是以某个特定值结尾的元素

    (19) [attribute*=value] : 匹配包含给定属性是包含某些值的元素

    (20) [attributeFilter1][attributeFilter2][attributeFilterN] : 复合属性选恶气,需要同时满足多个条件时使用

    子元素过滤选择器

    (21) :nth-child() : 匹配其父元素下第N个子元素或奇偶元素

    (22) :first-child : 匹配第一个子元素

    (23) :last-child : 匹配最后一个子元素

    (24) :only-child : 如果某个元素是父元素中唯一的子元素,则匹配;否则,不匹配

    表单对象属性过滤器

    (25) :enabled : 匹配所有可用元素

    (26) :disabled : 匹配所有不可用元素

    (27) :checked : 匹配所有被选中元素(不包括select下的option)

    (28) :selected : 匹配所有选中的option元素

    表单选择器

    (29) :input  : 匹配所有input、textarea、select和button元素

    (30) :text : 匹配所有的文本框

    (31) :password : 匹配所有的密码框

    (32) :radio : 匹配所有的单选按钮

    (33) :checkbox : 匹配所有的复选按钮

    (34) :submit : 匹配所有的提交按钮

    (35) : image :匹配所有图像域

    (36) :reset : 匹配所有的重置按钮

    (37) :button : 匹配所有的按钮

    (38) :file : 匹配所有的文件域

  • 相关阅读:
    systemctl命令
    linux下常用命令查看端口占用
    【PostgreSQL】存取jsonb
    tomcat内存溢出之PermGen space
    Spring事务传播机制
    java框架篇---spring aop两种配置方式
    Hibernate一对多实例
    Github 的系统内部都在用什么开源软件?
    这是一个关于软件开发的博客。
    JavaScript中数组的集合和映射
  • 原文地址:https://www.cnblogs.com/luohaoran/p/6051224.html
Copyright © 2020-2023  润新知