首页 > 代码库 > JQuery 获取对象

JQuery 获取对象

 

    

 

 

 

          

什么是遍历?

jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。

  技术分享

 

            图示解释:

技术分享

  • <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
  • <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
  • 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
  • <span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
  • 两个 <li> 元素是同胞(拥有相同的父元素)。
  • 右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
  • <b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。

提示:祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

   

jQuery. parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")

 

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素

 

jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点

 

jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个jQuery对象返回,children()则只会返回节点

 

jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点

 

jQuery.prevAll(),返回所有之前的兄弟节点

 

jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点

 

jQuery.nextAll(),返回所有之后的兄弟节点

 

jQuery.siblings(),返回兄弟姐妹节点,不分前后

 

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从p元素开始找,等同于$("p span")

            

    jQuery 遍历函数

    jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。

函数描述
.add()将元素添加到匹配元素的集合中。
.andSelf()把堆栈中之前的元素集添加到当前集合中。
.children()获得匹配元素集合中每个元素的所有子元素。
.closest()从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
.contents()获得匹配元素集合中每个元素的子元素,包括文本和注释节点。
.each()对 jQuery 对象进行迭代,为每个匹配元素执行函数。
.end()结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
.eq()将匹配元素集合缩减为位于指定索引的新元素。
.filter()将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find()获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
.first()将匹配元素集合缩减为集合中的第一个元素。
.has()将匹配元素集合缩减为包含特定元素的后代的集合。
.is()根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。
.last()将匹配元素集合缩减为集合中的最后一个元素。
.map()把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。
.next()获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll()获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
.nextUntil()获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。
.not()从匹配元素集合中删除元素。
.offsetParent()获得用于定位的第一个父元素。
.parent()获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。
.parents()获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。
.parentsUntil()获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
.prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
.prevAll()获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
.prevUntil()获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
.siblings()获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。
.slice()将匹配元素集合缩减为指定范围的子集。

    

基本过滤选择器:

  ·根据元素基本特征,常用于表格和列表:

    --first:    第一个元素      console.log($("li:first")); // first 第一个元素

    --last:    最后一个元素

    --not(selector)   把selector排除在外

    --even     挑选偶数行

    --odd    挑选奇数行

    --eq(index)    下标等于index的元素

    --gt(index)   下标大于index的元素

    --It(index)    下标小于index的元素

 

   这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。

方法描述
addClass()向匹配的元素添加指定的类名。
after()在匹配的元素之后插入内容。
append()向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo()向目标结尾插入匹配元素集合中的每个元素。
attr()设置或返回匹配元素的属性和值。
before()在每个匹配的元素之前插入内容。
clone()创建匹配元素集合的副本。
detach()从 DOM 中移除匹配元素集合。
empty()删除匹配的元素集合中所有的子节点。
hasClass()检查匹配的元素是否拥有指定的类。
html()设置或返回匹配的元素集合中的 HTML 内容。
insertAfter()把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()把匹配的元素插入到另一个指定的元素集合的前面。
prepend()向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo()向目标开头插入匹配元素集合中的每个元素。
remove()移除所有匹配的元素。
removeAttr()从所有匹配的元素中移除指定的属性。
removeClass()从所有匹配的元素中删除全部或者指定的类。
replaceAll()用匹配的元素替换所有匹配到的元素。
replaceWith()用新内容替换匹配的元素。
text()设置或返回匹配元素的内容。
toggleClass()从匹配的元素中添加或删除一个类。
unwrap()移除并替换指定元素的父元素。
val()设置或返回匹配元素的值。
wrap()把匹配的元素用指定的内容或元素包裹起来。
wrapAll()把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

JQuery 获取对象