zoukankan      html  css  js  c++  java
  • jQuery选择器整理

    jquery对象訪问:

    1. each(callback):以每一个匹配的元素作为上下文来运行一个函数,return false;停止循环;return true;跳至下一个循环。
    来个实例 :              
    $("img").each(function(){
           $(this).toggle("example");
    })
            

    2.size()与length同样,都是返回jquery对象中元素的个数。
       $("img").size();或$("img").length;

    3.get():取得全部匹配的DOM元素集合(注意返回是dom对象,而非jquery对象)
    $("img").get().reverse();

    4.get(index):取得当中一个匹配的元素。index表示匹配第几个元素,能够让你操作一个实际的dom元素。
    $("img").get(0);//得到第一个匹配的img元素
    $(this).get(0)与$(this)[0]等价

    5.index(subject):搜索与參数表示的对象匹配的元素,并返回对应元素的索引值。

    选择器-基本:
    selector1,selector2,selectorN将匹配到的元素合并后一起返回
    $("div,span,p.myClass");

    选择器-层级:
    1.ancestor descendant在给定的祖先元素下匹配全部的后代元素
        $("div input");//div下全部input

    2.parent > child 在给定的父元素下匹配全部的子元素
        $("div > input);//父元素下的子元素

    3.prev + next 匹配全部紧接在prev元素后的next元素
    $("div + span")//紧接在div后的span

    4.prev ~ siblings 匹配prev元素之后的全部siblings元素
    $("form ~ input")//找到全部与表单同辈的input元素


    选择器-简单:
    1.:first 匹配找到的第一个元素
    $("tr:first")//查找表格中第一行

    2.:last 匹配找到的最后一个元素
    $("tr:last")//匹配找到的最后一个元素

    3.:not(selector) 去除全部与给定选择器匹配的元素
       ps:jquery 1.3中,已支持复杂选择器了(比如::not(div a)和:not(div,a))
       $("input not(:checked)")//全部未被选中的input元素

    4.:even 匹配全部索引值为偶数的元素,从0開始计数
       $("tr:even")//查找表格中偶数行

    5.:odd匹配全部索引值为奇数的元素,从0開始计数
       $("tr:odd")//查找表格中奇数行

    6.:eq(index)匹配一个给定索引值的元素
       $("tr:eq(1)")//查找第二行

    7.:gt(index)匹配全部大于给定索引值的元素
       $("tr:gt(0)")//查找大于0的全部行

    8.:lt(index)匹配全部小于给定索引值的元素
    $("tr:lt(2)")//查找小于2的全部行

    9.:header 匹配如h1,h2,h3之类的标题元素
       $(":header").css("background",red");//全部标题加上背景色

    10.:animated 匹配全部正在运行动画效果的元素

    选择器-内容:
    1.:contains(text) 匹配包括给定文本的元素
       $("div:contains('aaa')")查找全部包括有aaa的div元素

    2.:empty()匹配全部不包括子元素或文本的空元素
      
    $("td:empty")

    3.:has(selector)匹配含有选择器所匹配的元素的元素
      
    $("div:has(p)").addClass("test");//给全部包括p元素的div元素加入一个text类

    4.:parent匹配含有子元素或者文本的元素
       $("td:parent");//查找全部含有子元素或者文本的td元素

    选择器-可见性:
    1.:hidden匹配全部不可见元素,input元素的type属性为hidden的话也会被匹配
      
    $("tr:hidden");//查找全部不可见的tr元素

    2.:visible匹配全部可见元素
       $("tr:visible");//查找全部可见的tr元素

    选择器-属性:
    1.[attribute]匹配包括给定属性的元素
       
    $("div[id]")//查找全部含有id属性的div元素

    2.[attribute=value]匹配给定的属性是某个特定值的元素
       
    $("input[name='username']")//查所全部name=username的input元素

    3. [attribute!=value]匹配全部不含有指定属性,或者属性不等于特定值的元素
         此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])
        $("input[name!='username']")//查找全部name!=username的input元素

    4. [attribute^=value]匹配给定的属性是以某些值開始的元素
        $("input[name^='user'])//查找全部name以'newws'開始的input元素

    5. [attribute$=value]匹配给定属性是以某些值结尾的元素
       $("input[name$='letter']) //查找全部name以'letter'结尾的input元素

    6. [attribute*=value]匹配给定的属性是以包括某些值的元素
       $("input[name*='man']")//查找全部name包括'man'的input元素

    7. [selector1][selector2][selectorN]复合属性选择器,冉要同一时候满足多个条件时用。
        $("input[id][name='man']")//含有id属性,而且name为man的

    选择器-子元素:
    1.:nth-child(index/even/odd/equation)匹配其父元素下的第N个子或奇偶元素
        $("ul li:nth-child(2)")//在每一个ul查找第2个li

    2. :first-child匹配第一个子元素
        $("ul li:first-child")//在每一个ul中查找第一个li

    3.:las-child匹配最后一个子元素
        $("ul li:last-child")// 在第个ul中查找最后一个li

    4.only-child假设某个元素是父元素中唯一的子元素,那将会被匹配,假设父元素中含有其它元素,不会被匹
       $("ul li:only-child")//在ul中查找是唯一子元素的li

    选择器-表单:
    1.:input ,:text ,:password ,:radio , :checkbox ,:submit ,:image ,:reset ,:button , :file
    2.:hidden匹配全部不可见元素,或type为hidden的元素

    选择器-表单对象属性:
    1.:enable匹配全部可用元素
       $("input:enabled")//查找全部可用的input元素

    2.:disabled匹配全部不可用元素
       $("input:disabled")//匹配全部不可用元素

    3.:checked匹配全部选中的被选中元素(复选框、单选框、不包含select中的option)
        $("input:checked")//查找全部选中的复选框元素

    4.:selected匹配全部选中的option元素
        $("select option:selected")//查找全部选中的选项元素

  • 相关阅读:
    Chain of Responsibility Pattern
    Visitor Pattern
    Command Pattern
    Mediator Pattern
    Memento Pattern
    Observer Pattern
    State Pattern
    Strategy Pattern
    HTMLTestRunner修改Python3的版本
    loadrunner 检查点
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4297207.html
Copyright © 2011-2022 走看看