zoukankan      html  css  js  c++  java
  • jquery 过滤器

    1.基本选择器 
    基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class 和标签名来查找DOM元素。这个非常重要,下面的内容都是以此为基础,逐级提高的。 
    1).“$(“#id”)”,获取id指定的元素,id是全局唯一的,所以它只有一个成员。 
    2).“$(“.class”)”,获取class指定的元素,不同的元素可以具有相同的class属性,所以它可能具有多个成员。 
    3).“$(“element”)”,获取element(元素名,比如div、table等)指定的元素,它可能具有多个成员。 
    4).“$(“*”)”,获取所有元素,相当于document。 
    5).“$(“selector1,selector2,…,selectorN”)”,将每个选择器匹配到的元素合并后一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。 

    2.层次选择器 
    什么是层次?层次就是父子关系、兄弟关系的节点。所以,层次选择器就是用来获取指定元素的父子节点、兄弟节点。 
    1).“$(“ancestor descendant”)”,获取ancestor元素下边的所有元素。 
    2).“$(“parent > child”)”,获取parent元素下边的所有子元素(只包含第一层子元素)。 
    3).“$(“pre + next”)”,获取紧随pre元素的后一个兄弟元素。 
    4).“$(“pre ~ siblings”)”,获取pre元素后边的所有兄弟元素。 

    3.过滤选择器 
    过滤?肯定是要添加过滤条件的。通过“:”添加过滤条件,比如“$(“div:first”)”返回div元素集合的第一个div元素,first是过滤条件。 
    按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器。 

    1). 基本过滤选择器 
    a) “:first”,选取第一个元素,别忘记它也是被放在一个集合里哦!因为JQuery它是DOM对象的一个集合。如,“$("tr:first")”返回所有tr元素的第一个tr元素,它仍然被保存在集合中。 
    b) “:last”,选取最后一个元素。如,“$("tr:last")”返回所有tr元素的最后一个tr元素,它仍然被保存在集合中。 
    c) “:not(selector)”,去除所有与给定选择器匹配的元素。如,“$("input:not(:checked)")”返回所有input元素,但去除被选中的元素(单选框、多选框)。 
    d) “:even”,选取所有元素中偶数的元素。因为JQuery对象是一个集合,这里的偶数指的就是集合的索引,索引从0开始。 
    e) “:odd”,选取所有元素中奇数的元素,索引从0开始。 
    f) “:eq(index)”,选取指定索引的元素,索引从0开始。 
    g) “:gt(index)”,选取索引大于指定index的元素,索引从0开始。 
    h) “:lt(index)”,选取索引小于指定index的元素,索引从0开始。 
    i) “:header”,选取所有的标题元素,如hq、h2等。 
    j) “:animated”,选取当前正在执行的所有动画元素。 

    2). 内容过滤选择器 
    它是对元素和文本内容的操作。 
    a) “:contains(text)”,选取包含text文本内容的元素。 
    b) “:empty”,选取不包含子元素或者文本节点的空元素。 
    c) “:has(selector)”,选取含有选择器所匹配的元素的元素。 
    d) “:parent”,选取含有子元素或文本节点的元素。(它是一个父节点) 

    3). 可见性过滤选择器 
    根据元素的可见与不可见状态来选取元素。 
    “:hidden”,选取所有不可见元素。 
    “:visible”,选择所有可见元素。 
    可见选择器:hidden 不仅包含样式属性 display 为 none 的元素,也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素。 

    4).属性过滤选择器 
    通过元素的属性来选取相应的元素。 
    a) “[attribute]”,选取拥有此属性的元素。 
    b) “[attribute=value]”,选取指定属性值为value的所有元素。 
    c) “[attribute !=value]”,选取属性值不为value的所有元素。 
    d) “[attribute ^= value]”,选取属性值以value开始的所有元素。 
    e) “[attribute $= value]”,选取属性值以value结束的所有元素。 
    f) “[attribute *= value]”,选取属性值包含value的所有元素。 
    g) “[selector1] [selector2]…[selectorN]”,复合性选择器,首先经[selector1]选择返回集合A,集合A再经过[selector2]选择返回集合B,集合B再经过[selectorN]选择返回结果集合。 

    5). 子元素过滤选择器 
    一看名字便是,它是对某一元素的子元素进行选取的。 
    a) “:nth-child(index/even/odd)”,选取索引为index的元素、索引为偶数的元素、索引为奇数的元素。 
    l nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数的元素。 
    l nth-child(2):能选取每个父元素下的索引值为 2 的元素。 
    l nth-child(3n):能选取每个父元素下的索引值是 3 的倍数的元素。 
    l nth-child(3n + 1):能选取每个父元素下的索引值是 3n + 1的元素。 
    b) “:first-child”,选取第一个子元素。 
    c) “:last-child”,选取最后一个子元素。 
    d) “:only-child”,选取唯一子元素,它的父元素只有它这一个子元素。 

    6). 表单过滤选择器 
    选取表单元素的过滤选择器。 
    a) “:input”,选取所有<input>、<textarea>、<select >和<button>元素。 
    b) “:text”,选取所有的文本框元素。 
    c) “:password”,选取所有的密码框元素。 
    d) “:radio”,选取所有的单选框元素。 
    e) “:checkbox”,选取所有的多选框元素。 
    f) “:submit”,选取所有的提交按钮元素。 
    g) “:image”,选取所有的图像按钮元素。 
    h) “:reset”,选取所有重置按钮元素。 
    i) “:button”,选取所有按钮元素。 
    j) “:file”,选取所有文件上传域元素。 
    k) “:hidden”,选取所有不可见元素。 

    7).表单对象属性过滤选择器 
    选取表单元素属性的过滤选择器。 
    “:enabled”,选取所有可用元素。 
    “:disabled”,选取所有不可用元素。 
    “:checked”,选取所有被选中的元素,如单选框、复选框。 
    “:selected”,选取所有被选中项元素,如下拉列表框、列表框。 

  • 相关阅读:
    53. Maximum Subarray
    64. Minimum Path Sum
    28. Implement strStr()
    26. Remove Duplicates from Sorted Array
    21. Merge Two Sorted Lists
    14. Longest Common Prefix
    7. Reverse Integer
    412. Fizz Buzz
    linux_修改域名(centos)
    linux_redis常用数据类型操作
  • 原文地址:https://www.cnblogs.com/access520/p/5265056.html
Copyright © 2011-2022 走看看