jQuery技巧

一些实用的jQuery技巧

1、禁用页面的右键菜单

    $(document).bind("contextmenu",function(e){
        return false;
    })

 

2、新窗口打开页面

    //例子1：href="http://"的超链接将会在新窗口打开链接
    $('a[href=^"http://"]').attr("target","_blank");

    //例子2：rel="external"的超链接将会在新窗口打开链接
    $("a[rel='external']").click(function(){
        this.target="_blank";
    });

3、判断浏览器类型

   //firefox 2 and above
    if($.suport.mozilla$$$.suport.version>="1.8"){
        //do something
    }
    //Safari
    if($.suport.safari){
        //do something
    }
    //Chrome
    if($.suport.chrome){
        //do something
    }
    //Opera
    if($.$.suport.opera){
        //do something
    }
    //IE6 and below
    if($.suport.msie&& $.suport.version<=6){
        //do something
    }
    //anything above IE6
    if($.suport.msie&&$.suport.version>6){
        //do something
    }

4、输入框文字获取和失去焦点

$("input.text1").val("Enter your search text here:");
    textFill($('input.text1')；

function textFill(input){
    var originalvalue=input.val();
    input.focus(function(){
        if($.trim(input.val())==""){
            input.val(originalvalue);
        }
    }).blur(function(){
        if($.trim(input.val())==""){
            input.val(originalvalue);
        }
    });
}

5、返回头部滑动动画 

jQuery.fn.scrollTo=function(speed) {
        var targetOffset=$(this).offset().top;
        $("html.body").stop().animate({scrollTop:targetOffset}, speed)
        return this;
    };

//use
   $("#gotoHead").click(function() {
        $("body").scrollTo(500);
        return false;
    });

6、获取鼠标位置 

$(document).mousemove(function(e){
        $("#XY").html("X:"+e.pageX+"|Y:"+e.pageY);
        console.log("X:"+e.pageX+"|Y:"+e.pageY);
    });7、判断元素是否存在

//7、判断元素是否存在
    if($("#id").length){
        //do something
    }

8、点击div也可以跳转   

$("div").click(function(){
        window.location=$(this).find("a").attr("href");
        return false;
    });

 

9、根据浏览器大小添加不同样式 

    function checkWindowSize(){
        if($(window).width()>1200){
            $("body").addClass("large");
        }else {
            $("body").removeClass('large')
        }
    }
    $(window).resize(checkWindowSize);

10、设置div在屏幕中央

    jQuery.fn.center=function(){
        this.css({
            "position":"absolute",
            "top":($(window).height()-this.height())/2+$(window).scrollTop()+"px");
            "left":($(window).width()-this.width())/2+$(window).scrollLeft()+"px");
        });
        return this;
    }
    //use
    $("#XY").center();

11、创建自己的选择器 

$.extend($.expr[':'], {
        mareThen500px:function(a){
            return $(a).width()>500;
        }
    });
    //use
    $(".box:moreThen500px").click(function() {
        //do something
    });

12、关闭所有动画效果

jQuery.fx.off=true;

13、检测鼠标的右键和左键

    $("#XY").mousedown(function(e){
        alert(e.which)  //1-鼠标右键；2-鼠标中键；3-鼠标右键
    });

14、回车提交表单

    $("input").keyup(function(e){
        if(e.which==="13"){
            alert("回车提交！");
        }
    });

15、设置全局Ajax参数

    $("#load").ajaxStart(function(){
        showLoading();//显示loading
        disableButtons();//禁用按钮
    })；
    $("#load").ajaxComplete(function() {
        hideLoading();//隐藏loading
        enableButtons();//启用按钮
    });

16、获取选中的下拉框

   $("#someElement").find("option:selected");
    $("#someElement option:selected");

17、切换复选框

    var tog=false;
    $("button").click(function(){
        $("input[type=checkbox]").attr("checked",!tog);
        tog=!tog;
    });

18、使用sibling()来选择同悲元素

    //不这样做
    $("#nav li").click(function(){
        $("nav li").removeClass('active');
        $(this).addClass('active');
    });
    //替代做法
    $("#nav li").click(function() {
        $(this).addClass('active').siblings().removeClass('active');
    });

