• JQuery 选择器总结


    基本选择器   
    选择器
    描述
    返回
    示例
    #id
    根据指定id匹配一个元素
     
    $("#test")选取id为test的元素
    .class
    根据给定的类名匹配元素
    集合元素
    $(".test")选取所有class为test的元素
    element
    根据给定的元素名匹配元素
    集合元素
    $("p")选取所有的<p>元素
    *
    匹配所有元素
    集合元素
    $("*")选取所有的元素
    selector1,selector2,selector3
    将每一个选择器匹配到的元素合并后一起返回
    集合元素
    $("div,span,p.myClass")选取所有div,span元素和拥有class为myClass的平标签的一组元素
    层次选择器
    $("ancestor  descendant")
    选取ancestor元素里的所有descendant(后代)元素
    集合元素
    $("div span")选取div里的所有span元素
    $("parent  > child")
    选取parent元素下的child(子)元素
    集合元素
    $("div > span") 选取div下元素名是span 的子元素
    $("prev + next")
    选取紧接prev元素后的next元素
    集合元素
    $(".one + div")选取class为one的下一个div兄弟元素
    $("prev ~ siblings")
    选取prev元素之后的所有siblings元素
    集合元素
    $("#two ~ div")选取id为two的元素后的所有div兄弟元素
    基本过滤选择器
    :first
    选取第一个元素
    单个元素
    $("div:first")选取所有div元素中第一个div元素
    :last
    选取最后一个元素
    单个元素
    $("div:last")选取所有div元素中最后一个div元素
    :not(selector)
    去除所有与给定选择器匹配的元素
    集合元素
    $("input:not(.myClass)")选取class不是myClass的input元素
    :even
    选取索引是偶数的所有元素,索引从0开始
    集合元素
    $("input:even")选取索引是偶数的input元素
    :odd
    选取索引是奇数的所有元素,索引从0开始
    集合元素
    $("input:odd")选取索引是奇数的input元素
    :eq(index) 选取索引等于index的元素(index从0开始) 单个元素 $("input:eq(1)")选取索引等于1的input元素
    :gt(index)
    选取索引大于index的元素
    集合元素
    $("input:gt(1)")选取索引大于1的input元素
    :lt(index) 选取索引小于index的元素 集合元素 $("input:lt(1)")选取索引小于1的input元素
    :header 选取所有的标题元素,例如h1,h2,h3等等 集合元素 $(":header")选取网页中所有的<h1>,<h2>,<h3>.......
    :animated 选取当前正在执行的动画的所有元素 集合元素 $("div:animated")选取正在执行动画的div元素
    内容过滤选择器
    :contains(text)
    选取含有文本内容为"text"的元素
    集合元素
    $("div:contains('我')")选取含有文本"我"的div元素
    :empty
    选取不包含子元素或文本为空的元素
    集合元素
    $("div:empty")选取不包含子元素(包括文本元素)的div元素
    :has(selector)
    选取含有选择器所匹配的元素
    集合元素
    $("div:has(p)")选取含有p元素的div元素
    :parent
    选取含有子元素或者文本的元素
    集合元素
    $("div:parent")选取拥有子元素的div元素
    可见性过滤选择器
    :hidden
    选取所有不可见的元素
    集合元素
    $(":hidden")选取所有不可见的元素
    :visible
    选取所有可见的元素
    集合元素
    $(":visible")选取所有可见的元素
    属性过滤选择器
    [attribute]
    选取拥有此属性的元素
    集合元素
    $("div[id]")选取拥有属性id的元素
    [attribute=value]
    选取属性的值为value的元素
    集合元素
    $("div[title=test]")选取属性title为test的div元素
    [attribute!=value]
    选取属性的值不为value的元素
    集合元素
    $("div[title!=test]")选取属性title不等于test的元素(包括没有title属性的div元素)
    [attribute^=value] 选取属性的值以value开始的元素 集合元素 $("div[title^=test]")选取属性title以test开始的div元素
    [attribute$=value]
    选取属性的值以value结束的元素
    集合元素
    $("div[title$=test]")选取属性title以test结束的div元素
    [attribute*=value]
    选取属性的值含有value的元素
    集合元素
    $("div[title*=test]")选取属性title含有test的div元素
    [selector1][ selector2][ selector3]
    用属性选择器合并成一个复合属性选择器,满足多个条件.每选择一次,缩小一次范围
    集合元素
    $("div[id][title$='test']")选取拥有属性id,并且属性title以test结束的div元素
    子元素过滤选择器
    :nth-child(index/even/odd/equation)
    选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)
    集合元素
    :eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0算的
    :first-child
    选取每个父元素的第一个子元素
    集合元素
    :first只返回单个元素,而first-child选取符将为每个父元素匹配第一个子元素
    :last-child
    选取每个父元素的最后一个子元素
    集合元素
    :las只返回单个元素,而last-child选取符将为每个父元素匹配最后一个子元素
    :only=child
    如果某个元素师它的父元素中唯一的子元素,那么他将被匹配出.如果父元素的中含有其他的元素的,则不会被匹配
    集合元素
    $("ul li:only-chlid")在ul中选取的唯一的子元素的li元素
    表单对象属性过滤选择器
    :enabled
    选取所有可用元素
    集合元素
    $("#form1  :enabled")选取id为"form1"的表单内的所有可用元素
    :disabled
    选取所有不可用元素
    集合元素
    $("#form2 :disabled")选取id为"form2"的表单内所有不可用的元素
    :checked
    选取所有被选中的元素(单选框,复选框)
    集合元素
    $("#input:checked")选取所有被选中的选项元素
    :selected
    选取所有被选中的选项元素(下拉列表)
    集合元素
    $("#select :selected")选取所有被选中的选项元素
    表单选择器
    :input
    选取所有input,textarea,select,button元素
    集合元素
    $(":input")选取所有input,textarea,select,button元素
    :text 选取所有的单行文本框 集合元素 $(":text")选取所有的单行文本框
    :password 选取所有的密码框 集合元素 $(":password")选取所有的密码框
    :radio 选取所有的单选框 集合元素 $(":radio")选取所有的单选框
    :checkbox 选取所有的多选框 集合元素 $(":checkbox")选取所有的复选框
    :submit 选取所有的提交按钮 集合元素 $(":submit")选取所有的提交按钮
    :image 选取所有的图像按钮 集合元素 $(":image")选取所有的图像按钮
    :reset
    选取所有的重置按钮
    集合元素
    $(":reset")选取所有的重置按钮
    :button
    选取所有的按钮
    集合元素
    $(":button")选取所有的按钮
    :file
    选取所有的上传域
    集合元素
    $(":file")选取所有的上传域
    :hidden
    选取所有的不可见元素
    集合元素
    $(":hidden")选取所有不可见元素
  • 相关阅读:
    使用layer.tips实现鼠标悬浮时触发事件提示消息实现
    鼠标移入、移出触发事件实现
    vue组件独享守卫钩子函数参数详解(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)
    vscode 向下复制当前行(即visual studio 中的Ctrl + D)功能快捷键
    vue UI可视化窗口修改为显示中文
    js中的匿名函数
    NPM install -save 和 -save-dev 傻傻分不清
    Node.js中package.json中库的版本号详解(^和~区别)
    RTX管理器里怎么建群
    Mysql的timestamp(时间戳)详解以及2038问题的解决方案
  • 原文地址:https://www.cnblogs.com/lbxx/p/2870926.html
Copyright © 2020-2023  润新知