zoukankan      html  css  js  c++  java
  • 浅谈jQuery的选择器

    jQuery的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法

    $("A B") 查找A元素下面的所有子节点,包括非直接子节点
    $("A>B") 查找A元素下面的直接子节点
    $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
    $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点

    1.  $("A B") 查找A元素下面的所有子节点,包括非直接子节点

    例子:找到表单中所有的 input 元素

    HTML 代码:

    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />
    jQuery 代码:

    $("form input")
    结果:

    [ <input name="name" />, <input name="newsletter" /> ]

    2.  $("A>B") 查找A元素下面的直接子节点
    例子:匹配表单中所有的子级input元素。

    HTML 代码:

    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />
    jQuery 代码:

    $("form > input")
    结果:

    [ <input name="name" /> ]

    3.  $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
    例子:匹配所有跟在 label 后面的 input 元素

    HTML 代码:

    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />
    jQuery 代码:

    $("label + input")
    结果:

    [ <input name="name" />, <input name="newsletter" /> ]


    4.  $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
    例子:找到所有与表单同辈的 input 元素

    HTML 代码:

    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />
    jQuery 代码:

    $("form ~ input")
    结果:

    [ <input name="none" /> ]

  • 相关阅读:
    Shiro-身份验证
    ORA-12514: TNS: no listener 解决方案
    Oracle创建用户、角色、授权、建表
    ORA-28547:connection to server failed, probable Oracle Net admin error错误,解决方法
    Python学习笔记
    Python学习笔记
    Python学习笔记
    winrm service
    C#动态编译并执行代码
    TypeScript的4种编译方式
  • 原文地址:https://www.cnblogs.com/jackhuclan/p/1337741.html
Copyright © 2011-2022 走看看