jQuery数组对象转javascript数组

当我们在前端开发中,使用了jQuery时,我们通常通过$(".box-item")的方式获取的是一个jQuery对象是一个类数组对象,当我们需要向后台传输的数据中,使用的是javascript数组,或者有时候,我们需要将jQuery对象转换为javascript对象,一般来说jQuery对象,是不同于javascript元素或对象的,他是一个自带length属性的对象,但不是数组对象。

说类数组是因为有length属性,但是却不是真正意义上的数组: 

该jQuery对象除了有四个html元素之外,还有一个length属性,即便这个length属性为1,他也是一个类数组对象。当length=1时,我们将其转换为javascript对象,只需要获取第一个元素即可。$(".box-item")[0]。但是通常情况下,length是不为1的。为此,我们总结了以下几种转换方式:其中1和2本质上是一样的。

这里不光支持jQuery元素类数组转换,还支持jQuery数组的转换,如下所示,将四个box-item类元素的数组,先取偶数下标,然后将data-id属性取出,就组成了一个jQuery数组,数组元素为1,3最后通过上面的方式,将其转换为javascript数组。

完整代码如下:

<!doctype html>
<html>
  <head>
	   <meta charset="UTF-8"/>
	   <title>jQuery数组对象转javascript数组</title>
	   <style type="text/css">
		  *{margin:0;padding:0}
		  #box{width:800px;margin:0 auto;}
		  .box-item{background:#ddd;height:40px;margin:5px 0;}
	   </style>
	   <script type="text/javascript" src="../jquery.min.js"></script>
  </head>
  <body>
	   <div id="container">
		  <div id="box">
			<div class="box-item" data-id="1">1. [].slice.call(items)</div>
			<div class="box-item" data-id="2">2. Array.prototype.slice.call(items)</div>
			<div class="box-item" data-id="3">3. Array.from(items)</div>
			<div class="box-item" data-id="4">4. $.makeArray(items)</div>
		  </div>
	   </div>
	   <script type="text/javascript">
		  $(function(){
			var items = $(".box-item");
			items = $(items).filter(function(index,item){
				return index%2==0;
			}).map(function(index,item){
				return $(item).data("id");
			});
			console.log(items);
			//var res = [].slice.call(items);
			//var res = Array.prototype.slice.call(items);
			//var res = Array.from(items);
			var res = $.makeArray(items);
			console.log(res);
		  });
	   </script>
  </body>
</html>

 转换过程通过console.log()打印jQuery数组和javascript数组结构:

 

反过来,javascript对象要转为jQuery对象,很简单,只需要通过符号$()转换一下,如$(object),就可以将javascript对象转为jQuery对象。 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

luffy5459

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值