zoukankan      html  css  js  c++  java
  • (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 : 匹配所有的文件域

  • 相关阅读:
    svn command line tag
    MDbg.exe(.NET Framework 命令行调试程序)
    Microsoft Web Deployment Tool
    sql server CI
    VS 2010 One Click Deployment Issue “Application Validation did not succeed. Unable to continue”
    mshtml
    大厂程序员站错队被架空,只拿着五折工资!苟活和离职,如何选择?
    揭秘!Windows 为什么会蓝屏?微软程序员竟说是这个原因...
    喂!千万别忘了这个C语言知识!(~0 == -1 问题)
    Linux 比 Windows 更好,谁反对?我有13个赞成理由
  • 原文地址:https://www.cnblogs.com/luohaoran/p/6051224.html
Copyright © 2011-2022 走看看