12个常用的jQuery代码片段

在《锋利的jQuery》中整理的几个现在还常用的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")
                //rel='external'的超链接将会在新窗口打开连接
                $('a[rel$="external"]').click(function(){
                    this.target = "_blank";
                })
            })

GIF.gif

3.判断浏览器类型

        //判断浏览器类型
            $(document).ready(function(){
                if(/firefox/.test(navigator.userAgent.toLowerCase())){
                    console.log('火狐')
                }
                if(/webkit/.test(navigator.userAgent.toLowerCase())){
                    console.log('Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器')
                }
                if(/opera/.test(navigator.userAgent.toLowerCase())){
                    console.log('欧朋浏览器')
                }
                if(/msie/.test(navigator.userAgent.toLowerCase())){
                    console.log('ie')
                }
                //IE 6
                if ('undefined' == typeof(document.body.style.maxHeight)) {
                    //
                }
                //IE 6-8
                if (!$.support.leadingWhitespace) {
                    //
                }
                //IE11的检测方法
                var ua=navigator.userAgent.toLowerCase();  
                
                if (ua.match(/msie/) != null || ua.match(/trident/) != null) {   
                //浏览器类型  
                browserType = "IE";  
                //浏览器版本  
                browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];   
                }  
            })

4.输入文本框获取或者失去焦点

5.返回头部滑动动画

        //返回头部滑动动画
        jQuery.fn.scrollTo = function(speed){
            var targetOffset = $(this).offset().top;
            $('html,body').stop().animate({scrollTop:targetOffset},speed);
            return this
        }
        //使用
        $(".returnTop").click(function(){
            $("body").scrollTo(500);
            return false;
        })

GIF.gif

6.获取鼠标位置

        //获取鼠标位置
        $(document).ready(function(){
            $(document).mousemove(function(e){
                $("#XY").html("X:"+e.pageX+" Y:"+e.pageY)
            })
        })

GIF.gif

7.判断元素是否存在

        //判断元素是否存在
        $(document).ready(function(){
            if($('#id').length){
                //do something
            }
        })

8.点击div也可以跳转

        //点击div也可以跳转
        $('div').click(function(){
            window.location = $(this).find("a").attr("href");
        })
//使用
        
回到首页

9.设置div在屏幕中央

        //设置div在屏幕中央
        $(document).ready(function(){
            jQuery.fn.center = function(){
                this.css('position','absolute');
                this.css('top',( $(window).height()-this.height() )/2 + $(window).scrollTop() +'px' )
                this.css('left',( $(window).width()-this.width() )/2 + $(window).scrollLeft() +'px' )
            }
            //使用
            $('#XY').center()
        })

10.回车提交

        //回车提交表单
        $(document).ready(function(){
            $('input').keyup(function(e){
                if(e.which=='13'){
                    alert('回车提交')
                }
            })
        })

11.设置Ajax全局参数

        //设置全局Ajax参数
        $('#load').ajaxStart(function(){
            showLoading();//显示loading
            disableButton();//禁用按钮
        })
        $('#load').ajaxComplete(function(){
            hideLoading();//隐藏按钮
            enableButtons();//启用按钮
        })

12.获取选中的下拉框

        //获取攒中的下拉框
        $('#element').find('option:selected');
        $('#element option:selected')