【jQuery】jQuery常用数组操作和对象操作

jQuery核心操作详解

最新推荐文章于 2021-10-05 19:44:40 发布

原创最新推荐文章于 2021-10-05 19:44:40 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #数组操作 #对象操作

jQuery 专栏收录该内容

8 篇文章

订阅专栏

本文深入讲解jQuery中的常用对象访问和数组操作方法，包括$.each()遍历数组或对象，$.get()和$.index()获取元素或索引，$.extend()合并对象，$.inArray()查找数组元素位置，$.toArray()转换jQuery对象为数组，$.merge()合并数组，$.type()检测数据类型，以及$.trim()去除字符串空白等实用技巧。

1.常用对象访问

$.each(array, callback )
$.each(object, callback )

$.each(["Aaron", "慕课网"], function(index, value) {
   //index是索引,也就是数组的索引
   //value就是数组中的值了
   //return false===break;
   //return true===continue
});

$.get( index )通过索引获取元素
获取集合中第index（从0开始）个元素，index可以为负值，负值的索引起始值是-1

$.index()通过元素获取索引
$elem.index() 返回值elem第一个元素相对于同辈元素的位置
$elem.index( selector ) 返回值就是elem相对于选择器匹配元素的位置，找不到，返回-1
$elem.index( new ) 返回值就是new相对于elem的位置

<ul>
    <a></a>
    <li id="test1">1</li>
    <li id="test2">2</li>
    <li id="test3">3</li>
</ul>
$("li").index() //结果为1
$("li").index($("#test2")) //结果为1
$("li").index(":hidden") //结果为-1

.length 返回jquery对象的元素个数，和jquery对象的size()属性一致
$("img").length;

$.extend( target, object1, [objectN])
target:待修改对象。
object1:待合并到第一个对象的对象。
objectN:待合并到第一个对象的对象。

var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
结果：
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

2.常用数组操作

$.inArray(value,array,[fromIndex])
确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。
value:查找的值
array:待查找的数组。
fromIndex:起始查询索引，默认值为0。

var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr);  //3
jQuery.inArray(4, arr);  //0
jQuery.inArray("David", arr);  //-1
jQuery.inArray("Pete", arr, 2);  //-1

$.toArray() 把jQuery集合中所有DOM元素恢复成一个数组。

alert($('li').toArray());
结果
[<li id="foo">, <li id="bar">]

$.merge(first,second) 合并两个数组到第一个数组上。

$.merge( [0,1,2], [2,3,4] )
结果：
[0,1,2,2,3,4]

$.type(obj) 检测obj的数据类型

jQuery.type(true) === "boolean"
jQuery.type(3) === "number"      
jQuery.type("test") === "string"

$.trim(str) 去掉字符串起始和结尾的空格。

$.trim("  hello, how are you?  ");
结果：
"hello, how are you?"

jQuery中文文档，可以查看全部内容