Java Web基础回顾 —JQuery选择器

  1. JQuery选择器的分类:
    • 基本选择器
      1)$(“#id”), 根据id值找到匹配元素,最多 只返回一个元素,如果不存在,则返回一个空的JQuery对象。
      2)$(“.class”), 根据css的class属性来 返回一个集合,无论该CSS是否存在,只要定义在元素中就能被JQuery查询到。
      3)$(“div,span,#id,p.MyClass,.class”), 选取所有的元素集合。
    • 层次选择器
      1)$(“ancestor descendant”), 选取ancestor元素里 所有的descendant元素。
      2)$(“parent > child”), 选取parent元素下的child元素。
      3)$(“.one”).next(“div”), 选取class=“one”的 下一个div元素。等价于$(“.one + div")
      4)$(“#two”).nextAll(“div”), 选取id=“two”的 后面所有同辈的div元素。等价于$(“#id~div”)
      5)$(“#two”).siblings(“div”)方法可以返回 所有同辈的div元素,无论前后位置。
    • 过滤选择器
      1)基本过滤
      :first :last : not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header
      :animated
      2)内容过滤
      :contains(text) :empty :has(selector) :parent
      3)可见性过滤
      :hidden :visible
      4)属性过滤
      [attribute] [attribute = value] [attribute != value] [attribute ^= value] [attribute $= value]
      [attribute *= value] [selector1][selector2][selector3]
      5)子元素过滤器
      :nth-child(index0) :first-child :last-child :only-child
      6)表单对象属性过滤
      :enabled :disabled :checked :selected
    • 表单选择器
      :input --(选取所有的input/textarea/select/button元素)
      :text -- (所有的单行文本框) :password :radio :checkbox :submit :image :reset :button :file :hidden

注意:

  1. $("#form :input") - - 选取id="form"里面所有的input/textarea/select/button元素
    $("#form input") - - 选取id="form"里面所有的input元素(层次选择器)
  2. Jquery里面空格不能乱加:
    $("tr:odd").css("backgroundColor","red"); -- 双数的tr会显示红色
    $("tr :odd").css("backgroundColor","red"); -- tr下面的子元素里面的双数元素显示红色
    $(“.test :hidden”) — 选择class为test的元素中的隐藏子元素
    $(“.test:hidden”) — 选择隐藏的并且class为test的元素
posted @ 2017-04-11 18:28  涣涣虚心  阅读(398)  评论(0编辑  收藏  举报