jQ常用方法

$(document).ready(function () {
    /*禁用右键菜单
    * 所有元素都有contextmenu事件，通过冒泡的方式可以触发到最外围的元素
    * 直接给document元素设置该事件可以阻止右键菜单事件
    * */
    $(document).on('contextmenu', function () {
        return false;
    });

    //给a元素设置新建窗口打开
    $('a[href^="http"]').attr('target', '_blank');
    //或者rel="external"
    $('a[rel$="external"]').click(function () {
        this.target = '_blank';
    });
    //从性能上来讲，设置attr会好过于添加事件

    /*判断浏览器类型
    *目前来说由于浏览器更新换代很快，加上移动端的适配，导致判断浏览器的版本和类型成了一个很繁琐的代码集合
    *特别是ios端，由于他系统的更新导致很多以前判断的条件全都变了，这里就不写了
    */

    //输入框获取焦点时删除提示文字，失去焦点如果未输入内容重新设置提示文字
    var $input = $('input').val("提示文字");
    textFill($input);

    function textFill(input) {
        var originalValue = input.val(); //获取提示文字
        input.focus(function () {
            //当输入框获取到焦点时判断当前的val是否和初始的originalValue相同，相同则将val设置为空
            if ($.trim(input.val()) == originalValue) { //trim删除首尾空格
                input.val('');
            };
        }).blur(function () {
            //失去焦点时如果输入框内容为空则重新恢复原来的提示
            if ($.trim(input.val()) == '') {
                input.val(originalValue);
            };
        });
    };
    //当然我们也可以使用placeholder="提示文字"的html占位符属性

    //返回元素顶部动画
    jQuery.fn.scrollTo = function (speed) {
        var targetOffset = $(this).offset().top;
        $('html,body').stop().animate({
            scrollTop: targetOffset
        }, speed);
        return this;
    };
    $('#top').click(function () {
        $('body').scrollTo(500);
        return false;
    });
    /*
    * 给jq添加一个返回顶部的方法，获取到我们body元素的距离html文档顶部的距离，然后设置动画
    * 这样可以设置任何元素的顶部动画
    * 需要注意的是，如果没有设置html和body的css初始化，此时的body距离顶部的距离并不是0
    */


    //获取鼠标的位置
    $(document).mousemove(function (e) {
        $('#xy').html('x:' + e.pageX + 'y:' + e.pageY);
    });

    //判断元素是否存在
    if ($('#id').length) {
        //存在的话
    }
    /* 由于jq的连缀返回的是jq对象，所以if这个$('#id')永远是true，
    *  哪怕元素不存，只有判断这个jq对象的length才是有效的
    */

    //点击a元素外面的div也可以实现跳转
    $('div').click(function () {
        window.location = $(this).find('a').attr('href');
        return false;
    });

    //根据浏览器大小添加不同的样式
    function checkWindowSize() {
        if ($(window).width() > 1200) {
            $('body').css('background-color', '#999');
        } else {
            $('body').css('backgroundColor', '');
        };
    };
    $(window).resize(checkWindowSize);
    //注意，第一次打开浏览器页面并不会出发resize事件，所以还需要手动出发一次checkWindowSize方法


    //设置div在屏幕中央
    jQuery.fn.center = function () {
        this.css('position', 'absolute');
        this.css('top', ($(window).height() - this.outerHeight()) / 2 + $(window).scrollTop() + 'px');
        this.css('left', ($(window).width() - this.outerWidth()) / 2 + $(window).scrollLeft() + 'px');
        return this;
    };
    var $xy = $('#xy').center();
    $(window).scroll(function () {
        setTimeout(function () {
            $xy.center();
        }, 60);
    });
    /* 由于不同的浏览器他的scroll高度宽度获取有可能是body或者是html，这就导致需要一个判断
    *  但是使用windw获取scroll所有浏览器都兼容
    *  outerHeight、outerWidth获取的元素宽高是包含padding和boder的
    */

    //创建自定义选择器
    $.extend($.expr[':'], {
        moreThen500px: function (a) {
            return $(a).width() > 500;
        }
    });
    $('div:moreThen500px').click(function () {
        //操作
    });
    /* 通过extend方法合并jq的选择器对象$.expr[':']
    *  然后第二个参数匿名对象里通过键值对的方式添加对应的选择器，然后值为一个函数，函数返回布尔值true/false
    *  a这个参数为对应的dom对象
    *  这里表示获取width大于500px的元素
    */


    //关闭所有动画效果
    jQuery.fx.off = true;

    //检测鼠标的左右键
    $(document).mousedown(function (e) {
        switch (e.which) {
            case 1:
                console.log("左键");
                break;
            case 2:
                console.log("中键");
                break;
            case 3:
                console.log("右键");
                break;
        };
    });

    //回车提交表单
    $('input').keyup(function (e) {
        if (e.which === 13) {
            console.log('提交表单');
        }
    });
    // 就是判断按键回弹后他的键码是否是回车的键码13

    //设置全局Ajax参数
    $(document).ajaxStart(function () {
        //请求前的操作
    });
    /* ajax有如下几个全局参数
    *  ajaxStart：ajax请求开始前
    *  ajaxSend：ajax请求时
    *  ajaxSuccess：ajax获取数据后
    *  ajaxError：ajax请求发生错误后
    *  ajaxComplete：ajax请求完成时
    *  ajaxStop：ajax请求停止后
    * 
    * 如果想让某个ajax请求不会被全局设置影响，在ajax方法的参数对象里加入global：false
    */


    //获取选中的下拉选项
    $('#someElement').find('');
    $('#someElement option:selected');
    //通过:selected选择器获取


    //切换复选框
    var tog = false;
    $('button').click(function () {
        $('input[type="checkbox"]').attr('checked', !tog);
        console.log(typeof $('input[type="checkbox"]').attr('checked'), 1)
        // $('input[type="checkbox"]').prop('checked', !tog);  //推荐使用
        tog = !tog;
    });
    /* 通过属性选择器获取到对应的复选框，然后设置checked属性为true即可勾选，false取消勾选
    *  然而使用attr是以前的操作，根据jq的逻辑，设置布尔值的话推荐使用prop()方法
    *  原因是attr获取的是静态的attribute属性值，也就是行内属性，而prop获取的是property属性
    *  property属性才是实时的js对象属性，"checked"、"selected"或"disabled"这些都是要使用prop()方法的
    *  需要注意的是attr方法获取到的checked、selected、disabled的值如果是未勾选则返回undefined
    *  勾选了就返回他们本身，并且为字符串，比如checked勾选就返回string类型的checked字符串
    */


    //使用siblings()获取同辈元素
    $('#nav li').click(function () {
        $(this).addClass('selected')
            .siblings().removeClass('selected');
    });
    //通过使用该方法可以省去很多事情，这种方式也常用于nav导航添加选中样式


    //个性化链接
    $('a[href$="pdf"]').addClass('pdf');
    $('a[href$="zip"]').addClass('zip');
    $('a[href$="psd"]').addClass('psd');
    //使用属性选择器添加对应的链接样式，但是个人还是推荐直接使用css的属性选择器，那个比较正统一些，从性能上讲也更符合规矩


    //在一段时间后自动隐藏或关闭元素
    $('#div').slideUp(300)
        .delay(3000).fadeIn(400);
    // 使用delay()延迟动画，这样就可以少些几行setTimeout方法了


    //使用console来记录日志
    jQuery.log = jQuery.fn.log = function (msg) {
        if (console) {
            console.log('%s: %o', msg, this);
        };
        return this;
    };
    $('div').log('div');
    jQuery.log('ddd')
    /* 可能用处不大，个人更偏向直接写console.log()
    *  %s表示string类型占位符，对应msg参数
    *  %o表示object类型占位符，对应this参数
    */

    //为任何与选择器相匹配的元素绑定事件，包括后来新建的元素
    $('table').on('click', function () {
        $(this).toggleClass('hover');
    });
    //使用on方法绑定事件


    //使用css钩子
    $.cssHooks['borderRadius'] = {
        get: function (elem, computed, extra) {
            var css = elem.currentStyle ? elem.currentStyle : window.getComputedStyle(elem, null);
            var getCss = css['borderRadius'];
            if (!getCss) { //火狐浏览器
                try {
                    var top_left = css['border-top-left-radius'];
                    var top_right = css['border-top-right-radius'];
                    var bottom_left = css['border-bottom-left-radius'];
                    var bottom_right = css['border-bottom-right-radius'];
                    if (top_left === top_right === bottom_left === bottom_right) {
                        getCss = top_left;
                    } else if (top_left === bottom_right && top_right === bottom_left) {
                        getCss = top_left + ' ' + top_right;
                    } else if (top_right === bottom_left) {
                        getCss = top_left + ' ' + top_right + ' ' + bottom_right;
                    } else {
                        getCss = top_left + ' ' + op_right + ' ' + bottom_left + ' ' + bottom_right;
                    };
                } catch (e) {
                    console.log('获取borderRadius发生错误：', e);
                }
            };
            return getCss;
        },
        set: function (elem, value) {
            elem.style['-webkit-border-radius'] = value;
            elem.style['-moz-border-radius'] = value;
            elem.style['borderRadius'] = value;
        }
    };
    $('div').css('borderRadius', '5px');
    /* 使用$.cssHooks可以自定义获取css的属性方法，他是一个对象，里面有get和set两个方法，其中get是获取，set为设置
    *  get方法有三个参数，其中elem为对应的dom元素，其他两个暂时不清楚有什么用途
    *  set方法有两个参数，elem为dom元素，value为css设置值
    *  由于火狐浏览器无法通过borderRadius直接获取到值，火狐返回的是空字符串，所以需要自己手动适配,这里就是使用钩子的意义
    *  设置的时候我们也可以加上前缀来达到兼容的效果
    */


    //$.proxy()的使用
    //jq使用回调方法的缺点就是this指向已经不是原来的对象了
    //例子：
    $('#panel').fadeIn(function () {
        $('#panel button').click(function () {
            $(this).fadeOut();
        });
    });
    //这个方法导致button元素click后隐藏了，我们实际上是要让#panel元素隐藏
    //使用$.proxy()
    $('#panel').fadeIn(function () {
        $('#panel button').click($.proxy(function () {
            $(this).fadeOut();
        }));
    });
    //使用$.proxy()传入一个函数，该函数的this将指向$('#panel').fadeIn()的作用域


    //限制text-area域中的字符个数
    jQuery.fn.maxLength = function (max) {
        this.each(function () {
            //获取元素名称
            var type = this.tagName.toLowerCase();
            //获取元素类型
            var inputType = this.type ? this.type.toLowerCase() : null;
            //如果元素是input元素，type为text或者是password
            if (type == "input" && inputType == "text" || inputType == "password") {
                //input元素直接使用maxLength属性
                this.maxLength = max;
            } else if (type == "textarea") {
                //textarea
                this.onkeypress = function (e) {
                    var ob = e || event;
                    var keyCode = ob.keyCode;
                    var hasSelection = document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
                    return !(this.value.length >= max &&
                        (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13)
                        && !ob.ctrlKey && !ob.altKey && !hasSelection);
                };
                this.onkeyup = function () {
                    if (this.value.length > max) {
                        this.value = this.value.substring(0, max);
                    };
                };
            };
        });
        return this;
    };
    $('#mytextarea').maxLength(10);
    /* keydown：当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件；
    *  keypress：当用户按下键盘上的字符键时触发，如果按住不让的话，会重复触发此事件；
    *  keyup：当用户释放键盘上的字符键时触发。
    *
    *  keypress通过return false可以阻止文字的输入，但是只能阻止英文输入，中文有输入法，无法阻止
    *  document.selection为ie10及以下使用的，他的作用是获取光标框选的文字，然后和this.selectionStart这些都是用来判断用户是否框选了文字
    *  如果当前的value的length大于等于max最大字符，并且目前按下的按键是字符按键(>50)，或者是空格32，回车13，其他0,
    *  然后ctrl和alt键如果按了，需要求反
    *  如果勾选了文字，求反后为false，因为&&的原因，整个都返回false，然后加上!()求反，return true，文字依旧可以输入
    *  如果没有勾选，且文字因为到了max上限，那么return false
    *  
    *  keyup就简单了，输入后，如果文字多了，就substring方法截取
    */


    //本地存储
    //使用jq的插件，localstorage
    //下载地址：https://plugins.jquery.com/storageapi/
    //api地址：https://github.com/julien-maurel/jQuery-Storage-API


    //从元素内容中删除html元素，转为纯文本
    $.fn.stripHtml = function () {
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
        this.each(function () {
            $(this).html($(this).html().replace(regexp, ''));
        });
        return $(this);
    };

    //扩展string对象的方法
    $.extend(String.prototype, {
        isPositiveInteger: function () {  //是否是正整数
            return (new RegExp(/^[1-9]\d*$/).test(this));
        },
        isInteger: function () { //是否为整数
            return (new RegExp(/^\d+$/).test(this));
        },
        isNumber: function (value, element) {
            return (new RegExp(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/).test(this));
        },
        trim: function () { //删除首尾空格
            return this.replace(/(^\s*)|(\s*$)|\r|\n/g, '')
        },
        trans: function () { //将<>"三个字符的转义字符转为字符
            return this.replace(/$lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"');
        },
        replaceAll: function (os, ns) { //将os的文字替换成ns文字
            return this.replace(new RegExp(os, 'gm'), ns);
        },
        skipChar: function (ch) { //删除从开头的ch字符
            if (!this || this.length === 0) { return ''; }
            if (this.charAt(0) === ch) { return this.substring(1).skipChar(ch); }
            return this;
        },
        isValidPwd: function () { //是否为有效的密码，也就是：_a-zA-Z0-9这些字符以内，其他不行
            return (new RegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this));
        },
        isValidMail: function () { //是否为有效的邮箱格式
            return (new RegExp(/^\w+((-\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim()));
        },
        isSpaces: function () { //字符是否为空
            var ch = null;
            for (var i = 0; i < this.length; i += 1) {
                ch = this.charAt(i);
                if (ch != ' ' && ch != '\n' && ch != '\t' && ch != '\r') { return false; }
            }
            return true;
        },
        isPhone: function () { //是否为电话号码
            return (new RegExp(/(^([0-9]{3,4}[-])?\d{3,8}(-\d{1,6})?$)|(^\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\))?$)|(^\d{3,8}$)/).test(this));
        },
        isUrl: function () { //是否为url
            return (new RegExp(/^[a-zA-Z0-9]+:\/\/([a-zA-Z0-9\-\.]+)([-\w.\/?%&=:]*)$/).test(this));
        },
        isExternalUrl: function () { //是否为外部url
            return this.isUrl() && this.indexOf('://' + document.domain) == -1;
        }
    });

});