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操作类数组的工具方法,帮助开发者更高效地处理这类对象。 首先,`length`属性是一个非常关键的属性,它告诉开发者jQuery对象中包含了多少个DOM元素。例如,如果你执行`var divs = $('div')`,...
了解这些知识后,我们可以通过自定义函数或利用jQuery提供的工具方法,对类数组对象进行遍历、转换或者操作,以满足各种开发需求。在实际工作中,熟练掌握类数组对象的处理技巧,能够提升代码的效率和可读性,也是...
这在你需要对类数组对象进行数组操作时非常有用。 12. **$(dom).toArray()**: 这个方法将jQuery对象转换为一个包含DOM元素的数组。虽然不常用,但在某些场景下,比如需要将jQuery集合转换为原生数组进行操作时,...
jQuery是一个快速、小巧、功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互,对于前端开发人员来说是一个非常有用的工具。本文将重点介绍如何利用jQuery提供的方法来获取select元素中option...
根据文档的描述,这部分内容主要关注于一些常用的工具方法,它们包括但不限于:对`jQuery`对象进行扩展,加入数组和对象的操作方法、测试方法、函数代理以及浏览器特性的检测等。值得注意的是,文档中提到的一些方法...
标题中提到的JQuery操作Javascript对象和数组的工具函数小结,意味着接下来将介绍JQuery库中用于处理Javascript对象和数组的多个实用函数。JQuery作为一个强大的JavaScript库,提供了一组丰富的API来简化DOM操作、...
jQuery 是一个JavaScript库,它简化了DOM操作、事件处理以及Ajax交互等任务,使开发者能更轻松地实现Ajax功能。 在这个例子中,前端使用jQuery发起Ajax请求,检查用户输入的用户名是否已被占用。jQuery的$.ajax()...
除此之外,jQuery还提供了许多其他实用工具,如`$.trim()`用于去除字符串两端的空白,`$.isPlainObject()`判断是否为纯粹的对象,`$.inArray()`检查元素是否在数组中,以及`$.grep()`过滤数组等。这些函数的实现都...
总结起来,jQuery为动态操作HTML表格提供了强大的工具。在这个示例中,我们学习了如何使用jQuery从JSON数据生成表格,并展示了jQuery的几个核心方法。这个技巧不仅适用于填充表格,还可以应用于其他需要动态生成或...
`JSONObject`是Java中处理JSON对象的一个工具类,提供了创建、读取和修改JSON对象的方法。 ### jQuery与Ajax jQuery简化了原生JavaScript的Ajax操作。Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个...
在jQuery中,我们可以创建一个插件,该插件接受JSON数据作为输入,这些数据包含了各个节点的信息,如ID、名称、子节点数组等。在解析数据时,我们可以通过递归函数来生成树状结构。每个节点可以是一个HTML元素,如`...
**jQuery 操作手册中文版** ...总之,jQuery 操作手册中文版是学习和实践 jQuery 必不可少的工具,通过深入阅读和实践手册中的例子,你可以迅速提升在网页开发中的 JavaScript 技能,实现更高效、更优雅的代码编写。
使用jQuery扩展工具函数实现对字符串指定类型的检测 第10章 在指定的查找范围内获取DOM元素 选择器中含有空格符与不含空格符的区别 事件中的target方法优化冒泡现象 使用data()方法在元素上存取移数据 使用data...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
工具类是一组无状态、静态的辅助方法,它们提供了一些通用功能,比如字符串处理、日期操作、数组操作等。在项目中,我们常常会创建一个工具类库,将这些常用的方法集中起来,方便在不同地方调用。工具类方法的设计...
jQuery的选择器是其强大之处之一,它整合了CSS1至CSS3的选择器,如ID选择器("#id")、类选择器(".class")、元素选择器("tag")等,还提供了一些特有的选择器,如":first"、":last"、":even"等,使得选取网页元素变得...
总的来说,创建一个jQuery分类搜索框带过滤器的搜索框,涉及到的知识点包括:jQuery选择器、事件监听、字符串处理、DOM操作、性能优化以及异步数据处理等。通过熟练掌握这些技能,你可以构建出更高效、用户体验更好...
jQuery还提供了一系列工具方法,如`$.each()`, `$.trim()`, `$.grep()`, `$.extend()`等,它们对数组、字符串、对象等进行处理。 **jQuery简单例子** 例如,使用jQuery实现点击按钮隐藏某元素: ```javascript $...