一些JQuery使用技巧

最近做项目，在使用JQuery中遇到一些问题记录下。

 

1.根据Id查询父级内容，或者父级的父级

之前会使用$("#id").parent().parent()；

这种使用有很大的弊端，现在可使用closest 函数，在需要查询的父级定义一个class，

例如：$("#id").closest(".class");

 

2.设置CheckBox 的勾选/取消勾选问题

一般使用$("[name=items]:checkbox").attr("checked", true); 

但是第一次执行，没问题，但第二次执行就有问题了，选择不了

解决办法：把attr()换成prop()

例如：$("[name=items]:checkbox").prop("checked", true);

参考：http://www.cnblogs.com/KeenLeung/p/3799895.html

 

3.使用trigger触发事件

例如：$("#id").trigger("click");

 

4.判断是否是移动端

if('ontouchstart' in document){

　　//todo

}

====2017.7.20 补充======

上面判断是否移动端的有个bug.

更新为下面这个函数

//判断是否是PC
function IsPC(){    
    var userAgentInfo = navigator.userAgent;  
    var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod","BlackBerry");    
    var flag = true;    
    for (var v = 0; v < Agents.length; v++) {    
        if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }    
     }    
    return flag;    
}

 

 

5.table 固定表头

表头不能换行，内容可以换行。

给table添加样式 table-layout:fixed

 

6.表单提交特殊字符处理，预防XXS漏洞

http://www.cnblogs.com/bigbrid/p/6909716.html

 

7.AJAX跨域提交表单

http://www.cnblogs.com/bigbrid/p/6542648.html

 

8.页面中经常用到弹窗，关闭窗口之类。有个方法获取当前窗口和当前窗口索引

var topformwindow=window;
var currentIndex=0;
var currentPageIndex=0;

function getFormWindow()
{
    var  formWindow=window;
    var  lastWindow=formWindow;
    try{
        for(i=0;i<10;i++){
            if(formWindow.tempCode!=undefined && formWindow.tempCode!="")
            {
               lastWindow=formWindow;
               
               if(formWindow.parent==null){
                   currentPageIndex=lastWindow.currentIndex;
                    return lastWindow;   
               }
               formWindow=formWindow.parent;
            }else{
                currentPageIndex=lastWindow.currentIndex;
               return lastWindow;
           }
        }
        currentPageIndex=lastWindow.currentIndex;
        return lastWindow;
    }
    catch(ex){
        currentPageIndex=lastWindow.currentIndex;
        return lastWindow;    
    }
}

 

9.手机端使用的弹层组件

之前在PC端弹层组件用的artDialog ,现在发现没有移动端，

经调研发现layer不错，现在移动端的弹窗组件就用它了。 

 

 10.Table 兼容手机端样式

https://css-tricks.com/examples/ResponsiveTables/responsive.php

 

11.IE9以下版本，Ajax的error提示no transport的问题

jQuery.support.cors = true;

$.ajax({
  crossDomain: true,
  url: "",
  type: "POST",
  dataType: "xml",
  data: soapMessage,
});

添加完上面设置发现IE9还是报错，最后发现是IE浏览器的安全性设置问题，

解决方法如下：点击IE浏览器的的“工具->Internet 选项->安全->自定义级别”将“其他”选项中的“通过域访问数据源”选中为“启用”或者“提示”，点击确定就可以了。

 

12.IE下Ajax 请求有缓存

解决方法：

1.在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数
在javascript发送的URL后加上t=Math.random()

例如这样:URL+"&"+"t="+Math.random();或者new Date();
在 URL 参数后加上 "?timestamp=" + new Date().getTime();

2.最好的方法：
$.ajaxSetup({cache:false})

这样页面中所有的ajax请求时，都执行这个。就不必改已经完成的N个接口

 

13.数据的一些基本格式校验

http://www.cnblogs.com/bigbrid/p/7846367.html

 

 

持续更新...