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小時內與您取得聯系。

整合營銷服務商