综合案例：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.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喔！