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";
        })
    })

3.判断浏览器类型

//判断浏览器类型[/align]            $(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.返回头部滑动动画

//返回头部滑动动画[/align]        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;
       })

6.获取鼠标位置

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

7.判断元素是否存在

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

8.点击div也可以跳转

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

9.设置div在屏幕中央

//设置div在屏幕中央[/align]        $(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.回车提交

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

11.设置Ajax全局参数

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

12.获取选中的下拉框

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

你可能感兴趣的:(12个常用的jQuery代码片段)