JavaScriptの all.js

模块功能描述说明(注释规范)：

/**
 * ------------------------------------------------------------------
 * 模块描述说明
 * ------------------------------------------------------------------
 */
模块内的小函数方法归类：
/**

小函数方法归类说明，这些零散的小函数方法放在一起 对应 一个业务方法逻辑


*/

单个函数方法:

/**

函数功能简述


具体描述一些细节


@param    {string}  address     地址
@param    {array}   com         商品数组
@param    {string}  pay_status  支付方式
@returns  void


@date     2014-04-12
@author   QETHANqinbinyang@zuijiao.net

*/

---

函数: 获得指定接口数据

/**



@param {Obj} option 
@param {String} option.url  接口 
@param {Obj} option.upData  提交的数据 
@param {Obj} option.callBack  回调函数,对接受的数据进行操作

*/

function getMenu(option){

var url = option.url,upData = option.upData,callBack = option.callBack;

$.ajax({

url: apiurl + url,type: 'POST',// cache : 是否从缓存中读取,true or false

cache: false,dataType: 'json',data: upData,success: function (resp) {

callBack(resp);

},error: function (jqXHR,textStatus,errorThrown) {

console.log()

}

});

}

JS 实现点击下载:

    function xz() {
     var yz = $.ajax({
         type: 'post',url: '/xz.aspx',data: { wz: a },cache: false,dataType: 'text',success: function (data) {
             if (data == '3') {
                 $("#xzts").html("登录后才可以下载！");
                 $("#err3").css("display","block");
                 $("#err3").addClass("dou2");
             }
             else if (data == '0') {
                 $("#err3").css("display","block");
                 $("#err3").addClass("dou2");
                 $("#xzts").html("余额不足,发布资源、回答他人提问、分享插件使用方法奖励jQ币，或者直接 充值!");
             }
             else{
                 $("#xzts").html(data);
                 window.location.href = "../"+data;
             }
         },error: function () { }
     });
 }

JS判断手指滑动方向


        var startx,starty;
        //获得角度
        function getAngle(angx,angy) {
            return Math.atan2(angy,angx) * 180 / Math.PI;
        };
    //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
    function getDirection(startx,starty,endx,endy) {
        var angx = endx - startx;
        var angy = endy - starty;
        var result = 0;

        //如果滑动距离太短
        if (Math.abs(angx) < 2 &amp;&amp; Math.abs(angy) < 2) {
            return result;
        }

        var angle = getAngle(angx,angy);
        if (angle >= -135 &amp;&amp; angle <= -45) {
            result = 1;
        } else if (angle > 45 &amp;&amp; angle < 135) {
            result = 2;
        } else if ((angle >= 135 &amp;&amp; angle <= 180) || (angle >= -180 &amp;&amp; angle < -135)) {
            result = 3;
        } else if (angle >= -45 &amp;&amp; angle <= 45) {
            result = 4;
        }

        return result;
    }
    //手指接触屏幕
    document.addEventListener("touchstart",function (e) {
        startx = e.touches[0].pageX;
        starty = e.touches[0].pageY;
    },false);
    //手指离开屏幕
    document.addEventListener("touchend",function (e) {
        var endx,endy;
        endx = e.changedTouches[0].pageX;
        endy = e.changedTouches[0].pageY;
        var direction = getDirection(startx,endy);
        switch (direction) {
            case 0:
                alert("未滑动！");
                break;
            case 1:
                alert("向上！")
                break;
            case 2:
                alert("向下！")
                break;
            case 3:
                alert("向左！")
                break;
            case 4:
                alert("向右！")
                break;
            default:
        }
    },false);

