整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
時(shí)候我們可能需要用到j(luò)son文件存儲(chǔ)數(shù)據(jù)，然后通過(guò)前臺(tái)語(yǔ)言直接進(jìn)行訪問(wèn)。
首先是json文件：
{
"管道": [
{
"ElementId": "標(biāo)識(shí)號(hào)",
"GISID": "GISID",
"Label": "編號(hào)",
"StartNodeID":"起始節(jié)點(diǎn)ID",
"EndNodeID":"終止節(jié)點(diǎn)ID",
"StartNodeLabel":"起始節(jié)點(diǎn)編號(hào)",
"EndNodeLabel":"終止節(jié)點(diǎn)編號(hào)",
"Physical_PipeDiameter":"管徑",
"Physical_PipeMaterialID":"管材",
"Physical_HazenWilliamsC":"海曾威廉C值",
"Physical_Length":"管長(zhǎng)",
"Physical_MinorLossCoefficient":"局部阻力系數(shù)",
"Physical_InstallationYear":"鋪設(shè)年代",
"Physical_Address":"地址",
"District":"營(yíng)銷(xiāo)公司",
"DMA":"計(jì)量區(qū)",
"Zone":"行政區(qū)",
"flow":"當(dāng)前流量",
"velocity":"當(dāng)前流速",
"headloss":"當(dāng)前水頭損失"
}],
"節(jié)點(diǎn)": [{
"ElementId": "標(biāo)識(shí)號(hào)",
"GISID": "GISID",
"Label": "編號(hào)",
"Physical_Elevation":"地面高程",
"Physical_Depth":"埋深",
"Physical_Address":"地址",
"District":"營(yíng)銷(xiāo)公司",
"DMA":"計(jì)量區(qū)",
"Zone":"行政區(qū)",
"hydraulicGrade":"水壓標(biāo)高",
"pressure":"自由水壓",
"demand":"節(jié)點(diǎn)流量",
"cl":"余氯濃度",
"age":"水齡",
"source":"供水水源"
}],
"閥門(mén)": [{
"ElementId": "標(biāo)識(shí)號(hào)",
"GISID": "GISID",
"Label": "編號(hào)",
"Physical_Elevation":"地面高程",
"Physical_Depth":"埋深",
"Physical_Diameter":"口徑",
"Physical_Status":"閥門(mén)狀態(tài)",
"Physical_Address":"地址",
"District":"營(yíng)銷(xiāo)公司",
"DMA":"計(jì)量區(qū)",
"Zone":"行政區(qū)",
"Physical_InstallationYear":"安裝年代"
}],
"水表": [{
"DIAMETER":"口徑",
"CALIBER": "表徑",
"MATERIAL": "材質(zhì)",
"DEPTH":"埋深",
"HEIGHT":"地面高程",
"ADDR":"地址",
"WATREGID": "表號(hào)",
"USERNAME":"用戶(hù)名",
"JUNCTION":"接口類(lèi)型",
"DISTRICT":"行政區(qū)",
"MEASUREIN":"營(yíng)銷(xiāo)公司",
"FINISHDATE":"安裝日期"
}],
"消火栓": [{
"ElementId": "標(biāo)識(shí)號(hào)",
"GISID": "GISID",
"Label": "編號(hào)",
"Physical_Elevation":"地面高程",
"Physical_Depth":"埋深",
"Physical_Address":"地址",
"District":"營(yíng)銷(xiāo)公司",
"DMA":"計(jì)量區(qū)",
"Zone":"行政區(qū)",
"Physical_Diameter":"口徑",
"Physical_Type":"樣式"
}]
}
創(chuàng)建CriteriaQuery.json文件，文件內(nèi)容如上。
前臺(tái)代碼：
<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="獲取數(shù)據(jù)" id="btn"/>
</div>
<div id="jsonTip">
</div>
</div>
</body>
</html>
我這里的jquery用的是微軟發(fā)布的1.4的js文件，即 http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js
json文件與html放在同一個(gè)目錄下。
運(yùn)行代碼，點(diǎn)擊獲取數(shù)據(jù)按鈕，就能夠在頁(yè)面上看到遍歷json文件所得到的“管道”的所有信息。當(dāng)然，也可以通過(guò)key來(lái)獲取到j(luò)son文件的value，即
strHtml +=info["ElementId"];
事件函數(shù)列表：
blur() 元素失去焦點(diǎn) focus() 元素獲得焦點(diǎn) click() 鼠標(biāo)單擊 mouseover() 鼠標(biāo)進(jìn)入（進(jìn)入子元素也觸發(fā)） mouseout() 鼠標(biāo)離開(kāi)（離開(kāi)子元素也觸發(fā)） mouseenter() 鼠標(biāo)進(jìn)入（進(jìn)入子元素不觸發(fā)） mouseleave() 鼠標(biāo)離開(kāi)（離開(kāi)子元素不觸發(fā)） hover() 同時(shí)為mouseenter和mouseleave事件指定處理函數(shù) ready() DOM加載完成 resize() 瀏覽器窗口的大小發(fā)生改變 scroll() 滾動(dòng)條的位置發(fā)生變化 submit() 用戶(hù)遞交表單
綁定事件的其他方式
$(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事件，可以用如下方法：
$('#btn1').click(function(){
// 內(nèi)部的this指的是原生對(duì)象
// 使用jquery對(duì)象用 $(this)
})
獲取元素的索引值
有時(shí)候需要獲得匹配元素相對(duì)于其同胞元素的索引位置，此時(shí)可以用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>
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 切換元素的可見(jiàn)狀態(tài)
slideDown() 向下展開(kāi)
slideUp() 向上卷起
slideToggle() 依次展開(kāi)或卷起某個(gè)元素
jquery對(duì)象的方法會(huì)在執(zhí)行完后返回這個(gè)jquery對(duì)象，所有jquery對(duì)象的方法可以連起來(lái)寫(xiě)：
$('#div1') // id為div1的元素
.children('ul') //該元素下面的ul子元素
.slideDown('fast') //高度從零變到實(shí)際高度來(lái)顯示ul元素
.parent() //跳到ul的父元素，也就是id為div1的元素
.siblings() //跳到div1元素平級(jí)的所有兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast'); //高度實(shí)際高度變換到零來(lái)隱藏ul元素
通過(guò)animate方法可以設(shè)置元素某屬性值上的動(dòng)畫(huà)，可以設(shè)置一個(gè)或多個(gè)屬性值，動(dòng)畫(huà)執(zhí)行完成后會(huì)執(zhí)行一個(gè)函數(shù)。
$('#div1').animate({
width:300,
height:300
},1000,'swing',function(){
alert('done!');
});
參數(shù)可以寫(xiě)成數(shù)字表達(dá)式：
$('#div1').animate({
width:'+=100',
height:300
},1000,'swing',function(){
alert('done!');
});
尺寸相關(guān)、滾動(dòng)事件
1、獲取和設(shè)置元素的尺寸
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、獲取元素相對(duì)頁(yè)面的絕對(duì)位置
offset()
3、獲取瀏覽器可視區(qū)寬度高度
$(window).width(); $(window).height();
4、獲取頁(yè)面文檔的寬度高度
$(document).width(); $(document).height();
5、獲取頁(yè)面滾動(dòng)距離
$(document).scrollTop(); $(document).scrollLeft();
6、頁(yè)面滾動(dòng)事件
$(window).scroll(function(){
......
})
1、html() 取出或設(shè)置html內(nèi)容
// 取出html內(nèi)容
var $htm=$('#div1').html();
// 設(shè)置html內(nèi)容
$('#div1').html('<span>添加文字</span>');
2、prop() 取出或設(shè)置某個(gè)屬性的值
// 取出圖片的地址
var $src=$('#img1').prop('src');
// 設(shè)置圖片的地址和alt屬性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });
jquery循環(huán)
對(duì)jquery選擇的對(duì)象集合分別進(jìn)行操作，需要用到j(luò)query循環(huán)操作，此時(shí)可以用對(duì)象上的each方法：
果您是JavaScript開(kāi)發(fā)人員，您可能知道jQuery。但是你知道怎么用它來(lái)創(chuàng)建你自己的插件嗎？請(qǐng)繼續(xù)閱讀！
對(duì)于那些不知道的人來(lái)說(shuō)，jQuery是一個(gè)包含許多功能的JavaScript庫(kù)，并且非常小而且速度快。它還包含一個(gè)易于使用的API，可以在所有瀏覽器上兼容，并且可以更輕松地進(jìn)行HTML遍歷，動(dòng)畫(huà)，DOM操作和事件處理。它不僅可擴(kuò)展而且耐用。因此，自開(kāi)發(fā)以來(lái)，客戶(hù)端腳本編寫(xiě)變得更加容易。
jQuery由原型對(duì)象組成，在某些時(shí)候，可能需要一些操作和擴(kuò)展。出于同樣的目的，jQuery插件被設(shè)計(jì)為對(duì)象繼承添加的任何其他方法的一種方式。不僅如此，這些附加方法不是孤立的，而是在創(chuàng)建jQuery對(duì)象時(shí)使用其余方法（已經(jīng)繼承）調(diào)用。jQuery插件可以以jQuery庫(kù)中存在的各個(gè)方法的形式單獨(dú)提供。每個(gè)方法都是一個(gè)插件。但是，如果有新的東西，插件也可以自定義創(chuàng)建，這不是一項(xiàng)非常困難的任務(wù)。
要了解jQuery的工作原理，您需要按照以下步驟操作：
$.fn.pluginName=function() {
this.css( "color", "yellow" );
};
$( "a" ).pluginName();
該插件開(kāi)始其身份創(chuàng)建，如上所示。pluginName 由正在創(chuàng)建的插件的名稱(chēng)替換，后跟一個(gè)函數(shù)和括號(hào)中的任何必需參數(shù)。此外，function（this.css）中的下一個(gè)語(yǔ)句 是確保將CSS應(yīng)用于某些文本以使其呈黃色。最后一行調(diào)用插件函數(shù)將所有鏈接變?yōu)? a'標(biāo)記為黃色。
jQuery插件總是在假設(shè)using $ 使用jQuery函數(shù)的別名的情況下編寫(xiě) 。 $ 在JavaScript庫(kù)中非常有名。因此，當(dāng)需要多個(gè)jQuery庫(kù)時(shí)，使用時(shí)可能會(huì)出現(xiàn)沖突 $。因此，為了使我們能夠?qū)Query與其他插件一起使用$，我們必須將代碼放在立即調(diào)用的函數(shù)的表達(dá)式中。接下來(lái)是jQuery的傳遞，然后命名它的參數(shù) $。
在JavaScript中，函數(shù)包含幾個(gè)變量和其他函數(shù)，這些函數(shù)可以主要在函數(shù)內(nèi)部訪問(wèn)，從而使元素變?yōu)樗接小Ａ⒓凑{(diào)用函數(shù)efxpressions提供了訪問(wèn)私有變量和方法的最佳方法。
在$解決alias（）問(wèn)題后，可以在此處理解添加私有方法或變量：
(function($) {
$.fn.pluginName=function() {
// private variables
var privatevar1='';
var privatevar2='';
// private methods
var myPrivateMethod=function() {
// do something ...
}
})(jQuery);
只能通過(guò)立即調(diào)用函數(shù)添加私有變量并允許其使用：
(function($){
var col=“yellow”;$.fn.pluginName=function() {
this.css("color", col);
return this;
};
}(jQuery));
私有方法只能在函數(shù)范圍內(nèi)調(diào)用。只有其他私有方法或公共方法才有權(quán)調(diào)用這些私有方法。這也適用于訪問(wèn)私有變量。
向jQuery插件添加方法是在私有方法中完成的。唯一的區(qū)別是方法的執(zhí)行。當(dāng)方法提供' this'運(yùn)算符時(shí)，該方法變?yōu)楣卜椒ā＿@樣，它也可以在函數(shù)范圍之外訪問(wèn)。添加此類(lèi)公共方法的目的可以是在范圍外執(zhí)行函數(shù)，也可以從范圍外訪問(wèn)公共變量和方法。
(function($) {
$.fn.pluginName=function() {
// public methods
this.initialize=function() {
// do something ...
return this;
};
this.myPublicMethod=function() {
// do something ...
};
})(jQuery);
在您繼續(xù)添加插件時(shí)，有些情況下您的插件開(kāi)始變得復(fù)雜。因此，最好讓您的插件開(kāi)始接受一些選項(xiàng)并使其可自定義。
(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));
結(jié)合所有技術(shù)，編譯以下示例插件：
(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()'用于循環(huán)遍歷元素集合。此外，此方法的返回值是this.append() 方法，它接受回調(diào)，返回時(shí)我們將能夠看到集合中要追加的元素。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
