jQuery操作类数组的工具方法

最新推荐文章于 2021-10-05 19:44:40 发布
原创 最新推荐文章于 2021-10-05 19:44:40 发布 · 173 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jQuery #Ajax #Hibernate #Java #JavaScript #ViewUI

本文详细介绍了jQuery对象操作类数组的工具方法，包括过滤、导航、连接方法等，通过示例展示了如何使用这些方法对DOM元素进行高效操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

jQuery对象提供了几个常用的方法来操作类数组： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>操作类数组的工具方法</title>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	</head>
	<body>
		<div>
			<div id="java">
				Java
			</div>
			<div id="javaee">
				Java EE
			</div>
			<div id="ajax">
				Ajax
			</div>
			<div id="xml">
				XML
			</div>
			<div id="ejb">
				EJB
			</div>
			<div id="hibernate">
				Hibernate
			</div>
		</div>
		
		<script type="text/javascript">
			//获取div之内所有的div元素，并迭代处理每个元素
			$("div>div").each(function(i) {
				this.innerHTML += " 添加的内容" + i;
			})
			//返回div之内的所有div元素的个数，下面将输出6
			alert($("div>div").length);
			//获取div之内的第四个div元素包装的jQuery，下面将输出“疯狂XML讲义...”
			alert($("div>div").eq(3).html());
			//获取div之内的第二个div元素，下面将输出“轻量级Java EE企业应用实战...”
			alert($("div>div").get(1).innerHTML);
			//获取id为java的div元素。注意：$("#java").get()返回一个数组
			alert($("#java").get()[0].innerHTML);
			//所有div元素之内，id为ejb的div的索引，下面将输出4.
			alert($("div>div").index($("#ejb").get(0)));
		</script>
	</body>
</html>
 操作类数组的工具方法(过滤) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>操作类数组的工具方法(过滤)</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	</head>

	<body>
		<div>
			<div id="java">
				Java
			</div>
			<div id="javaee">
				Java EE
			</div>
			<div id="ajax">
				Ajax
			</div>
			<div id="xml">
				XML
			</div>
			<div id="ejb">
				EJB
			</div>
			<div id="hibernate">
				Hibernate
			</div>
		</div>
		<script type="text/javascript">
			//对div之内的div元素进行过滤，必须满足id为ajax
			$("div>div").filter("#ajax").css("background-color", "#aaaaaa");
			//对div之内的div元素进行过滤，要求div内的字符串长度大于8
			$("div>div").filter(function() {
				return this.innerHTML.length > 8;
			}).css("border", "1px solid black");
			//对div之内的div元素进行过滤，必须满足id不为ajax
			$("div>div").not("#ajax").css("font-weight", "bold");
			//对div之内的div元素进行过滤，取出索引从3到5的元素
			$("div>div").slice(3, 5).height(40);
			//将div之内的div元素映射成另一个数组，t的值是[0,1,2,3,4,5]
			$("div>div").map(function(i) {
				return i;
			});
		</script>
	</body>
</html>
 操作类数组的工具方法(导航) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>操作类数组的工具方法(导航)</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	</head>

	<body>
		<div>
			<div id="java">
				Java
			</div>
			<div id="javaee">
				Java EE
			</div>
			<div id="ajax">
				Ajax
			</div>
			<div id="xml">
				XML
			</div>
			<div id="ejb">
				EJB
			</div>
			<div id="hibernate">
				Hibernate
			</div>
		</div>
		<script type="text/javascript">
			//获取div之内所有内容（包括节点和文本），实际返回div下的6个子div。
			$("div").contents().css("background-color", "#dddddd");
			//获取id为ajax节点的下一个兄弟节点
			$("#ajax").next().css("border", "2px dotted black");
			//获取id为ajax节点的上一个兄弟节点
			$("#ajax").prev().css("border", "2px solid black");
			//获取获取id为ajax节点的、id为java的兄弟节点
			$("#ajax").siblings("#java").append("<b> 是ID为ajax的节点的兄弟节点（且其id为java）</b>");
			//取出所有div元素的父元素，将会输出body元素、和一个div元素
			$("div").parent().each(function() {
				alert($(this).html());
			});
		</script>
	</body>
