JQuery之操作array

1:split 函数将字符串按某个字符分割,将分割后的结果存入字符串数组中

function SplitUsersInformation(users) {    var usersArray = users.split(‘;‘);    return usersArray;}

2:substr 函数切割目标字符串

currentStr = currentStr .substr(0, currentStr.length - 2);

3:push 方法向Array中添加一条记录

var totalUsers = new Array();function PushItem(name, departmemt) {    var currentUser = new Object();    currentUser.UserName = name;    currentUser.Department = departmemt;    totalUsers.push(currentUser);}

4:pop 方法从Array的栈中弹出最上面的那条记录

var totalUsers = new Array();var user1 = new Object();user1.UserName = "haha";user1.Department = "hahahaha";var user2 = new Object();user2.UserName = "lolo";user2.Department = "lolololo";totalUsers.push(user1);totalUsers.push(user2);totalUsers.pop();//totalUsers中会剩下user1,因为user2在栈的最上方,被弹出

5:splice 方法从Array中删除指定的某条或者多条记录

var totalUsers = new Array();totalUsers.push(...);

function SpliceItem(name) {    for (var i = 0; i < totalUsers.length; i++) {        if (totalUsers[i].UserName == name) {            totalUsers.splice(i, 1)        }    }}
            //多选删除
            $(‘.js-allDelete‘).on(‘click‘, function () {
                var array = [];
                $(‘#listTable input:checked‘).each(function (n) {
                    array.push($(this).parents(‘tr‘).attr(‘id‘));
                })

                hgl.confirm(‘@Url.Action("Delete", "GiftManage", new { area = "Gift" })‘, { id: array.join(‘,‘) }, ‘确定要删除所选项吗?‘);
            });
//页面加载的时候的执行的js
            $(window).bind(‘load‘, function () {
                var array = [], state = [];
                var tbody = $(‘#listTable‘).find(‘tbody‘),
                    tbodyTr = tbody.find(‘tr‘);

                tbodyTr.each(function (n) {    //each遍历tr  此时的$(this)指的是当前遍历的tr
                    array.push($(this).attr(‘id‘));   //push方法向Array中添加一条记录
                })

                $.post(‘@Url.Action("GetSpecialHeadhunderState", "Member", new { area = "Business" })‘, { id: array.join(‘,‘) }, function (d) {   //join将array数组内元素以,分割组成字符串
                    $.each(d.Content, function (i, val) { //$(selector).each(function(index,element))  index - 选择器的 index 位置  element - 当前的元素(也可使用 "this" 选择器) ---------这里的遍历是$.each()专门对json格式遍历
                        if (val.state - 0) {
                            tbodyTr.eq(i).find(".js-state").text("已设置").addClass("label-success").removeClass("label-inverse").end().find(".js-setSpecialHeadhunter").hide();
                        } else {
                            tbodyTr.eq(i).find(".js-state").text("未设置").removeClass("label-success").addClass("label-inverse").end().find(".js-setSpecialHeadhunter").show();
                            setHh(tbodyTr.eq(i).find(".js-setSpecialHeadhunter"));
                        }
                    })
                }, ‘json‘);
            });

注:jquery --- $.each遍历json数组方法(因为上面的post方法返回的是一个json格式的字符串)

jquery 对象的 $().each() 方法,此方法可用于例遍任何对象

jquery.each(obj,fn,arg)  
该方法有三个参数:进行操作的对象obj,进行操作的函数fn,函数的参数args。

1.obj对象是数组
each方法会对数组中子元素的逐个进行fn函数调用,直至调用某个子元素返回的结果为false为止,也就是说,我们可以在提供的fn函数进行处理,使之满足一定条件后就退出each方法调用。

2.obj 对象不是数组
该方法同1的最大区别是:fn方法会被逐次不考虑返回值的进行进行。换句话说,obj对象的所有属性都会被fn方法进行调用,即使fn函数返回false。调用传入的参数同1类似。

3.回调函数拥有两个参数:

第一个为对象的成员或数组的索引:
例遍数组,同时使用元素索引和内容
$.each( [0,1,2], function(index, content){  
  alert( "item #" + index + " its value is: " + content );  
});  
 
第二个为对应变量或内容: 
如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。

4.arg参数

当each方法提供了arg参数时,fn函数调用传入的参数为arg,否则为:子元素索引,子元素本身

使用jQuery解析JSON数据

在本篇中,我们将使用jQuery进行数据解析。

我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法。

上例中得到的JSON数据如下,是一个嵌套JSON:

{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]}

