`

jQuery操作类数组的工具方法

jQueryAjaxHibernateJavaJavaScript 
阅读更多

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入门与介绍，jQuery对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    浅谈jQuery操作类数组的工具方法

    本文将深入探讨jQuery操作类数组的工具方法，帮助开发者更高效地处理这类对象。 首先，`length`属性是一个非常关键的属性，它告诉开发者jQuery对象中包含了多少个DOM元素。例如，如果你执行`var divs = $('div')`，...

    jQery中类数组判断的实现原理及代码实现

    了解这些知识后，我们可以通过自定义函数或利用jQuery提供的工具方法，对类数组对象进行遍历、转换或者操作，以满足各种开发需求。在实际工作中，熟练掌握类数组对象的处理技巧，能够提升代码的效率和可读性，也是...

    jQuery数组处理函数整理

    这在你需要对类数组对象进行数组操作时非常有用。 12. **$(dom).toArray()**: 这个方法将jQuery对象转换为一个包含DOM元素的数组。虽然不常用，但在某些场景下，比如需要将jQuery集合转换为原生数组进行操作时，...

    jquery 获取select数组与name数组长度的实现代码

    jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，对于前端开发人员来说是一个非常有用的工具。本文将重点介绍如何利用jQuery提供的方法来获取select元素中option...

    jquery1.43源码分析之工具方法.doc

    根据文档的描述，这部分内容主要关注于一些常用的工具方法，它们包括但不限于：对`jQuery`对象进行扩展，加入数组和对象的操作方法、测试方法、函数代理以及浏览器特性的检测等。值得注意的是，文档中提到的一些方法...

    JQuery 操作Javascript对象和数组的工具函数小结

    标题中提到的JQuery操作Javascript对象和数组的工具函数小结，意味着接下来将介绍JQuery库中用于处理Javascript对象和数组的多个实用函数。JQuery作为一个强大的JavaScript库，提供了一组丰富的API来简化DOM操作、...

    struts2 ajax jquery 验证用户名，有后台代码

    jQuery 是一个JavaScript库，它简化了DOM操作、事件处理以及Ajax交互等任务，使开发者能更轻松地实现Ajax功能。 在这个例子中，前端使用jQuery发起Ajax请求，检查用户输入的用户名是否已被占用。jQuery的$.ajax()...

    jQuery Utilities 分类下的函数（或属性）的实现方式分析

    除此之外，jQuery还提供了许多其他实用工具，如`$.trim()`用于去除字符串两端的空白，`$.isPlainObject()`判断是否为纯粹的对象，`$.inArray()`检查元素是否在数组中，以及`$.grep()`过滤数组等。这些函数的实现都...

    jQuery实现动态给table赋值的方法示例

    总结起来，jQuery为动态操作HTML表格提供了强大的工具。在这个示例中，我们学习了如何使用jQuery从JSON数据生成表格，并展示了jQuery的几个核心方法。这个技巧不仅适用于填充表格，还可以应用于其他需要动态生成或...

    jquery分类搜索框带过滤器的搜索框

    总的来说，创建一个jQuery分类搜索框带过滤器的搜索框，涉及到的知识点包括：jQuery选择器、事件监听、字符串处理、DOM操作、性能优化以及异步数据处理等。通过熟练掌握这些技能，你可以构建出更高效、用户体验更好...

    Jquery JSONObject类包

    `JSONObject`是Java中处理JSON对象的一个工具类，提供了创建、读取和修改JSON对象的方法。 ### jQuery与Ajax jQuery简化了原生JavaScript的Ajax操作。Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个...

    利用jQuery插件构建无限级分类Tree

    在jQuery中，我们可以创建一个插件，该插件接受JSON数据作为输入，这些数据包含了各个节点的信息，如ID、名称、子节点数组等。在解析数据时，我们可以通过递归函数来生成树状结构。每个节点可以是一个HTML元素，如`...

    jquery操作手册中文版

    **jQuery 操作手册中文版** ...总之，jQuery 操作手册中文版是学习和实践 jQuery 必不可少的工具，通过深入阅读和实践手册中的例子，你可以迅速提升在网页开发中的 JavaScript 技能，实现更高效、更优雅的代码编写。

    JQuery权威指南源代码

    使用jQuery扩展工具函数实现对字符串指定类型的检测 第10章 在指定的查找范围内获取DOM元素 选择器中含有空格符与不含空格符的区别 事件中的target方法优化冒泡现象 使用data()方法在元素上存取移数据 使用data...

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括...

    009课-封装Each方法、Css方法及工具类方法.rar

    工具类是一组无状态、静态的辅助方法，它们提供了一些通用功能，比如字符串处理、日期操作、数组操作等。在项目中，我们常常会创建一个工具类库，将这些常用的方法集中起来，方便在不同地方调用。工具类方法的设计...

    jQueryDemo(JQuery常用操作2005)

    jQuery的选择器是其强大之处之一，它整合了CSS1至CSS3的选择器，如ID选择器("#id")、类选择器(".class")、元素选择器("tag")等，还提供了一些特有的选择器，如":first"、":last"、":even"等，使得选取网页元素变得...

    jquery简单用法大全

    jQuery还提供了一系列工具方法，如`$.each()`, `$.trim()`, `$.grep()`, `$.extend()`等，它们对数组、字符串、对象等进行处理。 **jQuery简单例子** 例如，使用jQuery实现点击按钮隐藏某元素： ```javascript $...

Magicbox
Global site tag (gtag.js) - Google Analytics