方法2

    !(function () {
        $(document).on('touchstart','body',function (e) {
            var touch = e.originalEvent,startX = touch.changedTouches[0].pageX;
            startY = touch.changedTouches[0].pageY;
            $(this).on('touchmove',function (e) {
                e.preventDefault();
                touch = e.originalEvent.touches[0] ||
                    e.originalEvent.changedTouches[0];
                if (touch.pageX - startX > 10) {
                    console.log("右划");
                    $(this).off('touchmove');
                } else if (touch.pageX - startX < -10) {
                    console.log("左划");
                    $(this).off('touchmove');
                };
                if (touch.pageY - startY > 10) {
                    console.log("下划");
                    $(this).off('touchmove');
                } else if (touch.pageY - startY < -10) {
                    console.log("上划");
                    // $(this).off('touchmove')必须加,否则抖动
                    $(this).off('touchmove');
                };
            });
        // Return false to prevent image
        // highlighting on Android
        return false;

    }).on('touchend',function () {
        $(this).off('touchmove');
    });
})();

jQ鼠标移入移出,判断方向,跟随特效

function change_imgBox() {
    var _$this = null;
    $(".content").on("mouseenter mouseleave",".photo_Box",function(event) {
        event.stopPropagation();
        var w = $(this).width();
        var h = $(this).height();
        var x = (event.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
        var y = (event.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
      // 确定方向: 上右下左 -> 0.1.2.3
        var dirNum = Math.round((((Math.atan2(y,x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
        var eventType = event.type;
        var aPos = [{
            left: 0,top: "-100%"
        },{
            left: "100%",top: 0
        },{
            left: 0,top: "100%"
        },{
            left: "-100%",top: 0
        }];
        if(eventType == 'mouseenter') {
            $(this).find(".hot_info").css(aPos[dirNum]).stop(true,true).animate({
                left: 0,top: 0
            },200);
        } else {
            _$this.find(".hot_info").stop(true,true).animate({
                top: "77%",left: 0
            },200);
        }
        // 确定上张(_$this)
        _$this = $(this);
    })
}

用原生js在DOM元素上面添加 方法:


if (window.HTMLElement) {
    // 使用原型扩展DOM自定义事件
HTMLElement.prototype.addEvent = function(type,fn,capture) {
    var el = this;
    if (window.addEventListener) {
        el.addEventListener(type,function(e) {
            fn.call(el,e);
        },capture);
    } else if (window.attachEvent) {
        el.attachEvent("on" + type,e);
        });
    } 
};

HTMLElement.prototype.removeEvent = function (ele,eve,fn) {
    if (ele.removeEventListener) {
        ele.removeEventListener(eve,fn);
    } else if (ele.detachEvent) {
        ele.detachEvent("on" + eve,fn);
    } else {
        ele["on" + eve] = null;
    }
}
} else {

// 如果是不支持HTMLElement扩展的浏览器

// 通过遍历所有元素扩展DOM事件
var elAll = document.all,lenAll = elAll.length;
for (var iAll=0; iAll<lenAll; iAll+=1) {
    elAll[iAll].addEvent = function(type,fn) {
        var el = this;
        el.attachEvent("on" + type,e);
        });
    };
}
}

检测浏览器插件 P211

            
        // 检测插件(在IE中无效):
        function hasPlugin(name){
            name = name.toLowerCase(); //toLowerCase() 方法用于把字符串转换为小写
            for(var i=0;i-1){ // >-1表示找到
                    return true
                }
            }
            return false;
        };
        // 检测Flash
        alert(hasPlugin("Flash"));
        // 检测QuickTime
        alert(hasPlugin("QuickTime"));
    // 检测IE的<a href="/tag/chajian/" target="_blank" class="keywords">插件</a>
    //  ========== 
    //  = IE以COM对象的方式实现<a href="/tag/chajian/" target="_blank" class="keywords">插件</a>,而COM对象使用唯一标示符来标识,因此要检测<a href="/tag/chajian/" target="_blank" class="keywords">插件</a>必须知道其 = 
    //  = COM标识符,例如,Flash的标识符是ShockwaveFlash.ShockwaveFlash = 
    //  ========== 
    function hasIEPlugin(name){
        try{
            new ActiveXOBject(name);
            return true;
        }catch(e){
            return false;
            //TODO handle the exception
        }
    };
    // IE中检测Flash
    alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));



    // 结合之前的2个检测<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>,检测所有的浏览器中的FLash
    function hasFLash(){
        var result = hasPlugin("Flash");
        if(!result){
            result.hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
        }
        return result; // true or false
    };

    function hasQuickTime(){
        var result = hasPlugin("QuickTime");
        if (!result) {
            result = hasIEPlugin("QuickTime.Quicktime");
        } 
        return result;
    };

