首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

jQuery对象中类数组的概念及操作

2014年04月10日 发布 阅读(347) 作者:懒炖

什么是类数组?相信我们对function方法的arguments很熟悉,arguments就像一个数组,但instanceof Array检测会返回false,可以称为“类数组”。

jQuery查找到的元素集,它跟数组一样具有length属性。如var a = $(“a”),a获取了页面中所有的A标签。但我们用使用(a instanceof Array)却会返回false,说明它跟数组很相似,但又不是”真实”的数组。所以我们称之为”类数组”。

jQuery类数组如果转换成真正的数组?

  1. var a = $("a");
  2. console.log(a instanceof Array); //false
  3. var a1 = [].slice.call(a);
  4. var a2 = a.get(); //get()为jQuery方法
  5. var a3 = a.toArray(); //toArray为jQuery方法
  6. console.log(a1 instanceof Array); //true
  7. console.log(a2 instanceof Array); //true
  8. console.log(a3 instanceof Array); //true

测试发现,jQuery类数组仅可以使用数组的push,slice,sort方法,但不能使用shift,unshift,pop,reverse,concat,join

jQuery对类数组的操作还提供了哪些方法呢?

andSelf():合并命令链内最近产生的两个类数组;

add(String|elem|Array):把参数中的元素添加到类数组中,如果参数是jQuery选择器,那么将把所有匹配的对象都添加到集合中, 如果是html元素那就通过clean方法得到的元素数组添加到集合中,如果是dom元素或dom元素数组,那就直接添加到集合了;注意返回的是添加后的数组;

contains(text):返回包含text参数所传入的文本字符串的元素所组成的新类数组;

clone(copyHandle):如果传入的参数为true,那么会连带事件一起拷贝,否则不拷贝事件,形成一个新的类数组;

childen():返回原始类数组元素的所有不同子元素所组成的新类数组(不包含文本节点),如$(‘div’).children()返回所有div元素下的子元素所组成的新类数组;如果指定了参数,那么该参数也是筛选表达式;

contents():返回原始类数组元素的内容新类数组(可以包含文本节点);注意此方法不能接受参数进行过滤;

end():在jQuery命令链内调用,以便返回退到前一个类数组;

find(String):返回包含原始类数组里与传入的选择器表达式相匹配的所有元素的新类数组,并且原始类数组中的元素的后代也会被传入新的类数组;

filter(String|function):如 果传入的参数是String类型的话,那么该表达式必须也是筛选表达式,用于从类数组里删除所有与选择器不匹配的元素;如果传入的是一个函数的话,那么类 数组中的每个元素都调用这个函数,若这个函数返回false则把这个元素从类数组中删除,而在函数中可以通过this关键字来调用当时类数组中调用方法的 元素;如$(‘td’).filter(function(){return this.innerHTML.match(/^”d+$/)})返回td中的内容为数字的所有td元素;

get(index):当没指定index时,以数组形式返回所有元素,如果指定了index,则返回下标为index对应的 元素。

index(elem):在类数组中返回元素elem所在的下标,如果没找到该元素则返回-1,如果不带elem参数则返回0;

is(String):如果类数组中含有String匹配的元素,那么返回true,否则返回false;

not(String|elem|Array):删除类数组中满足条件的元素

parent():返回原始类数组所有元素的唯一直接父元素的新类数组;如果指定了参数,那么该参数也是筛选表达式;

parents():返回原始类数组所有元素的祖先元素的新类数组;如果指定了参数,那么该参数也是筛选表达式;

prev():返回原始类数组元素的所有唯一的上一个兄弟元素组成的新类数组;如果指定了参数,那么该参数也是筛选表达式;

prevAll():返回包含原始类数组元素的所有前面兄弟元素的新类数组;如果指定了参数,那么该参数也是筛选表达式;

next():返回原始类数组元素的所有唯一的下一个兄弟元素所组成的新类数组;如果指定了参数,那么该参数也是筛选表达式;如$(‘div#someDiv’).next()返回包含id为someDiv的div元素的下一个兄弟元素的类数组;如果指定了参数,那么该参数也是筛选表达式;

nextAll():返回包含原始类数组元素的所有后续兄弟的新类数组;如$(‘div#someDiv’).nextAll()返回包含id为someDiv的div元素的后面兄弟元素的新类数组;如果指定了参数,那么该参数也是筛选表达式;

slice(begin,end):创建并返回新的类数组,该类数组是原来类数组的连续的一部分,且新类数组的第一个 元素是原类数组中的begin位置的元素,而最后一个元素是end位置元素的前一元素,当然end可以不指定,那么将延伸到原始类数组的末尾; 如$(‘‘).slice(2,3)这个语句选择页面上的所有元素,然后生存包含原始类数组的第三个元素的新类数组,注意这 个$(‘‘).get(2)不同,这个返回的是元素,而slice方法返回的是类数组,从而拥有类数组的操作;

siblings():返回包含原始类数组元素中的所有唯一兄弟元素所组成的新类数组;如果指定了参数,那么该参数也是筛选表达式;

size():返回包类数组中的元素个数

各个方法具体的使用,可查看jQuery的api:http://api.jquery.com/

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • jQuery对象中类数组的概念及操作

    什么是类数组?相信我们对function方法的arguments很熟悉,arguments就像一个数组,但instanceof Array检测会返回false,可以称为“类数组”。

    发布:2014-04-10 阅读(347)

  • jquery使用不当导致内存泄漏

    jQuery是现在最流行的js库,一般情况下我们都会放心的使用它,不用考虑其内存泄漏的问题。 最近的项目是基于MVC模式的管理系统,期间要采用ajax不断轮询服务器,以获得最新的数据,这时候使用jQuery的时候就要注意了,一不小心俺们最可爱的IE内存就up up up了~~

    发布:2013-12-10 阅读(348)

  • jQuery.support源码分析(检测浏览器兼容)

    jquery.support主要是检测浏览器兼容性,支持力度的方法,用于展示不同浏览器各自特性和bug的属性集合。作为一个静态成员,提供给jquery内部函数,告诉他们某些功能是否能用。避免了以往通过检测浏览器版本做修改。

    发布:2013-05-08 阅读(161)

  • jQuery跳出each循环(替换break,continue)

    jQuery each循环中,如果要实现类似break或continue的功能,不用跟原生javascript for循环一样用break或continue了,而必须用reaturn false、return true

    发布:2012-11-14 阅读(464)