jquery访问json文件中的数据

时候我们可能需要用到json文件存储数据，然后通过前台语言直接进行访问。

首先是json文件：

{
 "管道": [
 {
 "ElementId": "标识号",
 "GISID": "GISID",
 "Label": "编号",
 "StartNodeID":"起始节点ID",
 "EndNodeID":"终止节点ID",
 "StartNodeLabel":"起始节点编号",
 "EndNodeLabel":"终止节点编号",
 "Physical_PipeDiameter":"管径",
 "Physical_PipeMaterialID":"管材",
 "Physical_HazenWilliamsC":"海曾威廉C值",
 "Physical_Length":"管长",
 "Physical_MinorLossCoefficient":"局部阻力系数",
 "Physical_InstallationYear":"铺设年代",
 "Physical_Address":"地址",
 "District":"营销公司",
 "DMA":"计量区",
 "Zone":"行政区",
 "flow":"当前流量",
 "velocity":"当前流速",
 "headloss":"当前水头损失"
 }],
 "节点": [{
 "ElementId": "标识号",
 "GISID": "GISID",
 "Label": "编号",
 "Physical_Elevation":"地面高程",
 "Physical_Depth":"埋深",
 "Physical_Address":"地址",
 "District":"营销公司",
 "DMA":"计量区",
 "Zone":"行政区",
 "hydraulicGrade":"水压标高",
 "pressure":"自由水压",
 "demand":"节点流量",
 "cl":"余氯浓度",
 "age":"水龄",
 "source":"供水水源"
 }],
 "阀门": [{
 "ElementId": "标识号",
 "GISID": "GISID",
 "Label": "编号",
 "Physical_Elevation":"地面高程",
 "Physical_Depth":"埋深",
 "Physical_Diameter":"口径",
 "Physical_Status":"阀门状态",
 "Physical_Address":"地址",
 "District":"营销公司",
 "DMA":"计量区",
 "Zone":"行政区",
 "Physical_InstallationYear":"安装年代"
 }],
 "水表": [{
 "DIAMETER":"口径",
 "CALIBER": "表径",
 "MATERIAL": "材质",
 "DEPTH":"埋深",
 "HEIGHT":"地面高程",
 "ADDR":"地址",
 "WATREGID": "表号",
 "USERNAME":"用户名",
 "JUNCTION":"接口类型",
 "DISTRICT":"行政区",
 "MEASUREIN":"营销公司",
 "FINISHDATE":"安装日期"
 }],
 "消火栓": [{
 "ElementId": "标识号",
 "GISID": "GISID",
 "Label": "编号",
 "Physical_Elevation":"地面高程",
 "Physical_Depth":"埋深",
 "Physical_Address":"地址",
 "District":"营销公司",
 "DMA":"计量区",
 "Zone":"行政区",
 "Physical_Diameter":"口径",
 "Physical_Type":"样式"
 }]
}

创建CriteriaQuery.json文件，文件内容如上。

前台代码：

<html>
<head>
 <meta charset="GBK"/>
 <title></title>
 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
 <script type="text/javascript">
 $(function (){
 $("#btn").click(function(){
 $.getJSON("CriteriaQuery.json",function(data){
 var $jsontip=$("#jsonTip");
 var strHtml="";
 $jsontip.empty();
 $.each(data.管道,function(infoIndex,info){
 for(var o in info){
 
 strHtml +=info[o];
 }
 //strHtml +=info["ElementId"];
 });
 $jsontip.html(strHtml);
 })
 })
 })
 </script>
</head>
<body>
<div id="divframe">
 <div class="loadTitle">
 <input type="button" value="获取数据" id="btn"/>
 </div>
 <div id="jsonTip">
 </div>
</div>
</body>
</html>

我这里的jquery用的是微软发布的1.4的js文件，即 http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js

json文件与html放在同一个目录下。

运行代码，点击获取数据按钮，就能够在页面上看到遍历json文件所得到的“管道”的所有信息。当然，也可以通过key来获取到json文件的value，即

strHtml +=info["ElementId"];

query事件

事件函数列表：

blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单

绑定事件的其他方式

$(function(){
 $('#div1').bind('mouseover click', function(event) {
 alert($(this).html());
 });
});

取消绑定事件

$(function(){
 $('#div1').bind('mouseover click', function(event) {
 alert($(this).html());
 // $(this).unbind();
 $(this).unbind('mouseover');
 });
});

绑定click事件

给元素绑定click事件，可以用如下方法：

$('#btn1').click(function(){
 // 内部的this指的是原生对象
 // 使用jquery对象用 $(this)
})

获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

var $li=$('.list li').eq(1);
alert($li.index()); // 弹出1
......
<ul class="list">
 <li>1</li>
 <li>2</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

jquery特殊效果

fadeIn() 淡入
 $btn.click(function(){
 $('#div1').fadeIn(1000,'swing',function(){
 alert('done!');
 });
 });
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素

jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

$('#div1').animate({
 width:300,
 height:300
},1000,'swing',function(){
 alert('done!');
});

参数可以写成数字表达式：

$('#div1').animate({
 width:'+=100',
 height:300
},1000,'swing',function(){
 alert('done!');
});

尺寸相关、滚动事件

1、获取和设置元素的尺寸

width()、height() 获取元素width和height 
innerWidth()、innerHeight() 包括padding的width和height 
outerWidth()、outerHeight() 包括padding和border的width和height 
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置

offset()

3、获取浏览器可视区宽度高度

$(window).width();
$(window).height();

4、获取页面文档的宽度高度

$(document).width();
$(document).height();

