jQuery选择器

原创 2018年04月16日 21:58:52

选择器

  • 1.基本选择器

    $('#id')
    $('.class')
    $("p")                  //选取所有p元素
    $("*")
    $("div,span,p.myClass") //div和span和拥有class属性为myClass的p标签

  • 2.层次选择器

    $("div span")           //div里的所有span
    $("div > span")         //div下元素名是span的子元素
    $(".one + div") <==>  $(".one").next("div");      //class为one的下一个div元素
    $("#two~div")   <==>  $("two").nextAll ("div");   //id为two的元素后面的所有div兄弟元素

  • 3.过滤选择器

        a.基本过滤选择器

        $("div:first")              //选取所有div元素中第一个div元素
        $("div:last")               //选取所有div元素中的最后一个div元素
        $("input:not(.myClass)")    //选取class不是myClass的input元素
        $("input:even")             //选取索引是偶数的input元素
        $("input:odd")              //选取索引是奇数的input元素
        $("input:eq(1)")            //选取索引等于1的input元素(索引值从0开始)
        $("input:gt(1)")            //选取索引大于(不包括)1的input元素(索引值从0开始)
        $("input:lt(1)")            //选取索引小于(不包括)1的input元素(索引值从0开始)
        $(":header")                //选取所有标题元素如(h1,h2,h3...)
        $("div:animated")           //选取当前正在执行动画的所有div元素

        b.内容过滤选择器

        $("div:contains('我')")     //选取内容含有文本'我'的div元素
        $("div:empty")              //选取没有子元素(含文本元素)div元素
        $("div:has(p)")             //选取含有p元素的div元素
        $("div:parent")             //选取拥有子元素(含文本元素)的div元素

        c.可见性过滤选择器

        $(":hidden")                //选取所有不可见元素
        $("div:visible")            //选取所有可见的div元素

        d.属性过滤选择器

        $("[div[id]")               //选取有id属性的元素
        $("div[title=test]")        //选取title属性为"test"的div元素
        $("div[title!=test]")       //title属性不等于"test"(含无该属性元素)的div元素
        $("div[title^=test]")       //title属性以"test"开头的div元素
        $("div[title$=test]")       //title属性以"test"结束的div元素
        $("div[title*=test]")       //title属性含有"test"的div元素
        $("div[id][title$='test']") //选取用有id属性,且title属性以test结束的div元素

        e.子元素过滤选择器

        $(":nth-child(index)")
            :nth-child(even)        //选取每个父元素下的索引值是偶数的元素
            div:nth-child(odd)      //选取div下的索引值是奇数的元素
            :nth-child(2)           //选取每个父元素下的索引值等于2的元素
            div:nth-child(3n)       //选取div下索引值是三的倍数的元素(n从0开始)
            :nth-child(3n+1)        //选取每个父元素下索引值是(3n+1)的元素(n从0开始)
        $("div.one:first-child")    //选取每个class为one的div元素下的一个子元素
        $("div:last-child")         //选取每个div元素下的最后一个元素
        $("div:only-child")         //选去只有一个子元素的div元素

        f.表单元素过滤选择器

        $("form1 :enabled")         //选取id为"form1"的表单内的所有可用元素
        $("form2:disabled")         //选取id为"form2"的表单中的所有不可用元素
        $("input:checked")          //选取所有被选中的input元素
        $("select :selected")       //选取所有被选中的选项元素

  • 4.表单选择器

    $(":input")                     //选取所有<input>,<textarea>,<select>,<button>元素
    $(":text")                      //选取所有单行文本框
    $(":password")
    $(":radio")                     //选取所有单选框
    $(":checkbox")                  //选取所有复选框
    $(":image")
    $(":submit")
    $(":reset")                     //选取所有重置按钮
    $(":button")
    $(":file")                      //选取所有上传域
    $(":hidden")                    //选取所有不可见元素

注意事项

    1.特殊符号用转义符

        <div id='id#b'>bb</div>
        $('#id\\#b')
        <div id='id[1]'>bb</div>
        $('#id\\[1\\]')

    2.选择器中的空格(后代选择器与过滤选择器的不同引起的问题)

        $('.test :hidden')          //选取class为"test"的元素里面的隐藏元素
        $('test:hidden')            //选取隐藏的class为"test"的元素


jQuery精讲

精讲jQuery前端技术,让你从此不惧前端处理!
  • 2015年04月23日 11:23

Jquery选择器大全

  • 2011年02月11日 09:50
  • 28KB
  • 下载

JQuery_九大选择器

JQuery中九大选择器。
  • pseudonym_
  • pseudonym_
  • 2017-07-25 18:19:07
  • 3062

jquery选择器的实现原理

html部分 Document 1 2 var result = $("div"); console.log(result); alert($('div').size(...
  • qq_30100043
  • qq_30100043
  • 2016-11-03 00:57:52
  • 1359

时间日期选择器

  • 2017年09月19日 21:44
  • 133KB
  • 下载

常用jQuery选择器详解

元素选择是一切操作的前提,jQuery中$()函数最强大最常用的功能之一就是使用选择器选择DOM元素。这里就汇总一些十分常用的jQuery选择器。1、jQuery选择器基本结构$('选择器') $('...
  • a153375250
  • a153375250
  • 2016-05-26 14:46:56
  • 2396

CSS/JQuery元素选择器之&&和||,选择器的逻辑操作

使用CSS或JQuery选中元素的时候,很多时候我们需要对条件进行&&或者||操作。JQuery或者CSS中的||操作是很常用的,也很简单,就是通过逗号来分隔的。 selector1,selector...
  • aitangyong
  • aitangyong
  • 2015-06-27 17:34:55
  • 2345

Jquery简单过滤选择器(应用最广泛的选择器)

(1)Jquery中简单过滤选择器 jquery根据某一类过滤规则进行元素匹配,书写时以:开头,是Jquery中应用最为广泛的选择器 (2)简单过滤选择器的基本语法 ①first()或者...
  • qq_29854443
  • qq_29854443
  • 2017-05-04 21:37:03
  • 594

面试题:JQuery有几种选择器?

很多种,大概归纳为9种。 (1)基本 #id element .class * selector1,selector2,selectorN (2)层次选择器: ancestor desce...
  • u013700340
  • u013700340
  • 2014-03-19 11:45:23
  • 6879

JQuery中的特殊选择器--this

相信很多刚接触jQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?下面我们一起来看一下! this是JavaScript中的关键字,指的是当前的上下文对象,简单...
  • LHJBK
  • LHJBK
  • 2016-05-30 21:16:52
  • 1461
收藏助手
不良信息举报
您举报文章:jQuery选择器
举报原因:
原因补充:

(最多只允许输入30个字)