12个常用的jQuery代码片段 - 黑马程序员技术交流社区

在《锋利的jQuery》中整理的几个现在还常用的jQuery代码片段。

1.禁用页面，禁用页面的右键菜单

[JavaScript] 纯文本查看 复制代码

        //禁用右键菜单

            $(document).ready(function(){

                $(document).bind('contextmenu',function(e){

                    return false;

                })

            })

2.新窗口打开界面

[JavaScript] 纯文本查看 复制代码

        //新窗口打开界面

            $(document).ready(function(){

                //1.href='http://'的超链接将会在新窗口打开连接

                $('a[href^="http://"]').attr("target","_blank")

                //rel='external'的超链接将会在新窗口打开连接

                $('a[rel$="external"]').click(function(){

                    this.target = "_blank";

                })

            })

3.判断浏览器类型

[JavaScript] 纯文本查看 复制代码

   //判断浏览器类型

         $(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.输入文本框获取或者失去焦点

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <input type="text" id="address" value="请输入邮箱地址"/>

        <script src="jquery/jquery-3.0.0.min.js"></script>

        <script>

            //当获取焦点的时候

            $('#address').focus(function(){

                var tex = $(this).val();

                if(tex == '请输入邮箱地址'){

                    $(this).val('');

                }

            })

            //当失去焦点的时候

            $('#address').blur(function(){

                var tex = $(this).val();

                if(tex == ''){

                    $(this).val('请输入邮箱地址');

                }

            })

        </script>

    </body>

</html>

5.返回头部滑动动画

[JavaScript] 纯文本查看 复制代码

 //返回头部滑动动画

      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.获取鼠标位置

[JavaScript] 纯文本查看 复制代码

    //获取鼠标位置

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

7.判断元素是否存在

[JavaScript] 纯文本查看 复制代码

  //判断元素是否存在

      $(document).ready(function(){
         if($('#id').length){
            //do something
         }
      })

9.设置div在屏幕中央

[JavaScript] 纯文本查看 复制代码

    //设置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()
      })