</html>
 操作类数组的工具方法(连接方法) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>操作类数组的工具方法(连接方法)</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	</head>

	<body>
		<div>
			<div id="java">
				Java
			</div>
			<div id="javaee">
				Java EE
			</div>
			<div id="ajax">
				Ajax
			</div>
			<div id="xml">
				XML
			</div>
			<div id="ejb">
				EJB
			</div>
			<div id="hibernate">
				Hibernate
			</div>
		</div>
		<script type="text/javascript">
			//获取id为ajax节点的下一个兄弟节点，再将id为ajax的节点与此链为一体。
			//实际返回id为ajax的节点、以及id为ajax的下一个节点
			$("#ajax").next().andSelf().css("border", "2px solid black");
			//先获取ajax节点的下一个节点，再次使用end()方法重新获取之前的ajax节点
			//实际方返回的就是$("#ajax")的结果
			$("#ajax").next().end().css("background-color", "#ffaaaa");
		</script>
	</body>
</html>
 
浅谈jQuery操作类数组的工具方法
11-29
本文将深入探讨jQuery操作类数组的工具方法，帮助开发者更高效地处理这类对象。 首先，`length`属性是一个非常关键的属性，它告诉开发者jQuery对象中包含了多少个DOM元素。例如，如果你执行`var divs = $('div')`，...
JQuery 操作Javascript对象和数组的工具函数小结
10-29
标题中提到的JQuery操作Javascript对象和数组的工具函数小结，意味着接下来将介绍JQuery库中用于处理Javascript对象和数组的多个实用函数。JQuery作为一个强大的JavaScript库，提供了一组丰富的API来简化DOM操作、...
jquery 常用的数组操作
crg50134的博客
10-07 212
点击(此处)折叠或打开 <meta charset="UTF-8"/> <script type="...
jquery之数组操作
soos的博客
04-25 412
有时候我们希望往数组中添加一项内容，这里我这总结的有两种简单的方法，以便后期方便使用： var arr=[];//创建一个数组 //方法1 arr.push('a');//往数组末尾添加元素 //方法2 arr[arr.length]='a';//直接给数组最后一个元素赋值 判断一个数组中是否包含某个字符串对象 jQuery方法如下： $.inArry('cc',arr);//如果
jquery数组操作大全
jfh389987366的博客
01-12 900
jQuery数组操作大全
对数组操作的工具类 Arrays
beifish8的博客
06-16 272
对数组操作的工具类 Arrays toString 返回每个数组元素组成的字符串。对于object[],它是调用每个元素的toString(),然后用“，”拼接 sort 给数组的元素排序 binarysearch 二分查找法 查找元素：返回位置 equals 判断两个数组的元素是否相等 fill 填充数组为一个值 ...
jq操作数组的常用方法
每天学习一点点
12-30 787
JavaScript Array 对象 | 菜鸟教程 js数组操作---改变原数组和不改变原数组的方法整理 - 艺术诗人 - 博客园 补充： grep()方法：$.grep() 函数使用指定的函数过滤数组中的元素，并返回过滤后的数组。 详情参考：jQuery.grep() 方法 | 菜鸟教程 ...
jquery 获取select数组与name数组长度的实现代码
10-22
jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，对于前端开发人员来说是一个非常有用的工具。本文将重点介绍如何利用jQuery提供的方法来获取select元素中option...
jQuery数组处理函数整理
10-21
这在你需要对类数组对象进行数组操作时非常有用。 12. **$(dom).toArray()**: 这个方法将jQuery对象转换为一个包含DOM元素的数组。虽然不常用，但在某些场景下，比如需要将jQuery集合转换为原生数组进行操作时，...
jquery 数组操作(超全)
yzx3105的博客
06-16 5020
1.判断数组中是否包含某个元素$.inArray()的用法 判断数组里面是否包含某个元素可以使用 $.inArray("元素(字符串)",数组名称) 进行判断 ,当存在该元素(字符串)时，返回该元素在数组的下标，不存在时返回 -1 var array = ["asp.net", "asp.net mvc", "html5", "css3", "jquery", "JavaScript"]; var index = $.inArray("asp.net mvc", array); //包含返回下标,不
jQuery对象中的类数组操作
孤峰飘雪的专栏
09-26 716
<br />我们都知道jQUery对象中有一个类数组的元素包装集，该集合类似js中的数组一样拥有length属性，因此我们称此为类数组，下面我们就来总结下这个jQuery对象中的类数组时如何进行操作的，看看我们的jQuery为我们都提供了哪些可用的方法： <br />　　size()：很明显，它应该是返回包装集中的元素个数，如$('a').size()表示链接元素的个数;<br />　　get(index)：当没指定index时就默认取包装集中所有元素，并以js中的数组形式返回，如果指定了index，则返
jQuery的类数组对象结构
datk74439的博客
12-05 164
Query就是为了获取DOM、操作DOM而存在的 所以为了更方便这些操作，让节点与实例对象通过一个桥梁给关联起来，jQuery内部就采用了一种叫“类数组对象”的方式作为存储结构，所以我们即可以像对象一样处理jQuery操作，也能像数组一样可以使用push、pop、shift、unshift、sort、each、map等类数组的方法操作jQuery对象了。 转载于:https://ww...
6、jQuery基础重点之jQuery类数组操作
xuxianmei的专栏
07-06 833
包括：元素的定位、查找、复制和删除。 另外琮可以通过迭代器和映射器扩展对类数组的操作功能。 注意：类数组的操作对象是集合。 1、定位元素 jQuery定义了get()和index()方法用来定位元素，它们是集合操作的最基本方法，另外jQuery 还定义了get(index)和eq(index)方法，读取指定位置的元素。 get(index)与eq(index)方法主要区别在于 get
jQuery源码学习 之 类数组对象结构 ---- day3
Amy的学习之路
09-20 742
1. 类数组对象     很多人迷惑的jQuery为什么能像数组一样操作，通过对象get方法或者直接通过下标0索引就能转成DOM对象，     首页和们看jQuery的入口都是统一的$，通过传递参数的不同，实现是9种方法的重载： 1. jQuery({selector,[content]}) 2. jQuery(element) 3. jQuery(elementArray) 4. jQue
jQuery对象中类数组的概念及操作
weixin_33796205的博客
07-17 154
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery库-数组操作的工具方法-jQuery自己的方法-DOM导航-链接（撤回）
HH_huan的博客
01-01 352
$()获取DOM元素，返回的是一个jQuery对象。$()函数是jQuery()函数的简化别名; 下载地址：http://jquery.com;在线文档：http://docs.jquery.com/；jquery也需要额外的环境变量、配置文件,只需在html页面中导入jquery的js文件即可。 里面的src会有小小的变化。 多个库共存如jquery和prototype一起，那么$()只能
JQUERY 数组操作
JarryLiu 的专栏
10-05 671
1、数组的创建 var arrayObj = new Array();　//创建一个数组 var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　创建一个数组并赋值 要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规...
jQuery操作数组的工具方法
owen_william的博客
05-07 2024
1.前言 很多时候，jQuery的$()函数都返回一个类似数组的jQuery对象，例如$(“div”)将返回由页面中所有元素包装成jQuery对象，这个jQuery对象实际上包含了多个元素对应的DOM对象。在这种情况下，jQuery提供了以下几个常用属性和方法来操作类数组的jQuery对象。 1)        length:该属性返回jQuery里包含的DOM元素的个数 2)       
详解jQuery数组处理
jad's blog
01-11 439
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的介绍,顺便对jQuery数组做个总结.温故,知新.1. $.each(array, [callback]) 遍历[常用]解释: 不同于例遍 jQuery 对象的 $().each() 方法,此方法...
jQuery工具函数详解：提升业务逻辑中的对象与数组操作效率
在"从零开始学习jQuery (九) jQuery工具函数"这篇教程中，作者深入探讨了如何利用jQuery的强大功能来简化JavaScript编程中的对象和数组操作。jQuery工具函数是jQuery库的重要组成部分，它们扩展了JavaScript的原生...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值