5、获取页面滚动距离

$(document).scrollTop(); 
$(document).scrollLeft();

6、页面滚动事件

$(window).scroll(function(){ 
 ...... 
})

jquery属性操作

1、html() 取出或设置html内容

// 取出html内容
var $htm=$('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');

2、prop() 取出或设置某个属性的值

// 取出图片的地址
var $src=$('#img1').prop('src');
// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });

jquery循环

对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法：

果您是JavaScript开发人员，您可能知道jQuery。但是你知道怎么用它来创建你自己的插件吗？请继续阅读！

对于那些不知道的人来说，jQuery是一个包含许多功能的JavaScript库，并且非常小而且速度快。它还包含一个易于使用的API，可以在所有浏览器上兼容，并且可以更轻松地进行HTML遍历，动画，DOM操作和事件处理。它不仅可扩展而且耐用。因此，自开发以来，客户端脚本编写变得更加容易。

什么是jQuery插件？

jQuery由原型对象组成，在某些时候，可能需要一些操作和扩展。出于同样的目的，jQuery插件被设计为对象继承添加的任何其他方法的一种方式。不仅如此，这些附加方法不是孤立的，而是在创建jQuery对象时使用其余方法（已经继承）调用。jQuery插件可以以jQuery库中存在的各个方法的形式单独提供。每个方法都是一个插件。但是，如果有新的东西，插件也可以自定义创建，这不是一项非常困难的任务。

jQuery如何工作？

要了解jQuery的工作原理，您需要按照以下步骤操作：

使用所有基本标记创建一个HTML文档并调用jQuery.js文件。
开发人员提前考虑并将代码的可执行命令封装到 onload() 函数中，以确保在文档加载到浏览器后执行命令。
有时，由于图像加载的延迟，文档不会完整加载。为了确保在加载后准备好处理完整的文档，开发人员ready 在其代码中提供事件。
ready事件的完整脚本（封装在其中的函数）放在之前创建的HTML文档中。保存和运行文档将确保您的代码使用输出执行。
此函数可以包含执行特定任务的任何事件（子事件）或命令。

什么是基本插件签名？

$.fn.pluginName=function() {
this.css( "color", "yellow" );
};
$( "a" ).pluginName();

该插件开始其身份创建，如上所示。pluginName 由正在创建的插件的名称替换，后跟一个函数和括号中的任何必需参数。此外，function（this.css）中的下一个语句是确保将CSS应用于某些文本以使其呈黄色。最后一行调用插件函数将所有链接变为' a'标记为黄色。

保护$ Alias并添加范围

jQuery插件总是在假设using $ 使用jQuery函数的别名的情况下编写。 $ 在JavaScript库中非常有名。因此，当需要多个jQuery库时，使用时可能会出现冲突 $。因此，为了使我们能够将jQuery与其他插件一起使用$，我们必须将代码放在立即调用的函数的表达式中。接下来是jQuery的传递，然后命名它的参数 $。

添加私有方法和变量

在JavaScript中，函数包含几个变量和其他函数，这些函数可以主要在函数内部访问，从而使元素变为私有。立即调用函数efxpressions提供了访问私有变量和方法的最佳方法。

在$解决alias（）问题后，可以在此处理解添加私有方法或变量：

(function($) {
$.fn.pluginName=function() {
// private variables
var privatevar1='';
var privatevar2='';
// private methods
var myPrivateMethod=function() {
// do something ...
}
})(jQuery);

只能通过立即调用函数添加私有变量并允许其使用：

(function($){
var col=“yellow”;$.fn.pluginName=function() {
this.css("color", col);
return this;
};
}(jQuery));

私有方法只能在函数范围内调用。只有其他私有方法或公共方法才有权调用这些私有方法。这也适用于访问私有变量。

添加公共方法

向jQuery插件添加方法是在私有方法中完成的。唯一的区别是方法的执行。当方法提供' this'运算符时，该方法变为公共方法。这样，它也可以在函数范围之外访问。添加此类公共方法的目的可以是在范围外执行函数，也可以从范围外访问公共变量和方法。

(function($) {
$.fn.pluginName=function() {
// public methods
this.initialize=function() {
// do something ...
return this;
};
this.myPublicMethod=function() {
// do something ...
};
})(jQuery);

接受插件自定义选项

在您继续添加插件时，有些情况下您的插件开始变得复杂。因此，最好让您的插件开始接受一些选项并使其可自定义。

(function($) {
$.fn.pluginName=function(options) {
var defaults={
color: "white",
'background-color': "#556b2f"
};
var settings=$.extend({}, defaults, options);
return this.css({
color: settings.color,
'background-color': settings.background - color
});
};
}(jQuery));

把它放在一起

结合所有技术，编译以下示例插件：

(function($) {
$.fn.pluginName=function(options) {
var defaults={
color: "white",
'background-color': "#556b2f"
};
var settings=$.extend({}, defaults, options);
if (this.length > 1) {
this.each(function() { $(this).pluginName(options) });
return this;
}
// private variables
var privatevar1='';
var privatevar2='';
// private methods
var myPrivateMethod=function() {
// do something ...
}
// public methods
this.initialize=function() {
// do something ...
return this;
};
this.myPublicMethod=function() {
// do something ...
};
return this.initialize();
}
})(jQuery);

这里，方法' each()'用于循环遍历元素集合。此外，此方法的返回值是this.append() 方法，它接受回调，返回时我们将能够看到集合中要追加的元素。

在线咨询

上一篇：JavaScript还可以处理日期？你只需要这样做
下一篇：css实现多种展示的input框效果

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商