jquery each解析数组:
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为:one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其实arr1为一个二维数组,item相当于取每一个一维数组,
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为:1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//这个each就有更厉害了,能循环每一个属性
//输出结果为:1 2 3 4
$(function() {
function objInit(obj) {//下拉列表框初始化
return $(obj).html("<option>请选择</option>");
}
var arrData = { //定义一个数组保存相关数据
厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },
厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2" },
厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2" }
};
$.each(arrData, function(pF) { //遍历数据增加厂商项
$("#selF").append("<option>" + pF + "</option>");
});//厂商1 厂商2 厂商3
$("#selF").change(function() { //厂商列表框选项改变事件
objInit("#selT");
objInit("#selC");
$.each(arrData, function(pF, pS) {
if ($("#selF option:selected").text() == pF) { //如果厂商选中项与数据匹配
$.each(pS, function(pT, pC) { //遍历数据增加品牌项
$("#selT").append("<option>" + pT + "</option>");
});
$("#selT").change(function() { //品牌列表框选项改变事件
objInit("#selC");
$.each(pS, function(pT, pC) {
if ($("#selT option:selected").text() == pT) { //如果品牌选中项与数据匹配
$.each(pC.split(","), function() { //遍历数据增加型号项
$("#selC").append("<option>" + this + "</option>");
});
}
});
});
}
});
});
$("#Button1").click(function() { //注册按钮单击事件
var strValue = "您选择的厂商:";
strValue += $("#selF option:selected").text();
strValue += " 您选择的品牌:";
strValue += $("#selT option:selected").text();
strValue += " 您选择的型号:";
strValue += $("#selC option:selected").text();
$("#divTip")
.show()
.addClass("clsTip")
.html(strValue); //显示提示信息并增加样式
});
})
jquery each解析json
json:
var data=[
{
"name": "陶国荣",
"sex": "男",
"email": "tao_guo_rong@163.com"
},
{
"name": "李建洲",
"sex": "女",
"email": "xiaoli@163.com"
}
]
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件,并通过回调函数处理获取的数据
$.getJSON("UserInfo.json", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$.each(data, function(InfoIndex, Info) { //遍历获取的数据
strHTML += "姓名:" + Info["name"] + "<br>";
strHTML += "性别:" + Info["sex"] + "<br>";
strHTML += "邮箱:" + Info["email"] + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据
})
})
})
jquery each解析xml
<?xml version="1.0" encoding="utf-8" ?>
<Info>
<User id="1">
<name>陶国荣</name>
<sex>男</sex>
<email>tao_guo_rong@163.com</email>
</User>
<User id="2">
<name>李建洲</name>
<sex>女</sex>
<email>xiaoli@163.com</email>
</User>
</Info>
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件,并通过回调函数处理获取的数据
$.get("UserInfo.xml", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$(data).find("User").each(function() { //遍历获取的数据
var $strUser = $(this);
strHTML += "姓名:" + $strUser.find("name").text() + "<br>";
strHTML += "性别:" + $strUser.find("sex").text() + "<br>";
strHTML += "邮箱:" + $strUser.find("email").text() + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据
})
})
})
相关推荐
**jQuery、Ajax与JSON全解析** 在Web开发中,jQuery、Ajax和JSON是不可或缺的工具,它们共同构建了现代网页的动态交互体验。本解析将深入探讨这三个概念及其相互关系。 **jQuery:简化JavaScript操作** jQuery是...
本文将详细讲解如何使用jQuery解析JSON和XML数据,通过给出的文件名称,我们可以推测这是一个关于Web应用中添加账户和应用的场景。 首先,让我们来看看JSON(JavaScript Object Notation)和XML(eXtensible Markup...
在本篇文章中,我们将探讨三种使用jQuery遍历JSON数组的方法。 **方法一:使用`.each()`遍历** `.each()`是jQuery的核心函数之一,它可以用于遍历数组或对象。在第一种方法中,我们创建了一个简单的JSON对象`obj`...
本篇文章将深入探讨如何使用jQuery来读取XML和JSON数据,这两种数据格式在Web开发中广泛用于数据交换。 XML(Extensible Markup Language)是一种标记语言,用于存储和传输结构化数据。JSON(JavaScript Object ...
本文将详细介绍如何使用JQuery这个流行的JavaScript库来解析HTML、JSON和XML格式的数据。JQuery提供了丰富的API,可以极大地简化数据解析的过程。 首先,让我们来了解JQuery解析HTML的能力。JQuery可以很轻松地加载...
例如,可以使用`.each()`遍历JSON数组,或者通过点号`.`或方括号`[]`访问JSON对象的属性: ```javascript $.each(json.array, function(index, item) { console.log(item.property); }); var value = json.object...
本篇文章将详细介绍如何使用jQuery解析从服务器返回的XML和JSON数据。 首先,让我们来看一下jQuery如何解析XML数据。在jQuery中,`$.ajax()`函数是用于发起Ajax请求的主要工具。当`dataType`参数设置为`"xml"`时,...
此标题直截了当,明确指出将通过jQuery的Ajax技术来获取并解析JSON文件中的数据。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。而JSON(JavaScript ...
本主题将深入探讨如何使用jQuery解析JSON数据并实现级联菜单,这在构建动态和交互性强的用户界面时非常常见。级联菜单通常用于导航,其中下拉选项根据上一个选项的选择而变化,提供更具体的子类别。 首先,让我们...
在这个函数中,首先清空表格内容,然后使用jQuery的$.each()方法遍历返回的JSON数据。$.each()是一个强大的迭代器,它允许遍历数组或对象。对于数组中的每个元素,会创建一个新的HTML表格行(),并将相关数据填充到...
本篇文章将详细探讨如何使用jQuery解析和操作JSON格式的数据。 首先,JSON是一种数据交换格式,它基于JavaScript的一个子集。数据格式清晰,易于人阅读和编写,同时也易于机器解析和生成。JSON格式通常由键值对组成...
标题中的“轻松使用jQuery解析XML”意味着我们将探讨如何利用JavaScript库jQuery处理XML文档,以便在Web应用程序中方便地获取和操作数据。XML(可扩展标记语言)是一种结构化数据格式,常用于存储和传输数据。jQuery...
### jQuery与JSON及AJAX的结合应用 #### 一、引言 随着Web技术的发展,前端框架和库的出现极大地简化了开发流程。其中,jQuery因其简洁易用的特点,在前端开发领域占据了重要的地位。本文将详细介绍如何利用jQuery...
### jQuery + Ajax + JSON 级联:深入解析与应用 在现代Web开发中,级联选择器(Cascade Selectors)是一种常见的用户界面设计模式,主要用于处理多层级的数据选择,如国家-省份-城市的选择。本文将深入探讨如何...
### jQuery+AJAX+JSON 新手总结 #### 一、jQuery 概述 **1.1 什么是 jQuery?** jQuery 是一个高效的 JavaScript 库,它简化了许多 Web 开发任务,如文档遍历、事件处理、动画以及 AJAX 交互。jQuery 的核心原则是...
以上就是关于"json数据jquery异步示例"的相关知识点,涵盖了JSON数据的创建、传输、解析以及jQuery中的异步操作和事件处理。在实际应用中,还需要考虑性能优化、安全性等问题,确保数据交互的高效和安全。
### 基于jQuery的AJAX与JSON技术详解 #### 一、引言 随着Web技术的发展,用户体验的要求越来越高,而传统的网页加载方式已经不能满足快速响应的需求。为了解决这一问题,AJAX(Asynchronous JavaScript and XML)...
3. **JSON**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript的一个子集,常用于前后端数据传输。 接下来,我们将详细解释这个...