jQuery的实用技巧

  1.禁用页面的右键菜单

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

  2.新窗口打开页面

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

    //例子2:rel="external"的超链接将会在新窗口中打开连接
    $("a[rel$='external']").click(function(){
        this.target="_blank";
    })
})
//use
<a href="http://www.cssrain.cn" rel="external">open link</a>

  3.输入框文字获取和失去焦点

$(document).ready(function(){
    $("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()) == originalvalue){
            input.val("");
        }
    }).blur(function(){
        if($.trim(input.val()) == ""){
            input.val(originalvalue);
        }
    });
}

  4.获取鼠标位置

$(document).ready(function(){
    $(document).mousemove(function(e){
        $("#XY").html("X:" + e.pageX + "| Y:" +e.pageY);
    });
});

  5.点击div也可以跳转

$("div").click(function(){
    window.location=$(this).find("a").attr("href");
    return false;
});
//user
<div><a href="index.html">home</a></div>

  6.根据浏览器大小添加不同的样式

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

  7.关闭所有动画效果

$(document).ready(function(){
    jQuery.fx.off = true;
});

  8.检测鼠标按键

$(document).ready(function(){
    $("#XY").mousedown(function(e){
        alert(e.which) //1:鼠标左键;2:鼠标中键;3:鼠标右键
    })
});
posted @ 2017-07-25 11:16  蔚蓝色幻想  阅读(315)  评论(1编辑  收藏  举报