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")//查找全部选中的选项元素

  • 相关阅读:
    手把手教你利用create-nuxt-app脚手架创建NuxtJS应用
    初识NuxtJS
    webpack打包Vue应用程序流程
    用选择器代替表格列的筛选功能
    Element-UI
    Spectral Bounds for Sparse PCA: Exact and Greedy Algorithms[贪婪算法选特征]
    Sparse Principal Component Analysis via Rotation and Truncation
    Generalized Power Method for Sparse Principal Component Analysis
    Sparse Principal Component Analysis via Regularized Low Rank Matrix Approximation(Adjusted Variance)
    Truncated Power Method for Sparse Eigenvalue Problems
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4297207.html
Copyright © 2011-2022 走看看