动态JS脚本

动态加载JS

var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);

动态注入JS代码

var script = document.createElement("script");
script.type = "text/javascript";
var code = "function sayHi(){alert('hi')}";
try{
    // Firefox Opera Safari
    script.appendChild(document.createTextNode(code));
}catch(er){
    // IE
    script.text = code;
}
document.body.append(script);

动态CSS样式

动态加载CSS文件

var link = document.createElement("link");
link.href = "stylesheet";
link.type = "text/css";
link.rel =     "style.css";
document.getElementsByClassName("head")[0].appendChild(link);

动态注入CSS代码

var style = document.createElement("style");
style.type = "text/css";
var code = "body{background:red;}";
try{
    // Firefox Opera Safari
    style.appendChild(document.createTextNode(code));
}catch(er){
    // IE
    style.stylesheet.cssText = code;
}
document.documentElement.insertBefore(style,document.body);

刷新按钮的创建

        function createRefresh(){
            var refresh = document.createElement("div");
            refresh.innerText = "refresh";
            refresh.style.cssText += " ;position:fixed;top:0;left:40%;z-index:9999;padding:10px 10px;background:#ccc;border-radius: 3px;";
            refresh.onclick = function (){
                window.location.reload(true);    
            }
            document.body.appendChild(refresh);
        };

数组方法的补丁

        
        //数组forEach方法补丁
        Array.prototype.forEach = function (callback) {
            var a = 0,len = this.length;
            while (a < len) {
                callback(this[a],a++,this);
            }
        };
        //数组map方法补丁
        Array.prototype.map = function (callback) {
            var a = 0,len = this.length,result = [];
            while (a < len) {
                result.push(callback(this[a],this));
            }
            return result;
        };
    // 数组filter<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>补丁
    Array.prototype.filter = function (callback) {
        var a = -1,result = [];
        while (++a < len) {
            callback(this[a],a,this) &amp;&amp; result.push(this[a]);
        }
        return result;
    };

原生JS淡出

        function fadeOut(el,speed) {
            el.style.opacity = 1;
            //el.style.display="";
            var last = +new Date();
            var tick = function() {
                el.style.opacity = +el.style.opacity - (new Date() - last) / speed;
                last = +new Date();
                if (+el.style.opacity >0) {
                    (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick,16);
                }
            };
            tick(); 
        }

序列化输出JSON数据 : JSON.stringify()

JSON.stringify(JSONData,null,4)

JSON.stringify() 方法

: 将 JavaScript 对象转换为字符串。

语法: JSON.stringify(value[,replacer[,space]])

value:
必需，一个有效的 JSON 字符串。
replacer:
可选。用于转换结果的函数或数组。
- 如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
- 如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 有可以使用非数字，如：t。

注意

JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。
可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生：

