强大的jQuery选择器

强大的jQuery选择器


背景:

    + 考虑兼容问题,原生js提供的的选择DOM的方法只有两个:

      - 通过id属性获取指定元素-->document.getElementById()

      - 通过标签名获取指定元素-->document.getElementsByTagName()

    + 而jQuery实现了从CSS1到CSS3所有的选择器以及其他所有的选择器,各选择器之间可以相互替代。

      - 重点是:不存在兼容性问题!

Ⅰ、选择器


1、jQuery选择器的类型有:

  id选择器、类选择器、标签选择器、后代选择器、父子选择器、伪类选择器、表单选择器、属性选择器、通配符选择器、混合选择器

**id选择器 ** ------

  • $("#id") 获取到的是具有该id属性的唯一的元素

标签选择器 ------

  • $("标签名") 获取到的是所有的该标签元素,返回一个标签元素数组

类选择器 ------

  • $(".类名") 获取到的是所有的该类的元素

通配符选择器 ------

  • $("") 选择文档*中的所有的元素

后代选择器 ------

  • $("li .link") 选择li元素下面的所有的具有类名叫link的后代元素

父子选择器 ------

  • $("ul>li") 选择父元素ul下面的所有的直接子元素li

伪类选择器 ------

  • $("ul li:eq(2)") 选择ul下面的第3个li元素(索引值从0开始)
  • $("li:even") 选择所有的偶数li
  • $("li:odd") 选择所有的奇数li

表单选择器 ------

  • $(":checkbox") 所有 type="checkbox" 的 input 元素
  • $(":checked") 所有被选中的 input 元素
  • $(":text") 所有 type="text" 的 input 元素

属性选择器 ------

  • $("li[id]") 所有带有id属性的li元素
  • $("li[id='link']") 所有id属性值为link的元素
  • $("li[id!='link']") 所有id属性值 为link的元素

混合选择器 ------

  • $("#id,.类名,标签名") 运用多种的选择方式进行联合选择

2、常用的选择器举例


*              $("*")              所有元素

#id            $("#lastname")      id="lastname" 的元素

.class          $(".intro")        所有 class="intro" 的元素

element        $("p")              所有 <p> 元素

.class.class    $(".intro.demo")    所有 class 具有 "intro" 且 "demo" 的元素

s1,s2,s3        $("th,td,.intro")  所有带有匹配选择的元素


:even      $("tr:even")    所有偶数 <tr> 元素

:odd        $("tr:odd")    所有奇数 <tr> 元素

:first      $("p:first")    第一个 <p> 元素

:last      $("p:last")    最后一个 <p> 元素


:eq(index)      $("ul li:eq(3)")    列表中的第四个元素(index 从 0 开始)

:gt(index)      $("ul li:gt(3)")    列出 index 大于 3 的元素 greater than

:lt(index)      $("ul li:lt(3)")    列出 index 小于 3 的元素 less than

:not(selector)  $("input:not(:empty)")  所有不为空的 input 元素

:header        $(":header")        所有标题元素 <h1> - <h6>

:animated      $(":animated")      所有正在执行动画的元素


:contains(text)    $(":contains('W3School')")  包含指定字符串的所有元素

:empty              $(":empty")                无子(元素)节点的所有元素

:hidden            $("p:hidden")              所有隐藏的 <p> 元素

:visible            $("table:visible")          所有可见的表格


[attribute]        $("[href]")        所有带有 href 属性的元素

[attribute=value]  $("[href='#']")    所有 href 属性的值等于 "#" 的元素

[attribute!=value]  $("[href!='#']")    所有 href 属性的值不等于 "#" 的元素

[attribute$=value]  $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素


:input      $(":input")        所有 <input> 元素

:text      $(":text")          所有 type="text" 的 <input> 元素

:password  $(":password")      所有 type="password" 的 <input> 元素

:radio      $(":radio")        所有 type="radio" 的 <input> 元素

:checkbox  $(":checkbox")      所有 type="checkbox" 的 <input> 元素

:submit    $(":submit")        所有 type="submit" 的 <input> 元素

:reset      $(":reset")        所有 type="reset" 的 <input> 元素

:button    $(":button")        所有 按钮元素(<button></button> 或者 input="button")

:image      $(":image")        所有 type="image" 的 <input> 元素

:file      $(":file")          所有 type="file" 的 <input> 元素


:enabled    $(":enabled")  所有激活的 input 元素

:disabled  $(":disabled")  所有禁用的 input 元素

:selected  $(":selected")  所有被选取的 input 元素

:checked    $(":checked")  所有被选中的 input 元素

Ⅱ 、运用场景(选择方法)

  • 获取父级元素

* $(selector).parent();    //获取直接父级

$(selector).parents('p'); //获取所有父级元素直到html

  • 获取子代和后代的元素

* $(selector).children();  //获取直接子元素

* $(selector).find("span"); //获取所有的后代元素  find方法 可能用的多。

  • 获取同级的元素

* $(selector).siblings()    //所有的兄弟节点

$(selector).next()        //下一个兄弟节点

$(selector).nextAll()    //后面的所有节点

$(selector).prev()        //前面一个的兄弟节点

$(selector).prevAll()    //前面的所有的兄弟节点

  • 过滤方法

* $("p").eq(1);          //取第n个p元素(index从0开始)

$("div p").last();        //取最后一个元素

$("div p").first();      //取第一个元素

$("p").filter(".intro");  //过滤,选择所有p标签带有 .intro类

$("p").not(".intro");    //去除,跟上面的filetr正好相反

Ⅲ、总结

jQuery选择器永远比你想象的要强大得多,只有你想不到,没有他做不到。这里基本上将常用的选择器罗列了一遍,也举了一些例子,既可以作为学习用,也可以方便日后查询。

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

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,485评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,751评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,242评论 1 41
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,118评论 0 0
  • 1、慈禧曾说过“清亡,除非灯头朝下“。结果几年后,电灯发明,灯头真朝下了。 2、中国第二套人民币中发行过面额为三元...
    韩韫泽阅读 528评论 0 0