获取JSON数据,在jQuery中有一个简单的方法 $.getJSON() 可以实现。

下面引用的是官方API对$.getJSON()的说明:

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )

url: A string containing the URL to which the request is sent.

data: A map or string that is sent to the server with the request.

success: (data, textStatus, jqXHR)A callback function that is executed if the request succeeds.

回调函数中接受三个参数,第一个是返回的数据,第二个是状态,第三个是jQuery的XMLHttpRequest,我们只使用到第一个参数。

$.each()是用来在回调函数中解析JSON数据的方法,下面是官方文档:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collection: The object or array to iterate over.

callback(indexInArray, valueOfElement): The function that will be executed on every object.

$.each()方法接受两个参数,第一个是需要遍历的对象集合(JSON对象集合),第二个是用来遍历的方法,这个方法又接受两个参数,第一个是遍历的index,第二个是当前遍历的值。哈哈,有了$.each()方法JSON的解析就迎刃而解咯。(*^__^*) 嘻嘻……

function loadInfo() {    $.getJSON("loadInfo", function(data) {        $("#info").html("");//清空info内容        $.each(data.comments, function(i, item) {            $("#info").append(                    "<div>" + item.id + "</div>" +                     "<div>" + item.nickname    + "</div>" +                    "<div>" + item.content + "</div><hr/>");        });        });}

正如上面,loadinfo是请求的地址,function(data){...}就是在请求成功后的回调函数,data封装了返回的JSON对象,在下面的$.each(data.comments,function(i,item){...})方法中data.comments直接到达JSON数据内包含的JSON数组:

[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]

$.each()方法中的function就是对这个数组进行遍历,再通过操作DOM插入到合适的地方的。在遍历的过程中,我们可以很方便的访问当前遍历index(代码中的”i“)和当前遍历的值(代码中的”item“)。

上例的运行结果如下:

如果返回的JSON数据比较复杂,则只需多些$.each()进行遍历即可,嘿嘿。例如如下JSON数据:

{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}],"content":"你是木头人,哈哈。","infomap":{"性别":"男","职业":"程序员","博客":"http:\/\/www.cnblogs.com\/codeplus\/"},"title":"123木头人"}

js如下:

function loadInfo() {    $.getJSON("loadInfo", function(data) {        $("#title").append(data.title+"<hr/>");        $("#content").append(data.content+"<hr/>");        //jquery解析map数据        $.each(data.infomap,function(key,value){            $("#mapinfo").append(key+"----"+value+"<br/><hr/>");        });        //解析数组   -----------------------------------------这里的就是我上面用到的        $.each(data.comments, function(i, item) {            $("#info").append(                    "<div>" + item.id + "</div>" +                     "<div>" + item.nickname    + "</div>" +                    "<div>" + item.content + "</div><hr/>");        });    });}

值得注意的是,$.each()遍历Map的时候,function()中的参数是key和value,十分方便。

上例的运行效果:

jQuery很强大,so...更多的了解还得参考文档,(ˇ?ˇ) 想~

数组和function  都是对象,现在熟悉JS基础Array对象,有兴趣的同学一起来复习下吧。

array.pop : 删除数组内的最后一个对象

array.shift :删除数组内的第一个对象

array.join: 数组内元素弄成字符串插入页面

array.reverse : 数组内元素倒置

array.concat : 数组合并,但是谁与谁合并,要注意顺序

array.toString : 数组直接转为字符串,不再是对象了

array.valueOf : 显示原始的值,里面有什么东西

array.sort : 以ascii代码来排列先后顺序,但是数字不能用sort去排列。要排序请往下看,有例子哦。

array.push : 数组末端添加新对象,返回显示是数组长度

array.slice :删除数组内对象 slice( start , end)

array.splice : 删除添加对象

array.unshift : 前面插入对象,返回显示是数组长度

array.indexOf: 检查对象是否存在

下面来显示一些例子,让我们能够更明白是如何用的,计算机又是如何操作的。

var bb = [‘qq‘,‘aa‘,‘ss‘,‘ee‘];

var ooo = [‘Nov‘,‘August‘];

alert(bb.indexOf(‘qq‘));// 返回0,因为qq是数组内的一个对象,位置是0

alert(bb.pop());//返回ee

alert(bb.shift());//返回qq

alert(bb.join( and ));//返回qq and aa and ss and ee

alert(bb.toString());// 返回qq,aa,ss,ee

alert(bb.valueOf());//返回qq,aa,ss,ee

alert(bb.sort());//返回aa,ee,qq,ss

alert(bb.push("Lemon","Pineapple"));//返回6,因为数组已有六个对象,分别是:qq,aa,ss,ee,Lemon,Pineapple

alert(bb.slice(0,2));//返回qq,aa

alert(bb.splice(1,3,‘lemon‘));//返回aa,ss,ee,从aa起删除,除去长度为:三个

alert(bb.unshift(‘sunny‘));//返回5,因为数组增加了一个对象,便由4变成了5

alert(bb.concat(ooo));//返回qq,aa,ss,ee

alert(bb.reverse());//返回ee,ss,aa,qq,Nov,August

其实只要多练练就知道这些是怎么使用的了,多练习是灵活使用的前提。

数字排序,使用sort()方法,例子如下:

var foo = [1,12,15,54,56,89,123,78];

function num(a,b) {

return a - b;

}

alert(foo.sort(num));// 返回1,12,15,54,56,78,89,123

现在就试试吧!

jQuery 遍历 - eq() 方法

通过为 index 为 2 的 div 添加适当的类,将其变为蓝色:

$("body").find("div").eq(2).addClass("blue");

jQuery :eq() 选择器

定义和用法

:eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。

经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素(如上面的例子)。

语法

$(":eq(index)")

选择第二个 <p> 元素:

$("p:eq(1)")
时间: 2024-10-10 06:44:21

JQuery之操作array的相关文章

javascript jquery数组操作小结

----------------------------------------------------------定义数组---------------------------------------------------------- $(function(){ var aArray = {};//定义一个数组 aArray['name'] = "张三"; aArray['sex'] = "男"; aArray['mail'] = "[email p

如何在js或者jquery中操作EL表达式的一个List集合

------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型或者内存地址 首先说明,从el表达式拿到的复杂类型,包括内存地址,js是无法直接进行操作的,所以得转换为简单类型,不是直接拿内存地址操作 eval也操作不了内存地址 我先说明思路:就是先用jstl转换为为简单类型,然后对简单类型做操作,示例不写的复杂,看一下就好: /*最牛的判断方式!!!!!!!*

jQuery HTML 操作

jQuery 包含很多供改变和操作 HTML 的强大函数. 改变 HTML 内容 语法 $(selector).html(content) html() 函数改变所匹配的 HTML 元素的内容(innerHTML). 实例 $("p").html("W3C HTML"); 查看示例 添加 HTML 内容 语法 $(selector).append(content) append() 函数向所匹配的 HTML 元素内部追加内容. 语法 $(selector).prep

Jquery CSS 操作 - height() 方法

一.height() 方法 height() 方法返回或设置匹配元素的高度 $(".btn1").click(function(){ $("p").height(50); }); height方法事例 Jquery CSS 操作 - height() 方法,码迷,mamicode.com

jQuery 属性操作

方法 描述 addClass() 向匹配的元素添加指定的类名. attr() 设置或返回匹配元素的属性和值. hasClass() 检查匹配的元素是否拥有指定的类. html() 设置或返回匹配的元素集合中的 HTML 内容. removeAttr() 从所有匹配的元素中移除指定的属性. removeClass() 从所有匹配的元素中删除全部或者指定的类. toggleClass() 从匹配的元素中添加或删除一个类. val() 设置或返回匹配元素的值. 获得内容 - text().html()

深入学习jQuery节点操作

× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的方法,此外,还扩展了包裹节点.本文将详细介绍jQuery节点操作 创建节点 创建节点的流程比较简单,包括创建节点.添加属性和添加文本.若应用原生方法,一般地,包括document.createElement().setAttribute()和innerHTML var ele = document.

jQuery的操作

jQuery可以操作的样式可以分成两种css和class两种样式.css又可以分成三种:1:设置单个样式. 2:设置多个样式. 3:获取样式. class可以分成用法: 1:添加class样式. 2:移除class样式. 3:判断class样式. 4:切换class样式. jQuery操作也可以做动画,比较常用的有以下几种: 1:slideDown slideUp slideToggle slideDown(speed,callback) slideDown slideUp是滑入和滑出的意思,效

jQuery Ajax 操作函数

jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个 Ajax 事件. .ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序.这是一个 Ajax 事件. .ajaxSend() 在 Ajax 请求发送之前显示

Jquery DOM 操作列表

jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性.