jQuery选择器

一、种类   
       1、普通选择器:通过css选择器选择元素,也就是根据各种条件选择元素。
       2、过滤选择器:在选择器选择后,再根据需求再次过滤出需要的元素。-====================================

    选择器分类:基本选择器、层次选择器、属性选择器
    过滤器分类: 基本过滤选择器、可见性过滤选择器、内容过滤器、属性过滤器(即前面的属性选择器)、子元素过滤器、表单过滤器、表单对象过滤器

二、
    1、基本选择器
           1)标签选择器: $("标签名"), 例:$("div") 选择所有的div标签
           2)类选择器: $(".class") .例:$(".a") 选择所有class为a的标签
           3)并集选择器: $(".class,#id,标签名"),可以加入多个选择器,只要符合其中一种就被选择,每个选择器之间用“  ,”隔开,例:$("#a,.b,div") 同时选择id为a 和class为b和所有的div元素 。
           4)全局选择器:$("*"),选择所有元素
    2、层次选择器(通过DOM元素之间的层次关系来选取元素)
           1)后代选择器:$("祖先元素  后代元素") ,例:$("#a  div") 选择id为a下的所有div元素,注意是后代元素,不仅仅是子元素包括孙子辈,曾孙子辈等等都是后代。
           2)子选择器:$("父级元素>子元素"), 例:$("#a>div") 选择id为a的元素下的所有div子元素。
           3)相邻元素选择器:$("元素+兄弟元素"),例:$("#a+.b") 选择id为a的元素紧邻的class为b的兄弟元素,注意只选择一个元素
           4)同辈元素选择器:$("元素~兄弟元素"),例 :  $("#a~.b") 选择id为a的元素后的所有class为b的兄弟元素,注意这里选择的是所有兄弟元素。
    3.属性选择器(通过标签的属性来选择元素)
           1)属性选择器:$("[属性]"),例:$("[href]") 选择包含href属性的所有元素,注意,属性必须是行内属性,行外添加属性不识别。
           2)属性值选择器:$("[属性=属性值]"),例:$("[href=’sss']"),选择href值为sss的元素
           3)属性不等值选择器:$("[属性!=属性值]"),例:$("[href!='#']"),选择href属性值不等于 # 的所有元素
           4)属性起始值选择器:$("[属性^=属性值]"),例:$("[href^=‘http’]"),选择所有href属性值以http开头的元素。
            5)属性结束值选择器:$("[属性$=属性值]"),例:$("[href$=‘ss’]"),选择所有href属性值以 ss结尾的元素。
            6)属性所有值选择器:$("[属性*=属性值]"),例:$("[href$='ss']"),选择所有href属性值包含 ss 值的元素。 

注意:有特殊符号的值比如方法 b() 比如地址 “href='https://www.baidu.com/” 需要加单引号例: 
    $("[onclick='bb()]'") 或 $("[href='https://www.baidu.com/']") 当然不加单引号也可以使用的值加入单引号的写法也不出错,所以不熟练的情况下可以所有的属性值都加单引号。   

三、过滤器
    过滤器用法 选择器:过滤器 例 $("li:first") 选择li标签,然后过滤选择第一个元素,最终结果是选择第一个li标签
     1、基本过滤器
        1):first 选取第一个元素,例:$("li:first")
        2):last 选取最后一个元素,
        3):not(选择器) 选取除去所有与给定选择器匹配的元素,例:$("li:not(aa)"),选择所有class不为 aa的li元素。    
        4):even 选取索引是偶数的元素,索引从0开始
        5):odd 选取索引是奇数的元素,索引从0开始
        6):eq(index) 选取索引等于index的元素,索引从0开始
        7):gt(index) 选取索引大于index的元素,索引从0开始
        8):lt(index) 选取索引小于index的元素,索引从0开始
        9):header 选取所有的标题元素 h1~h6
        10):focus 选取当前获取焦点的元素
        11):animated,选取当前所有动画元素,只能选择使用jQuery方法 元素.animate() 设置的动画元素.

    2、可见性过滤器
        1):visibe   选取所有可见的元素 
        2):hidden    选取所有隐藏的元素

jQuery选择器特殊符号转义
    id="a#b" 或 class="b[0]" 如果选择器选择元素时有类似于这两种有特殊符号的值那么需要在特殊符号前加入“\\” ,"#a\\#b" 和 “b\\[0\\]” 

jQuery选择器中的空格
    选择器的写法规范很严谨,空格多一个或少一个都会影响选择器的效果
var $t_a = $(".test :hidden"); //带空格的jQuery选择器,取class为“test”的元素内部的隐藏元素
var $t_b = $(".test:hidden"); //不带空格的jQuery选择器 ,选取隐藏的class为“test”的元素
    

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容