• jquery选择器


    一、基本选择器

    1、id选择器

    选择id值等于指定id元素,id值在文档中只能有一个,不能重复,所以得到的是唯一的元素。

    $("#one")

    2、class选择器

    选择类名为指定class的所有元素。

    $(".one")

    3、element选择器

    根据标签名获得元素集合。

    $("p")

    4、通配符选择器

    选择文档中的所有元素。

    $("*")

    5、并列选择器

    多种的选择方法联合使用,中间用逗号隔开。

    $("#one,.one,p")

    二、层次选择器

    1、直系子元素

    父元素下的指定子元素。

    $("div>p")

    2、prev+next

    下一个兄弟元素。

    $("li+li")    //选择li元素的下一个li元素,所以剔除了第一个。

    3、prev~siblings

    指定元素接下来的所有指定兄弟元素。

    $(".one~div")     //选择class为one的元素之后的div兄弟元素

    4、后代选择器

    指定元素的指定后代集合。

    $(".one div")        //class为one的所有div后代

    三、基本过滤选择器

    1、指定元素集合的第一个

    $("ul li:first")       //获得ul标签下的第一个li元素

    2、1、指定元素集合的最后一个

    $("ul li:last")      //获得ul标签下的最后一个li元素

    3、取非元素

    过滤掉

    $("ul li:not(.one)")   //获得ul标签下的li元素,但是不包含类名为one的。

    4、偶数索引

    索引从0开始,取为偶数的。

    $("ul li:even")

    5、奇数索引

    索引从0开始,取为奇数的。

    $("ul li:odd")

    6、指定索引

    元素集合下的指定位置的那一个。

    $("ul li:eq(2)")     //取ul标签下的第三个li元素。

    7、大于指定索引

    $("ul li:gt(2)")    //取ul标签下索引大于2的li元素。

    8、小于指定索引

    $("ul li:lt(2)")    //取ul标签下索引小于2的li元素。

    9、标题选择器

    取h1~h6的标题元素。

    $(":header")

    10、包含text文本

    $("ul li:contains(今天早上下雨了~)")   //取ul标签下的文本为"今天早上下雨了~"的li元素。

    11、:empty

    取不包含子元素或者文本为空的元素。

    $("ul li:empty")

    12、:has()

    取选择器匹配的元素。

    $("ul li:has(p)")   //选取ul标签下的含有p标签的li元素。

    13、:parent

    取包含子元素或者文本的元素。

    $("ul li:parent")

    14、:hidden

    选取不可见的元素。

    $("ul li:hidden")

    15、:visible

    取可见的元素。

    $("ul li:visible")

    四、属性过滤选择器

    1、[attribute]

    拥有指定属性的元素,该属性有无值均可。

    $("ul li[title]")

    2、[attribute=value]

    拥有指定属性,并且有指定值的元素。

    $("ul li[title='今天早上下雨了~']")

    3、[attribute!=value]

    指定属性不等于指定值的元素,但是由于如果你没加指定属性,他默认为空,也算上去了。

    $("ul li[title='今天早上下雨了~']")

    4、[attribute^=value]

    拥有指定属性,并且值是由value开头的元素。

    $("ul li[title^='今天']")

    5、[attribute$=value]

    拥有指定属性,并且值是由value结尾的元素。

    $("ul li[title$='今天']")

    6、[attribute*=value]

    拥有指定属性,并且值中包含vlaue的元素。

    $("ul li[title$='今天']")

    7、多个属性选择器合并使用

    选择满足所有条件的。

    $("ul li[title$='今天'][class='xixi']")

    五、子元素过滤选择器

    1、$("ul li:nth-child(3)")

    选取ul标签下第三个li元素,这里有点类似":eq",但eq是索引从0开始,nth-child是从1开始

    2、$("ul li:nth-child(odd)")

    选取ul标签下序号为奇数的li,从1开始数。

    3、$("ul li:nth-child(even)")

    选取ul标签下序号为偶数的li,从1开始数。

    4、$("ul li:nth-child(2n+1)")

    这个就是计算得到的元素了,n从0开始。

    5、$("ul li:first-child")

    选择所有ul元素下的第一个li

    6、$("ul li:last-child")

    选择所有ul元素下的最后一个li

    7、$("ul li:only-child")

    选择所有ul元素下的li,并且只能有只能一个li。

    六、表单元素选择器

    1、$(":input")

    选择所有的表单输入元素,包括input, textarea, select 和 button

    2、$(":text")

    选择所有的type类型为text的input元素。

    3、$(":password")

    选择所有的type类型为password的input元素。

    4、$(":radio")

    选择所有的type类型为radio的input元素。

    5、$(":checkbox")

    选择所有的type类型为checkbox的input元素。

    6、$(":submit")

    选择所有的type类型为submit的input元素。

    7、$(":reset")

    选择所有的type类型为reset的input元素。

    8、$(":button")

    选择所有的type类型为button的input元素。

    9、$(":file")

    选择所有的type类型为file的input元素。

    七、表单过滤选择器

    1、$(":enabled")

    选择所有的可操作的表单元素。

    2、$(":disabled")

    选择所有的不可操作的表单元素。

    3、$(":checked")

    选择所有的被checked的表单元素。

    4、$("select option:selected")

    选择所有的select元素下的被selected的子元素。

    八、父,子,兄弟节点查找方法

    1、parent()

    返回父节点,可以传入参数过滤。

    $(".one").parent();
    $(".one").parent(".box");

    2、parents()

    传入参数返回祖先元素,而不是限于父辈。

    3、children()

    返回子节点,可以传入参数限制。

    4、prev()

    返回上一个兄弟节点。

    5、next()

    返回下一个兄弟节点。

    6、prevAll()

    返回之前所有的兄弟节点。

    7、nextAll()

    返回接下来的所有兄弟节点。

    8、siblings()

    返回所有兄弟节点,不分前后。

    9、find()

    查找子孙辈节点,而不限于子代。

    10、eq()

    参数为索引,返回指定索引那一个。

  • 相关阅读:
    HTML5离线缓存问题
    一款我常用到的手机app
    修补: Vs调试时火狐自动增加www.和 .com
    linq to xml 控制投影的类型以解决无法返回匿名类型
    创建数据绑定模板控件 Asp.net
    发布一个IEJs调试开关,方便Vs调试
    TransmitFile下载文件(部分转载)
    如何在网页中添加地图
    MVC中Jqgrid的用法
    CSS中如何将li横向排列
  • 原文地址:https://www.cnblogs.com/xlj-code/p/6295665.html
Copyright © 2020-2023  润新知