zoukankan      html  css  js  c++  java
  • 转:jquery选择器

    基本选择器:
    1. $(”#myELement”) —— 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
    2. $(”div”) —— 选择所有的div标签元素,返回div元素数组
    3. $(”.myClass”) —— 选择使用myClass类的css的所有元素
    4. $(”*”) —— 选择文档中的所有的元素,以运用多种的选择方式进行联合选择:例如$(”#myELement,div,.myclass”)

    jQuery 使用 CSS 选择器来选取 HTML 元素。

    $("p") 选取 <p> 元素。

    $("p.intro") 选取所有 class="intro" 的 <p> 元素。

    $("p#demo") 选取 id="demo" 的第一个 <p> 元素。

    层叠选择器:
    1. $(”form input”) —— 选择所有的form元素中的input元素
    2. $(”#main > *”) —— 选择id值为main的所有的子元素
    3. $(”label + input”) —— 选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
    4. $(”#prev ~ div”) —— 该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

    组选择器:
    下面还是现做一个约定:把”标签名或#id名或.class名”记作mix,则mix表示一个标签名,或一个#id或一个.class.
    $(“mix,mix,mix,…”), 如:$(“div,#test1,p,.test2,#test3″)

    后代选择器:
    $(“mix mix”),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$(“mix mix mix …”)这种写法作用不大.例子:$(“div .test”):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test的标签)

    临近选择器:
    $(“mix+mix”),选取下一个兄弟节点.如:$(“div +#test”),id为test的的节点必须是div的下一个兄弟节点.
    <div></div><p id=”test”></p>在$(“div + #test”)中能取到p段落节点
    <div></div><p></p><p id=”test”></p>则不能取到

    基本过滤选择器:
    1. $(”tr:first”) —— 选择所有tr元素的第一个
    2. $(”tr:last”) —— 选择所有tr元素的最后一个
    3. $(”tr:even”) —— 选择所有的tr元素的第0,2,4… …个元素
    4. $(”tr:odd”) —— 选择所有的tr元素的第1,3,5… …个元素
    5. $(”td:eq(2)”) —— 选择所有的td元素中序号为2的那个td元素
    6. $(”td:gt(4)”) —— 选择td元素中序号大于4的所有td元素
    7. $(”td:ll(4)”) —— 选择td元素中序号小于4的所有的td元素

    冒号限定结点选择器:$(“mix:condition”):mix标签,并且满足限定条件.
    E:root:类型为E,并且是文档的根元素
    E:nth- child(n):是其父元素的第n个类型为E的子元素 ,基数从1开始
    E:first-child:是其父元素的第1个类型为E的子元素
    E:last- child:是其父元素的最后一个类型为E的子元素
    E:only-child:且是其父元素的唯一一个类型为E的子元素
    E:empty: 没有子元素(包括text节点)的类型为E的元素
    E:enabled
    E:disabled:类型为E,允许或被禁止的用户界面元素
    E:checked: 类型为E,处于选中状态的用户界面元素(例如单选按钮或复选框)
    E:visible:选择所有可见元素(display值为block或 visible,visibility值为visible元素,不包括hide域)
    E:hidden:选择所有隐藏元素(非Hide域,且 display值为block或visible,visibility值为visible的元素)
    E:not(s):类型为E,不匹配选择器s
    E:eq(n),E:gt(n),E:lt(n): 元素限定
    E:first:相当于E:eq(0)
    E:last:最后一个匹配的元素
    E:even:从匹配的元素集中取序数为偶数的元素
    E:odd:从匹配的元素集中取序数为奇数的元素
    E:parent:选择包含子元素(包含text节点)的所有元素
    E:contains(‘test’): 选择所有含有指定文本的元素

    内容过滤选择器:
    1. $(”div:contains(’John’)”) —— 选择所有div中含有John文本的元素
    2. $(”td:empty”) —— 选择所有的为空(也不包括文本节点)的td元素的数组
    3. $(”div:has(p)”) —— 选择所有含有p标签的div元素
    4. $(”td:parent”) —— 选择所有的以td为父节点的元素数组
    可视化过滤选择器:
    1. $(”div:hidden”) —— 选择所有的被hidden的div元素
    2. $(”div:visible”) —— 选择所有的可视化的div元素
    属性过滤选择器:
    1. $(”div[id]“) —— 选择所有含有id属性的div元素
    2. $(”input[name='newsletter']“) —— 选择所有的name属性等于’newsletter’的input元素
    3. $(”input[name!='newsletter']“) —— 选择所有的name属性不等于’newsletter’的input元素
    4. $(”input[name^='news']“) —— 选择所有的name属性以’news’开头的input元素
    5. $(”input[name$='news']“) —— 选择所有的name属性以’news’结尾的input元素
    6. $(”input[name*='man']“) —— 选择所有的name属性包含’news’的input元素
    7. $(”input[id][name$='man']“) —— 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
    子元素过滤选择器:
    1. $(”div span:first-child”) —— 返回所有的div元素的第一个子节点的数组
    2. $(”div span:last-child”) —— 返回所有的div元素的最后一个节点的数组
    3. $(”div button:only-child”) —— 返回所有的div中只有唯一一个子节点的所有子节点的数组

    $(“mix>mix”),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子:
    $(“div>.test”)
    <div><p></p></div>对这里的p段落标签有效.但对
    <div><p><p></p></p></div>对这里的p段落标签无效,这里要用
    $(“div .test)

    表单元素选择器:
    1. $(”:input”) —— 选择所有的表单输入元素,包括input, textarea, select 和 button
    2. $(”:text”) —— 选择所有的text input元素
    3. $(”:password”) —— 选择所有的password input元素
    4. $(”:radio”) —— 选择所有的radio input元素
    5. $(”:checkbox”) —— 选择所有的checkbox input元素
    6. $(”:submit”) —— 选择所有的submit input元素
    7. $(”:image”) —— 选择所有的image input元素
    8. $(”:reset”) —— 选择所有的reset input元素
    9. $(”:button”) —— 选择所有的button input元素
    10. $(”:file”) —— 选择所有的file input元素
    11. $(”:hidden”) —— 选择所有类型为hidden的input元素或表单的隐藏域
    表单元素过滤选择器:
    1. $(”:enabled”) —— 选择所有的可操作的表单元素
    2. $(”:disabled”) —— 选择所有的不可操作的表单元素
    3. $(”:checked”) —— 选择所有的被checked的表单元素
    4. $(”select option:selected”) —— 选择所有的select 的子元素中被selected的元素
  • 相关阅读:
    牛客IOI周赛17-提高组 卷积 生成函数 多项式求逆 数列通项公式
    6.3 省选模拟赛 Decompose 动态dp 树链剖分 set
    AtCoder Grand Contest 044 A Pay to Win 贪心
    5.29 省选模拟赛 树的染色 dp 最优性优化
    luogu P6097 子集卷积 FST FWT
    CF724C Ray Tracing 扩展欧几里得 平面展开
    5.30 省选模拟赛 方格操作 扫描线 特殊性质
    5.29 省选模拟赛 波波老师 SAM 线段树 单调队列 并查集
    Spring main方法中怎么调用Dao层和Service层的方法
    Bug -- WebService报错(两个类具有相同的 XML 类型名称 "{http://webService.com/}getPriceResponse"。请使用 @XmlType.name 和 @XmlType.namespace 为类分配不同的名称。)
  • 原文地址:https://www.cnblogs.com/snowbaby-kang/p/4026792.html
Copyright © 2011-2022 走看看