19、个性化链接

    $("a[href$='pdf']").addClass("pdf");
    $("a[href$='zip']").addClass('zip');
    $("a[href$='psd']").addClass('psd');

20、在一段时间之前自动隐藏或关闭元素

    //使用settimeout来实现的方式
    setTimeOut(function(){
        $("div").fadeIn(400);
    },3000);
    //使用delay()这一功能来实现
    $("div").slideUp(300).delay(3000).fadeIn(400);

21、使用FireFox和FireBug来记录事件日志

    jQuery.log=jQuery.fn.log=function(msg){
        if(console){
            console.log("%s",msg,this);
        }
        return this;
    };

22、为任何与选择器相匹配的元素绑定事件

    //为table里面的td元素绑定click事件，不管td元素是一直存在还是动态创建
    //jQuery1.4.2之前使用的方式
    $(".table").each(function(){
        $("td",this).lice("click",function(){
            $(this).toggleClass('hover');
        });
    });
    //jQuery 1.4.2使用的方式
    $("table").delegate('td', 'click', function() {
        $(this).toggleClass('hover');
    });
    //jQuery 1.7.1使用方式
    $("table").on("click","td",function(){
        $(this).toggleClass('hover');
    })

23、使用css钩子

jQuery.cssHooks是1.4.3新增的方法，当你定义新的css Hooks时实际上定义的是getter和setter方法。比如，border-radius这个圆角属性想要成功应用于firefox、webkit等浏览器，需要增加属性前缀，比如-moz-border-radius和-webkit-border-radius。其实我们可以通过定义css Hooks将其封装成统一的接口borderRadius，而不是一意设置css属性，代码如下：

$.cssHooks['borderRadius']={
        get:function(elem,computed,extra){
            //依赖于浏览器读取的值
            //-moz-border-radius，-webkit-border-radius 或者border-radius
        }
        set:function(elem,value){
            //设置css3属性
        }
    }；
    //use
    $("#rect").css("borderRadius",5);

24、$.proxy()使用

使用回调方法的缺点之一是当执行类库中的方法后，上下文对象被设置到另外一个元素，例如：

html代码：

       <div id=”panel”style=”display:none”><button>Close</buttono></div>

jQuery代码：

       $(“#panel”).fadeIn(function(){

             $(“#panel button”).click(function(){

                     $(this).fadeOut();  

                 });

});

上面的代码将会使button元素消失而不是panel元素，可以使用$.proxy()解决这个问题：

$("#panel").fadeIn(function() {
        //using $.proxy():
        $("#panel button").click($.proxy(function(){
            //this指向#panel
            $(this).fadeOut();
        },this));
    });

25.限制Text-Area域中的字符的个数

    jQuery.fn.maxLength = function(max) {
        this.each(function() {
            var type = this.tagName.toLowerCase();
            var inputType = this.type ? this.type.toLowerCase() : null;
            if (type == "input" && inputType == "text" || inputType ==
                "password") {
                //应用标准的maxLength
                this.maxLength = max;
            } else if (type == "textarea") {
                this.onkeypress = function(e) {
                    var ob = e || event;
                    var keyCode = ob.keyCode;
                    var hasSelecton = 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 && !hasSelecton);
                };
                this.onkeyup = function() {
                    if (this.value.length > max) {
                        this.value = this.value.substring(0, max);
                    }
                };
            }
        });
    };
    //use
    $("#mytextarea").maxLength(10);

26.本地存储 

localStorage.someData="This is going to be saved";

 27.解析json数据时报parseError错误

jQuery在1.4版本后，采用了更为严格的json解析方式，即所有内容都必须要有双引号，如果升级jQuery版本后，ajax加载json报错，有可能就是这个原因。

//1.4之前版本，key没引号，这样没问题
    ｛
        key:"2456453",
        status:"0"
    ｝
    //1.4版本之后都必须加上双引号
    ｛
        "key":"2456453",
        "status":"0"
    ｝

 

28.从元素中除去HTML

    $.fn.stripHtml = function() {
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
        this.each(function() {
            $(this).html($(this).html().replace(regexp.
                ''));
        });
        return $(this);
    }

转载于:https://www.cnblogs.com/dodomonster/p/5281726.html