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

3.判断浏览器类型

 $(function(){
        var brow = $.browser;

        //Firefox 2 and above
        if(brow.mozilla && brow.version>="1.8"){
            alert("Firefox");
        }

        //Safari
        if(brow.safari){
            alert("Safari");
        }

        //chrome
        if(brow.chrome){
            alert("chrome");
        }

        //Opera
        if(brow.opera){
            alert("opera");
        }

        //IE6 and below
        if(brow.msie && brow.version <= 6){
            alert("<=IE6");
        }

        //above IE6
        if(brow.msie && brow.version > 6){
            alert(">IE6");
        }

    })
在jQ 1.3版本后,官方推荐使用$.support 来代替 $.browser注意:以上方式不适用于1.9及以上版本

4.输入框文字获取和失去焦点
 $(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){ //如果输入框为原始内容,点击清空value,便于输入
                    input.val(‘‘);
                }
            }).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;
    }
    $("#goHeader").click(function () {
        $("body").scrollTo(500);
        return fal

6.获取鼠标位置

$(function(){
        $(document).mousemove(function(e){
            $("#XY").html("X:"+ e.pageX+"|Y:"+ e.pageY);
        })
    })
时间: 2024-10-20 09:56:28

jQuery小技巧(一)的相关文章

程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 1 $(document).ready(function(){ 2 $(document).bind("contextmenu",function(e){ 3 return false; 4 }); 5 }); 2. 隐藏搜索文本框文字 1 Hide when clicked in the search field, the value.(example can be found below in t

必须学会使用的35个Jquery小技巧

query 与JS相比较,方便了许多,语法上也简便了不少,下面是Jquery常用的技巧,下面Jquery使用的方法在各个网站中都会使用到. 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 1 2 3 4 5 $(document).ready(function(){     $(document).bind("contextmenu",function(e){         return false;     }); }); 2. 隐藏搜索文本框

10个 jQuery 小技巧

10个 jQuery 小技巧 -----整理by: xiaoshuai 1. 返回顶部按钮 可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Back to top                                        $('a.ktop').click(function () {                          $(document.body).animate({scrollTop: 0}, 800)

每个程序员都会的 35 个 jQuery 小技巧

1 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 2 1. 禁止右键点击 3 $(document).ready(function(){ 4 $(document).bind("contextmenu",function(e){ 5 return false; 6 }); 7 }); 8 2. 隐藏搜索文本框文字 9 Hide when clicked in the search field, the value.(example can be found belo

人人都会的35个Jquery小技巧

收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment f

人人必知的10个 jQuery 小技巧

原文地址:http://info.9iphp.com/10-jquery-tips-everyone-should-know/ 人人必知的10个 jQuery 小技巧 收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Back to top $('a.top').click(function () { $(document.body).animate({sc

前端程序员应该知道的 15 个 jQuery 小技巧

下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高度相同 在新标签页/窗口打开外部链接 通过文本查找元素 在改变Visibility时触发 AJAX调用错误处理 链式插件调用 返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top'

15个jQuery小技巧

下面这些简单的小技巧能够帮助你玩转jQuery. 1.返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a class=

超实用的JQuery小技巧

JQuery是一个 JavaScript 库,她极大的简化了我们对 JavaScript 的编程. 今天我们总结了下平常项目中用到的一些小技巧,仅供参考. 1.替换元素 //替换元素 $(document).ready(function(){ $("#id").replaceWith(' <p> I have been repaced </p>') }); 2.延时加载 //延时加载功能 $(document).ready(function(){ window.