jquery选择器

jquery选择器

基本选择器

  * id选择器
     $("#id") 等价与 js的getElementById("id");

     $("#id")获取的永远是对象，即使页面是没有id是“id”的元素
     所以$("#id").css("color","green")永远不会报错
     如果要检测所选对象是否存在时，可以用
     if($("#id").length>0) ||  if($("#id")[0])
  * class选择器
     $(".test") 选取所有class为test的元素
  * element选择器
$("element") exmaple：$("p"),$("div"),$("tr")
  * 选择所有 $("*")
  * $("selector1,selector2,selector3,...")
     多个选择器用,隔开，结果为并集 如：$("#id,span,.one")


层次选择器

   * $("acestor descendant")  (1)
     选择acestor下的所有descendant
     --$("body div") 选择body下的所有div
   * $("parent>child")        (2)
     选择parent下的所有子
     --$("body > div") 选取所有父节点是body的div

     （1），（2）的区别（1）是所有后代可以包含多级子，（2）是选择直接子

   * $("prev+next")
      选取紧跟在prev后的next元素，只选一个
     -- $(".one+div")选取class为one的下一个div
   * $("prev+siblings")
      选取prev后的所有siblings元素
      --$("#one~div")选取id位one的元素后的所有<div>兄弟节点

 
过滤选择器(以tr为例)

      :first--$("tr:first")选取第一个匹配的元素
         --$("script:first").attr("src");
      :last-- $("tr:last")选取最后一个匹配的元素
      :not(selector)
         --$("tr:not(.one)")选取class属性不是one的所有tr
      :even--$("tr:even")偶数行
      : odd--$("tr:odd")奇数行
      :eq(index)--$("tr:eq(2)") 第3行
      :gt(index)--$("tr:gt(2)")第3行后的所有行
      :lt(index)--$("tr:lt(2)") 1~2行

      even,odd,eq,gt,lt的index都是从0开始，gt，lt不包括当前给定下标元素

      $(":header")选择所有的标题元素，如h1,h2,...
      $(":animated")选取正在执行动画的所有元素


子元素过滤选择器

   :nth-child(index/even/odd/equation)
      选取每个父元素的索引/奇/偶/表达式 下子元素
       --$("div:nth-child(2)")
       --$("div:nth-child(even/odd)")
          上面的索引从1开始

       --$("div:nth-child(3n)") 选取div下index是3的倍数的元素
       --$("div:nth-child(3n+1)")
          n从0开始
   :first-child 选取每个父元素下的第一个元素
       --$("ul li:first-child") 选取所有ul下的第一li
   :last-child
   : only-child 如果某个元素是他父元素中的唯一子元素，将会匹配
       --$("ul li:only-child") 选取只包含一个li的ul中的li
 
 
内容过滤选择器

   :contains(text)选取文本内容为“text”的元素
      --$("div:contains('aa')")选取所有内容包含aa的div
   :has(selector)选取含有selector所匹配的元素
      --$("div:has(span)") 含有span标签的div

   :empty 选取空元素（不包含子元素也没有文本元素）
      --$("div:empty")
   :parent 与empty相反
      --$("div:parent")含有子元素的div

   :hidden 选取所有不可见元素
      --$(":hidden"),选取包括 <input type="hidden">,
        <div style="display:none">,<div style="visibility:hidden">
      --$("input:hidden")
   :visible 选取所有可见元素
      --$("div:visible")


  属性过滤器

   [attr]拥有attr属性的元素
      --$("div[id]")拥有属性id的div
   [attr=value] 属性为特定值
      --$("div[name=one]") name属性为one的div
   [attr!=value] 属性 != 给定值

   [attr^=value] 属性以给定值开头
     --$("div[title^=hel]") title属性以hel开头的div
   [attr$=value] 属性以给定值结尾
   [attr*=value] 属性值含有给定值


  
表单对象过滤器

  :input,:text,:password,:radio,:checkbox,:submit,
  :image,:reset,:button,:file,:hidden


  :enabled  选取所有可用元素
  :disabled 选取所有不可用元素
  :checked 选取所有被选中的元素（单选框，复选框）
    --$(input:checked)
    --$(input[type=radio]:checked)
  :selected 选取所有被选中的元素（下拉列表）
    --$("select :selected")



    *选择器选择是如果要匹配的属性含有特殊字符（'.', '#', '(', ']'），需要转义\\
     --$("div.one\\#")

ps：设置选择器环境

$("div.foo").click(function() {
  $("span", this).addClass("bar");//在当前对象中查询span
});