實際開發jquery方法彙集整理

一，通過ajax向後臺傳遞批量對象參數

前端：

var selectType = [];
var point = {
            tableName: 'T_CSBJXXB',
            type: bjbm,
            dataArea: dataAreaCode
        }

selectType.push(point);
//多個對象就向selectType 數組內推入多個point對象
$.ajax({
            type : "POST",
            dataType : 'json',
            url : "/PowerOfManagement/getpointByAreacode",
            //將批量對象selectType數組轉成字符串，後臺以string類型接收
            data : {'str':JSON.stringify(selectType),'pageSize':0,'pageNum':0},
            success : function(data) {
                if (data.success) {
                    
                }
            },
            error : function() {
                console.log("請求出錯,請聯繫管理員！");
            }
        });

後臺：

注意JSON對象屬於com.alibaba.fastjson 包

前段轉換的str的格式是 

"[{"tableName":"T_BMLLXXB","type":"0|1|2","dataArea":"320505"},{"tableName":"T_JKXXB","type":"0|1|2","dataArea":"320505"}]"

 @RequestMapping(value = "getpointByAreacode", method = RequestMethod.POST)
    public void getpointByAreacode(HttpServletRequest request, HttpServletResponse response, String str,int pageSize,int pageNum){
        Result result = new Result();
        try {
            // fastjson將字符串轉換成對象集合
            List<PointOfManagementPower> list =                                                         
                                  JSON.parseArray(selectType,PointOfManagementPower.class);
            result.setMessage("查詢成功");
            result.setSuccess(true);
            result.setList(list );
        }catch (Exception e){
            result.setSuccess(false);
            result.setMessage("獲取失敗！"+e);
        }

        this.print(result.toString(),response);
    }

二，jq查找語句

//area-code是頁面上一直有的，不要動態拼接的元素
//查找area-code下的 button標籤內的 role屬性以town開頭的 a標籤的value值
// find查找不只子類，孫子類，重孫子類等等向下都內查到
$("#area-code").find("button a[role^='town']").attr("value");




//向上一級一級查找到class爲btn-parent-div的父元素，然後再找內部checkbox的標籤集合，並遍歷
//checkbox在我這裏是動態拼接內的標籤，判斷選中不能用直接attr('check')判斷，要用is函數
//修改屬性要用prop方法
$(this).parent().parent().parent().parent().parent().parent(".btn-parent-div").find("input[type='checkbox']").each(function () {
                //這裏的this對象是遍歷的每一個input[type='checkbox']對象，而不是開頭的this對象
                if ($(this).is(":checked")) {
                    $(this).prop("checked", false);
                }
            })
//選中
 $(this).prop("checked", true);


$(this).parent().parent().parent().parent().parent().addClass("btn-primary");
                    $(this).parent().parent().parent().parent().parent().removeClass("btn-warning");

三 、jq中的事件

//鼠標滾輪滾動事件  據說兼容性很高
 $("#mapDiv").on("mousewheel DOMMouseScroll",function (e) {
        // console.log("666");
        //判斷滾動方向
        //chrome & ie || Firefox   區分瀏覽器
        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ?1 :-1)) 
            || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));//Firefox                                                                         

    
    if (delta > 0) {
        // 向上滾
        console.log("wheelup");
    } else if (delta < 0) {
        // 向下滾
        console.log("wheeldown");
    }
    });


//綁定點擊事件
//input[type='checkbox']是我動態拼接到內部的 .select-type-list-city-sec固定存在
$(".select-type-list-city-sec").on("click","input[type='checkbox']",function (e) { 
//這裏的this對象是點擊的input[type='checkbox']，而不是.select-type-list-city-sec
$(this).parent();
})


//點擊事件li a標籤也是動態拼接到area-code內部的
 $("#area-code").on("click","li a[role^='town']",function () {
//獲取a標籤的value屬性  this對象是a標籤
        var code = $(this).attr("value");
}）