JQuery选择器

选择器分类:

一:基本选择器

二:层次选择器

三:过滤选择器

四:表单选择器

其中“三”又分:

①:简单过滤选择器

②:内容过滤选择器

③:可见性过滤选择器

④:属性过滤选择器

⑤:子元素过滤选择器

⑥:表单对象属性过滤选择器

-------------------------------------------------

一[P18]: (#id) {根据指定的ID匹配一个元素}:单个元素

  (element){根据元素名匹配所有元素}:元素集合 | $("div") $("p") $("span")

  (.class){根据指定的类匹配元素}:元素集合 | $(".indexclass")

  (*){匹配所有元素}:元素集合 | $("*")

  (selector1,selector2...){将每一个选择器匹配到的元素合并后一起返回}:元素集合 | $(".class1,div,#id,span")

二[P20]: (祖先 后裔){根据祖先元素匹配所有的后代元素}:元素集合 | $("#div1 div")=匹配id=div1 的元素下的所有DIV,不管哪个层级

     (父>子){根据父元素匹配所有子元素}:元素集合 | $("#div1>div")=匹配id=div1的元素的子元素,仅

     (前+后){匹配所有紧接在“前”元素后面的相邻元素}:元素集合 | $("#div1+span")=匹配id=div1的元素后面的下一个span

         相当于 $("#div1").next()  / $("#div1").next(selector)

         注意:.next()只是获取紧挨着它的元素 .next(selector)同理

     例子:     <div id="div1" style="display:none;">DIV1</div><div id="div2" style="display:none;">DIV2</div><p id="P2" class="ABC" style="display:none;">P2</p>

          $("#div1").next()={<div id="div2" style="display:none;">DIV2</div>}

          $("#div1").next(“.ABC”)则找不到匹配元素

      (前~临){匹配“前”元素以后的所有兄弟元素}:元素集合 |  $("#div1~span")=匹配id=div1的元素后面的所有兄弟span     

        相当于 $("#div1").nextAll("span")

四[P35]: (:input) {获取表单的所有input、textarea、select}:元素集合 

    (:text){获取单行文本框}  (:password){获取所有密码框}   (:radio){获取所有单选按钮}   (:checkbox){获取所有复选框}   (:submit){获取所有提交按钮}   (:image){获取所有图像域}   (:reset){获取所有重置按钮}   (:button){获取所有按钮}   (:file){获取所有文件域}

--------------

①: ( first() )= ( :first ) 获取第一个元素  || ( last() )=( :last ) 获取最后一个元素

  ( :not(selector) ) 获取除给定元素以外的所有元素

  ( :even ) 获取所有索引值为偶数的元素,索引从0开始   ( :odd ) 获取索引值为奇数的元素,索引从0开始

  ( :eq(index) ) 获取指定索引值的元素,索引从0开始

  ( :gt(index) )  获取所有大于索引值的元素,索引从0开始  ( :lt(index) ) 获取所有小于索引值的元素,索引从0开始

  ( :header ) 获取所有标题类型的元素,如h1,h2.....

  ( :animated ) 获取正在执行动画效果的元素  这个必须先定义一个 动画函数,然后执行该函数,才能用这个选择器获取到

②:( :contains(text) ) 获取包含给定文本的元素  //区分大小写

  ( :empty ) 获取所有不包含子元素或文本的空元素

  ( :has(selector) ) 获取含有选择器所匹配的元素的元素

  ( :parent ) 获取含有子元素或文本的元素

③:( :hidden ) 获取所有不可见元素或者 type='hidden'的元素 【包括 display:none | type='hidden' | visibility:hidden】

  ( :visible ) 获取所有可见的元素

④:( [attribute] ) 包含给定属性的元素

  ( [attribute=value] ) 等于给定属性的特定值的元素  ( [attribute【!=/^=/$=/*=】value] ) 获取 【不等于/已值开头/已值结尾/包含值】

  ( [selector1][selector2][selector3] ) 满足多个条件的符合属性元素  【selector1是属性条件不是选择器】

⑤[P31]:( :nth-child(sq|even|odd|index) ) 获取每个父元素下的特定位置的元素,索引号从1开始

  ( :first-child ) 获取每个父元素的第一个子元素

  ( :last-child ) 获取每个父元素的最后一个子元素

  ( :only-child ) 获取没个父元素的仅有一个子元素

⑥:( :enabled ) 获取表单中的所有属性为可用的元素

  ( :disabled ) 获取表单中的所有属性为不可用的元素

  ( :checked ) 获取表单中所有被选中的元素

  ( :selected ) 获取表单中所有被选中的option的元素

======================================================

v1.6   v1.7  v1.8  v1.9  v2.0   

---------------------------

跟选择器有关的还有“筛选”

筛选=过滤[1]+查找[2]+串联[3]

[1]:

eq(index): 获取第N个元素,这个元素的位置是从0算起

first(): 获取第一个元素

last() :  获取匹配的最后个元素

hasClass(class) : 检查当前的元素是否含有某个特定的类,如果有,则返回true。这其实就是 is("." + class)。
filter(expr | fn) : 筛选出与指定表达式匹配的元素集合。 这个方法用于缩小匹配的范围。用逗号分隔多个表达式
is(expr) :  用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。 如果没有元素符合,或者表达式无效,都返回'false'。

map(callback) : 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。
has(expr) : 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 .has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代,含有匹配后代的对象将得以保留。

not(expr) : 删除与指定表达式匹配的元素
slice(start, [end]): 选取一个匹配的子集 与原来的slice方法类似[开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起 , 结束选取自己的位置,如果不指定,则就是本身的结尾。]

 

[2]:

children([expr]) :取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意:parents()将查找所有祖辈元素,而children()只考虑子元素而不考虑所有后代元素。

closest([expr]) :
find(expr) :搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

next([expr]) :取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。
nextAll([expr]) :查找当前元素之后所有的同辈元素。可以用表达式过滤
nextUntil([expr]) :查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止。如果提供的jQuery代表了一组DOM元素,.nextUntil()方法也能让我们找遍所有元素所在的DOM树,直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素,但不包括那个选择器匹配到的元素。 如果没有选择器匹配到,或者没有提供参数,那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll()效果一样。

offsetParent() :返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

parent([expr]) :取得一个包含着所有匹配元素的唯一父元素的元素集合。你可以使用可选的表达式来筛选。
parents([expr]) :取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
parentsUntil([expr]) :查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。如果提供的jQuery代表了一组DOM元素,.parentsUntil()方法也能让我们找遍所有元素的祖先元素,直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素,但不包括那个选择器匹配到的元素。 
prev([expr]) :对相应之前的next系列。。
prevAll([expr]) 对相应之前的next系列。。
prevUntil([expr]): 对相应之前的next系列。。
siblings([expr]):取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

[3]:

add(expr, [context]) :把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。 jQuery 1.4 中, .add()方法返回的结果将始终以元素在HTML文档中出现的顺序来排序,而不再是简单的添加。
andSelf() :加入先前所选的加入当前元素中 对于筛选或查找后的元素,要加入先前所选元素时将会很有用。
contents() :查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容
end(): 回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。如果之前没有破坏性操作,则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

posted @ 2013-04-08 17:14  天翼软件  阅读(517)  评论(0编辑  收藏  举报