jQuery操作数组的工具方法

1.前言

很多时候,jQuery的$()函数都返回一个类似数组的jQuery对象,例如$(“div”)将返回由页面中所有<div…/>元素包装成jQuery对象,这个jQuery对象实际上包含了多个<div…/>元素对应的DOM对象。在这种情况下,jQuery提供了以下几个常用属性和方法来操作类数组的jQuery对象。

1)        length:该属性返回jQuery里包含的DOM元素的个数

2)        context:该属性返回获取jQuery对象传入的context参数

3)        jquery:该属性返回jQuery的版本

4)        each(fn(index)):该方法是一个迭代器函数,它将使用fn函数迭代处理jQuery里包含的每个元素。

5)        get():该方法返回由jQuery里包含的所有DOM元素组成 的数组

6)        get(index):该方法返回jQuery里包含的第index+1个DOM元素(第一个元素索引为0)。

7)        index(element|selector):该方法返回element元素(或匹配selector选择器的元素)在当下的程序示范了如何使用这些工具方法来操作类数组的jQuery对象。

2.例子

下面程序示范了如何使用这些工具方法来操作类数组的jQuery对象。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="OwenWilliam" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 操作类数组的工具方法 </title>
</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">Java EE企业应用</div>
	<div id="android">Android</div>
</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 获取div之内所有的div元素,并迭代处理每个元素
$("div>div").each(function(i)
{
	this.innerHTML += " 添加的内容" + i;
});
// 返回div之内的所有div元素的个数,下面将输出6
alert($("div>div").length);
// 获取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")));
</script>
</body>
</html>

3.结果

时间: 2024-08-05 04:00:30

jQuery操作数组的工具方法的相关文章

Arrays是专门用于操作数组的工具类

排序或者查找数组里面的内容 多值传递 集合转数组 数组转集合 数组转字符串 /* Arrays 是用于操作数组的工具类,里面全是静态的,和Collections是用来操作集合的工具类是不一样的 当import导入的没有说明static,那么就说明是导入包中的所有类, 如果说明是static的时候就说明导入的是某个类的所有静态成员,记得要加上static的说明符号. import static java.lang.System.*; */ import java.util.*; public cl

jQuery操作Table tr td方法大全

虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率. 1.鼠标移动行变色  $("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){

JavaScript1.6数组新特性和JQuery的几个工具方法

JavaScript 1.6 引入了几个新的Array 方法,具体的介绍见:New in JavaScript 1.6.这些方法已经被写进了ECMA262 V5.现代浏览器(IE9/Firefox/Safari/Chrome/Opera)都已经支持,但IE6/7/8不支持.jquery的工具方法中提供了类似的功能. 1.Array.forEach()和jquery的$().each().在数组中的每个项上运行一个函数.类似java5 增强的for循环. 1 2 3 4 5 6 7 8 9 var

jquery源码之工具方法

jQuery 作为时下前端的"霸主".它的强大已毋庸置疑.简洁,效率,优雅,易用等优点让人很容易对它珍爱有加. 作为js的小菜,为了提升自我等级,根据各大神博客精辟的解析,硬啃了jQuery源码.在此,并不是要解析啥源码啥的(也没到那个级别哈),读书笔记,仅此而已. 所谓磨刀不误砍柴功,jQuery在大展神通之前也做了许多准备工作.比如说他的一些工具方法: 首当其冲的是他的继承扩展方法: jQuery.extend 其实也不是传统意义的继承,说mixin可能更恰当一些. // 首先看看

jQuery晦涩的底层工具方法们

这里整理的是jQuery源码中一些比较晦涩难懂的.内部的.最底层的工具方法,它们多为jQuery的上层api方法服务,目前包括: jQuery.access jQuery.access: function( elems, fn, key, value, chainable, emptyGet, pass ) 在jQuery的众多api方法中,许多方法都有一个非常重要和常见的特征:重载,简单来讲即参数的不同决定了方法的功能不同 例如我们最常使用的几个:jQuery.fn.val().jQuery.

操作数组的工具类Arrays

Java提供的Arrays类里包含一些static修饰的方法可以直接操作数组. int binarySearch(type[] a, type key)使用二分法查询key元素值在a数组中出现的索引,如果a数组不包含key,返回负数,调用该方法要求数组中元素已经按升序排列. int binarySearch(type[] a, int fromIndex, int toIndex, type key)给定范围内二分搜索 type[] copyOf(type[] original, int new

汇总常用的jQuery操作Table tr td方法

虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率. 1.鼠标移动行变色  $("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){

关于javascript里面仿python切片操作数组的使用方法

其实在使用了好一段时间的 python之后,我觉得最让我念念不忘的并不是python每次在写函数或者循环的时候可以少用{}括号这样的东西(ps:其实也是了..感觉很清爽,而且又开始写js的时候老是想用xxx in range(): ...跪.:( ) 而是我觉得字符串操作的切片真实让我感到前所未有的爽. 试想一下,我们平时操作最多的数组和字符串在切片的帮助下,不知道可以省去多少时间和麻烦.而且有了切片甚至不用去记很多可以被切片代替的api. 今天我在啃<学习javascript数据结构与算法>

jquery操作select的各种方法

在工作中,有时候会遇到给select组件添加一些事件,前两天发表了一篇文章,<用jquery给select加选中事件>大致阐述了简单的jq操作select的方法,但是为了详细的介绍一下select,争取让大家把它吃透,也为了和脑残的IE作斗争,于是有了这篇文章的诞生. 一.使用jquery获取select元素(value和option里的内容) 1. var checkText=$("#select_id").find("option:selected"