综合案例：jquery实现到达网点查询

已经有3个月没来自己的博客了，真是累成狗啊（这么说会不会显得太屌丝了？）虽说不是女神，但也是软妹子一枚啊。不同意的已拖一边打死打残···

介绍一下最近做的一个综合功能吧。


其实，这个界面是早就存在的，由于公司用的是EXT写的，所以营业部开单的时候经常出现卡慢的现象，原因就是EXT的加载太消耗时间了。所以，我就不得不用jquery-min.js来替换了，说是替换，不如说是重做。555555555555。

下面，我就挑重点难点的讲，一些细枝末节的我就不提了。

1、ajax请求向后台传递数组类型的数据。通常是复选框里有多个值作为请求参数的情况。（如图中的匹配类型：自提、派送）

$.ajax({
type: 'POST',
**traditional: true,//一个参数有多个值**
url: urlStr,
//async:false,//这里选择异步为false，那么这个程序执行到这里的时候会暂停，等待
data: paramData, //请求参数
success: fun, //成功回调函数
dataType: "json"
});

2、部门列表，动态添加tr

//显示部门列表
function  showDeptList(depts){
var content ="" ;
for(var i =0;i<depts.length;i++){
var classType ="<tr class=";
if(depts[i].isDelivery||depts[i].isExpressDelivery){
//该行的颜色应为黄色
classType +="yebg"+"  " + "id="+i+" >" ;
}else{
//该行的颜色应为绿色（不派送）
classType +="blbg" +"  " + "id="+i+">" ;
}
var simpleName ="<td>"+depts[i].simpleName +"</td>";
var deptName = "<td>"+depts[i].deptName+"</td></tr>"
content +=classType+simpleName +deptName ;
}
**$('#tb_1').append(content);**
$("tr").bind("click",function(){
var id =$(this).attr('id')
//点击  即会改变部门信息列表和部门派送范围，以及地图导航
showOneStation(depts[id]);
});
}

当重新查询的时候，需要清空部门列表。

//删除除第一行外的所有行
$("#tb_1 tr:not(:first)").remove();

3、参考位置的显示:
业务要求，根据开单输入的地址，查询附近的兴趣点。功能很简单，但回调函数大有讲究，点击回调后会以该位置重新做一次导航。

//兴趣点检索方法
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "r-result"}
});
local.search("上海市青浦区明珠路1018号");

//本地封装的搜索POI方法，fun1，fun2均是回调函数。        //center,keyword 是省市区及详细地址关键字
poiSearchFeature.searchPOI(center,keyword,fun1,fun2);

4、地图上的展示：
网点显示、范围显示、导航显示、这些与调用百度API相关联，具体的显示demo。

我们可以后面再分享。今天我来总结一下jquery的基本用法吧。初学者可以看看，因为我之前用jquery也用的不多呢。切莫取笑。

总结：

1、  jquery定位某一元素：

根据class样式定位：$(‘.className’)

根据ID定位：$(‘#ID’)

2、 jquery对属性的一般操作

$(selector).attr(attribute) 返回被选元素的属性值

$(selector).attr(attribute,value)设置被选元素的属性和值

3、jquery遍历

parent() 方法返回被选元素的直接父元素。

children() 方法返回被选元素的所有直接子元素

(“input[name=delivery]:checked”).each(function()XXX）；//循环同一类复选框选中的元素//遍json(“input[name=delivery]:checked”).each(function(){ XXX}）；//循环同一类复选框选中的元素
//遍json
.each(json,function(index,item){ }）；

4、jquery AJAX请求
普通的用一下这个足够了，但有的情况是**跨域访问**，这种可以使用**jquey的jsonp**请求。以后细讲吧。

$.ajax({
type: 'POST',//可以选post 和get
traditional: true,//一个参数可有多个值
url: urlStr,   //url
//async:false,//这里选择异步为false，那么这个程序执行到这里的时候会暂停，等待
data: paramData, //请求参数
success: fun, //成功回调函数
dataType: "json"//可选，json、xml、
});

很基础的东西，但是要用了才能真正get喔！