var obj = { "name":"Runoob","alexa":function () {return 10000;},"site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);

Math相关方法（学好数理化，走遍天下都不怕）

　收藏了Ｎ多的方法　：　）

直角三角形已知2边求斜边的长

        function getHypotenuseIn_RightTriangle(w,h){ 
            var num,c; 
            num = Math.pow(w,2) + Math.pow(h,2);
            c = Math.round(Math.sqrt(num)); 
            return c;
        };

弧度转角度

        function getAngle(arc){ 
            var deg = arc/(2*Math.PI/360);
            return deg;
        };

根据2点坐标，求角度

        function angle(start,end){  
            var diff_x = end.x - start.x,diff_y = end.y - start.y;
            //返回角度,不是弧度
            return 360*Math.atan(diff_y/diff_x)/(2*Math.PI);
        }

jQuery の鼠标移入元素则禁止 页面滚动

function eleHoverBanScroll(ele){
    ele.hover(function(){
        window.addEventListener("DOMMouseScroll",stopScroll);
        window.onmousewheel = stopScroll;
    },function(){
        window.removeEventListener("DOMMouseScroll",stopScroll);
        window.onmousewheel = null;
    })
    function stopScroll(e){
        var eve = e || event;
        eve.preventDefault();
        eve.returnValue = false;
    };
}

JavaScript の数字转中文以及中文转数字方法

function Num_or_C_decode(value) {
    try {
        if (parseFloat(value).toString() != "NaN") {
            switch (value) {
                case 1:
                    return "一";
                    break;
                case 2:
                    return "二";
                    break;
                case 3:
                    return "三";
                    break;
                case 4:
                    return "四";
                    break;
                case 5:
                    return "五";
                    break;
                case 6:
                    return "六";
                    break;
                case 7:
                    return "七";
                    break;
                case 8:
                    return "八";
                    break;
                case 9:
                    return "九";
                    break;
                case 0:
                    return "零";
                    break;
                default:
                    return "仅支持0到9的个位数值"
                    break;
            }
        } else if (typeof str == 'string' && str.constructor==String) {
            switch (value) {
                case "一":
                    return 1;
                    break;
                case "二":
                    return 2;
                    break;
                case "三":
                    return 3;
                    break;
                case "四":
                    return 4;
                    break;
                case "五":
                    return 5;
                    break;
                case "六":
                    return 6;
                    break;
                case "七":
                    return 7;
                    break;
                case "八":
                    return 8;
                    break;
                case "九":
                    return 9;
                    break;
                case "零":
                    return 0;
                    break;
                default:
                    return "仅支持0到9的个位数值"
                    break;
            }
        } else {
            console.error("value非数值,非数值字符串")
        }
    }
    catch (err) {
        console.log(err)
    }
}

鼠标移入禁止滚动条滚动,移出解除禁止;

此时: 浏览器的滚动条全部受到影响;
既: 属性设置为overflow:auto; 全部受到影响

$(".smyb_content").hover(function () {
    window.addEventListener("DOMMouseScroll",stopScroll);
    window.onmousewheel = stopScroll;
},function () {
    window.removeEventListener("DOMMouseScroll",stopScroll);
    window.onmousewheel = null;
})
function stopScroll(e) {

var eve = e || event;

eve.preventDefault();

eve.returnValue = false;

};

附: 原生JS の addEventListener

jQuery 设置全选全不选

function allCheckbox(){
    var boo = true;
    $("#allCheckbox").change(function(){
        if(boo){
            $("#HistoryItem_table input[type=checkbox]").prop("checked",boo)
            boo = false;
        }else{
            $("#HistoryItem_table input[type=checkbox]").removeAttr("checked");
            // $("#HistoryItem_table input[type=checkbox]").removeProp("checked"); // 也没错
            boo = true;
        }
    })
}

prop方法:(jQ1.6新增)
注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked,和 defaultSelected）。

removeProp() 方法:

定义和用法
- removeProp() 方法移除由 prop() 方法设置的属性。
- 注意：不要使用该方法来移除诸如 style、id 或 checked 之类的 HTML 属性。请使用 removeAttr() 方法代替。
语法:
- $(selector).removeProp(property)

参考:

因为jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。
因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。

用原生js在DOM元素上面添加 方法

if (window.HTMLElement) {
    // 使用原型扩展DOM自定义事件
    HTMLElement.prototype.addEvent = function(type,e);
            });
        } 
    };
} else {
    // 如果是不支持HTMLElement扩展的浏览器
    // 通过遍历所有元素扩展DOM事件
    var elAll = document.all,e);
            });
        };
    }
}
//--------- 以下是测试代码 -------------
document.getElementById("image").addEvent("click",function() {
    alert("这是：" + this.alt);    
});

