• jQuery中的一些选择器


    ① CSS选择器
    选择器 语法 示例
    标签选择器 D{CSS} td{font-size:14px;}
    ID选择器 #ID{CSS} #header{font-size:14px;}
    类选择器 D.calssName{Css} .dream{font-size:14px;}
    群组选择器 E1,E2,E3{CSS} td,p,div,a{margin:0px;}
    后代选择器 E F{Css} #Link a{color:red;}
    通配符选择符 *{CSS} *{font-size:14px;}

    ②jQuery基本选择器
    选择器 jQuery 返回
    标签选择器 Element $("tagName") 集合元素
    ID选择器 #id $("#ID") 单个元素
    类选择器 .class $(".demo") 集合元素
    群组选择器 selector,2 $("div,span,p,myclass") 集合元素
    通配符选择符 $("*") 集合元素

    ③层次选择器
    选择器 jQuery
    $("ancestor descemdant") $("div span")选取div中所有的span(集合元素)
    $("parent>child") $("div>span")选取所有div元素下名为span的子元素(集合元素)
    $("prev+next") $(".one+div")选取class为.one的下一个div元素(集合元素)
    $("prev^sibling") $("#two-div")选取id为two的元素后面所有的div兄弟元素(集合元素)

    ④基本过滤选择器
    过滤器 jQuery
    :first $("div:first")选取所有<div>元素中的第一个<div>元素(单个元素)
    :last $("div:last")选取所有<div>元素中的最后一个<div>元素(单个元素)
    :not(selector) $("input:not(.myClass)")选取class不是myClass的<input>元素(集合元素)
    :even $("input:even")选取索引是偶数的<input>元素(索引从0开始)(集合元素)
    :odd $("input:odd")选取索引是奇数的<input>元素(索引从0开始)(集合元素)
    :eq(index) $("input:eq(1)")选取索引等于1的<input>元素(单个元素)
    :gt(index) $("input:gt(1)")选取索引大于1的<input>元素(集合元素)
    :It(index) $("input:It(4)")选取索引小于4的<input>元素(集合元素)
    :header $(":header")选取所有标题元素<h1><h2><h3>(集合元素)
    :animated $("div:animated")选取正在执行动画的<div>元素(集合元素)

    ⑤内容过滤选择器
    过滤器 jQuery
    :contains(text) $("div:contains(我)")选取含有文本"我"的<div>元素(集合元素)
    :empty $("div:empty")选取不包含子元素(文本元素)的<div>空元素(集合元素)
    :has(selector) $("div:has(p)")选取含有<p>元素的<div>元素(集合元素)
    :parent $("div:parent")选取拥有子元素(包括文本元素)的<div>元素(集合元素)

    ⑥属性过滤选择器
    过滤器 jQuery
    [attribute] $("div[id]")选取所有拥有id属性的元素(集合元素)
    [attribute=value] #("div[title=test]")选取元素属性title值为test的<div>元素(集合元素)
    [attribute!=value] $("div[title!=test]")选取元素属性title值不为test的<div>元素(集合元素)
    [attribute^=value] $("div^=test")选取属性title值为test开头的div元素(集合元素)
    [attribute$=value] $("div$=test")选取属性title值为test结尾的div元素(集合元素)
    [attribute*=value] $("div*=test")选取属性title值中包含test的div元素(集合元素)
    [selector][selector2][selectorN] $("div[id][title$="test"]")选取拥有id属性,且title属性值以test结尾的所有div元素

    ⑦子元素过滤选择器
    过滤器 jQuer
    :nth-child(index/even/odd/equation) :eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)下标从1开始,而:eq(index)是从0开始
    :nth-child(even) 选取每个父元素下的索引值是偶数的元素
    :nth-child(odd) 选取每个父元素下的索引值是奇数的元素
    :nth-child(3n)选取每个父元素下的索引值是3的倍数的元素

    :first-child :frist只返回单个元素,而:first-child选择符将为每一父元素匹配第一个子元素。
    例如$(“ul li:first-child”);选取每个<ul>中的第一个<li>元素
    注意
    $(“ul li :first-child”);选取每个<ul>中的每一个<li>元素中的第一个子元素

    :last-child :last只返回单个元素而:last-child选择器将为每个父元素匹配最后一个子元素
    例如$(“ul li:last-child”);选择每个<ul>中最后一个<li>元素

    :only-child $("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素。

    ⑧表单对象属性过滤选择器
    选择器 jQuery
    :emabled $("#form1:enabled")选取id为form1的表单内所有可用的元素(集合元素)
    :disabled $("#form1:disabled")选取id为form2的表单内所有不可用的元素(集合元素)
    :checked $("input:checked")选取所有被选中的<input>元素(集合元素)
    :selected $("select:selected")选取所有被选中的选项元素 下拉列表(集合元素)

    ⑨表单选择器
    过滤器 jQuery
    :input $(“: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")选取所有不可见元素

  • 相关阅读:
    剑指offer-整数中1出现的次数
    剑指offer-连续子数组的最大和
    剑指offer-最小的k个数
    剑指offer-数组中超过一半的数字
    剑指offer-二叉搜索树与双向链表
    剑指offer-复杂链表的复制
    剑指offer-二叉树中和为某一值的路径
    剑指offer-二叉搜索树的后序遍历
    Alpha 冲刺 (7/10)
    Alpha 冲刺 (6/10)
  • 原文地址:https://www.cnblogs.com/192-168-D/p/9949383.html
Copyright © 2020-2023  润新知