通过JavaScript 添加css(模拟JQ.css方法)

使用: setStyle(obj,{width : '200px'; position : 'absolute'; left : '100px';});

function setStyle(obj,json){
    for(var i in json)
    {
        obj.style[i]=json[i];
    }
}

获得元素(current)在指定元素集合中(obj)中的索引

function index(current,obj){ 
    for (var i = 0; i < obj.length; i++) { 
        if (obj[i] == current) { 
            return i; 
        } 
    } 
}

汉字转数字,数字转汉字

function NC_decode(value) {
    try {
        if(parseFloat(value).toString() != "NaN") {
            switch(value) {
                case 1:
                    return "一";
                    break;
                case 2:
                    return "二";
                    break;
                case 3:
                    return "三";
                    break;
                case 4:
                    return "四";
                    break;
                case 5:
                    return "五";
                    break;
                case 6:
                    return "六";
                    break;
                case 7:
                    return "七";
                    break;
                case 8:
                    return "八";
                    break;
                case 9:
                    return "九";
                    break;
                case 0:
                    return "零";
                    break;
                default:
                    return "仅支持0到9的个位数值"
                    break;
            }
        } else if(typeof str == 'string' && str.constructor == String) {
            switch(value) {
                case "一":
                    return 1;
                    break;
                case "二":
                    return 2;
                    break;
                case "三":
                    return 3;
                    break;
                case "四":
                    return 4;
                    break;
                case "五":
                    return 5;
                    break;
                case "六":
                    return 6;
                    break;
                case "七":
                    return 7;
                    break;
                case "八":
                    return 8;
                    break;
                case "九":
                    return 9;
                    break;
                case "零":
                    return 0;
                    break;
                default:
                    return "仅支持零到九的中文简体"
                    break;
            }
        } else {
            console.error("value非数值,非数值字符串")
        }
    } catch(err) {
        console.log(err)
    }
}

数字转字母,下标 0 >> A

function NE_decode(value) {
    try {
        switch(value) {
            case 0:
                return "A";
                break;
            case 1:
                return "B";
                break;
            case 2:
                return "C";
                break;
            case 3:
                return "D";
                break;
            default:
                return "非数字0,1,2,3";
                break;
        }
    } catch(err) {
        console.log(err)
    }
}

相等比较:undefined 或者 null 转为false

// @param value
// undefined 或者 null 
// @retruns [Boolean]
function typeCompare(value) {
    try {
        switch(value) {
            case undefined:
                return false;
                break;
            case null:
                return false;
                break;
            case 0:
            case "0":
                return false;
                break;
            default:
                return true;
                break;
        }
    } catch(err) {
        console.error("err")
    }
}

利用 jQ 模拟select盒子的操作

$.fn.extend({
    // 模拟select盒子的操作
    'selectChooseBlur': function(option) {
        var $this = $(this),$selectEle = $(option.selectEle),// select盒子
            $optionEle = $(option.optionEle),// option元素(具体的)
            $changeEle = $(option.changeEle) // 被变化的元素
    function hide() {
        $selectEle.hide();
    }

    $this.click(function(event) {
        event.stopPropagation();
        $selectEle.toggle();
    })

    $this.hover(function() {
        $(document).off("click",hide)
    },function() {
        $(document).on("click",hide)
    })

    // 点击option,指定的元素变为option的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>
    $this.on("click",option.optionEle,function(event) {
        var _t = $(this);
        $changeEle.attr({
            "title": _t.attr("title"),"value": _t.attr("value")
        }).html(_t.html());
    })

    return $this;
}
});

jS代码通过 data-* 选择器获得元素

mui("#CvListTabBox li[data-id='"+theId+"']")[0]