《锋利的jquery》源码整理

1.禁用页面的右键菜单

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

2.判断浏览器类型

$(document).ready(function() { 
    // Firefox 2 and above 
    if ($.browser.mozilla && $.browser.version >= "1.8" ){ 
        // do something 
    }   
    // Safari 
    if( $.browser.safari ){ 
        // do something 
    }   
    // Chrome 
    if( $.browser.chrome){ 
        // do something 
    }   
    // Opera 
    if( $.browser.opera){ 
        // do something 
    }   
    // IE6 and below 
    if ($.browser.msie && $.browser.version <= 6 ){ 
        alert("ie6")
    }   
    // anything above IE6 
    if ($.browser.msie && $.browser.version > 6){ 
        alert("ie6以上")
    } 
});

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

<input type="text" class="text1" />
<script>
$(document).ready(function() { 
    $("input.text1").val("Enter your search text here."); 
    textFill( $('input.text1') ); 
}); 
function textFill(input){ //input focus text function 
    var originalvalue = input.val(); 
    input.focus( function(){ 
        if( $.trim(input.val()) == originalvalue ){
            input.val('');
        } 
    }).blur( function(){ 
        if( $.trim(input.val()) == '' ){
            input.val(originalvalue);
        } 
    }); 
}
 
</script>

4.返回头部滑动动画

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<div style="width:100%;height:800px;"></div>
<a href="#nogo" id="goheader">返回顶部</a>
<script>
jQuery.fn.scrollTo = function(speed) {
    var targetOffset = $(this).offset().top;
    $('html,body').stop().animate({scrollTop: targetOffset}, speed);
    return this;
};
// use
$("#goheader").click(function(){
    $("body").scrollTo(500);
    return false;
});
</script>
</body>
</html>

5.获取鼠标位置

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="XY" ></div>
<script>
$(document).ready(function () {
    $(document).mousemove(function(e){ 
        $('#XY').html("X : " + e.pageX + " | Y : " + e.pageY); 
    });
});
</script>
</body>
</html>

6.判断元素是否存在

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="XY" ></div>
<script>
$(document).ready(function() { 
    if ($('#XY').length){ 
       alert('元素存在!')
    }else{
       alert('元素不存在!')
    }
});
 
</script>
</body>
</html>

7.点击div进行跳转

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<div style="width:200px;height:40px;background:#eee;cursor:pointer;">
    <a href="http://www.cssrain.cn">home</a>
</div>
<script>
$(document).ready(function() { 
    $("div").click(function(){ 
        window.location=$(this).find("a").attr("href");
        return false; 
    });
});
 
</script>
</body>
</html>

8.设置div在屏幕中央

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<style>
 
#XY{
    width:460px;
    height:300px;
    background:#aaa;
}
</style>
</head>
<body>
<div id="XY"></div>
 
<script>
$(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"); 
      return this; 
    } 
    //use
    $("#XY").center(); 
});
 
</script>
</body>
</html>

9.关闭和开启动画效果

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<style>
#XY{
    width:40px;
    height:100px;
    background:#aaa;
}
</style>
</head>
<body>
<button id="XY1" class="box">开始动画</button>
<button id="XY2" class="box">关闭动画</button>
<button id="XY3" class="box">开启动画</button>
<div id="XY" class="box"></div>
 
<script>
$(document).ready(function() { 
    $("#XY1").click(function(){
        animateIt();
    });
    $("#XY2").click(function(){
        jQuery.fx.off = true;
    });
    $("#XY3").click(function(){
        jQuery.fx.off = false;
    });
});
 
function animateIt() {
    $("#XY").slideToggle("slow");
}
</script>
</body>
</html>

10.检测鼠标的右键和左键

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<style>
#XY{
    width:40px;
    height:100px;
    background:#aaa;
}
</style>
</head>
<body>
 
<div id="XY" class="box"></div>
 
<script>
$(document).ready(function() { 
    $("#XY").mousedown(function(e){
        alert(e.which)  // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键
    })
});
 
</script>
</body>
</html>

11.回车提交表单

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<style>
#XY{
    width:40px;
    height:100px;
    background:#aaa;
}
</style>
</head>
<body>
 
<input type="input" />
 
<script>
$(document).ready(function() { 
     $("input").keyup(function(e){
            if(e.which=="13"){
               alert("回车提交!")
            }
        })
});
 
 
</script>
</body>
</html>

12.设置全局的ajax参数

<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<style>
#load{
    display:none;
}
</style>
</head>
<body>
<div id="load">加载中...</div>
<input type="button" id="send1" value="ajax"/>
<div id="resText1"></div>
 
<script>
$(document).ready(function() {
    $('#send1').click(function() {
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",function(data){
                      $("#resText1").empty();
                      $.each(data.items, function( i,item ){
                            $("<img/> ").attr("src", item.media.m ).appendTo("#resText1");
                            if ( i == 3 ) {
                                return false;
                            }
                      });
                 }
        );
   });
 
    $.ajaxPrefilter(function( options ) {
        options.global = true;
    });
    $("#load").ajaxStart(function(){
        showLoading(); //显示loading
        disableButtons(); //禁用按钮
    });
    $("#load").ajaxComplete(function(){
        hideLoading(); //隐藏loading
        enableButtons(); //启用按钮
    });
 
});
 
function showLoading(){
    $("#load").show();
}
function hideLoading(){
    $("#load").hide();
}
function disableButtons(){
    $("#send1").attr("disabled","disabled");
}
function enableButtons(){
    $("#send1").removeAttr("disabled");
}
 
 
</script>
</body>
</html>

13.从元素中除去HTML

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<div>
<p>锋利的<a href="#nogo">jQuery</a></p>
</div>
<script>
(function($) {
$.fn.stripHtml = function() {
　　var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
　　this.each(function() {
　　　　$(this).html( $(this).html().replace(regexp,'') );
　　});
　　return $(this);
}
})(jQuery);
//用法：
$('div').stripHtml();
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,311评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,339评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,671评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,252评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,253评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,031评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,340评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,973评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,466评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,701评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,254评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2赞 345

推荐阅读更多精彩内容

  • jQuery笔记总结篇
    原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,635评论 18赞 503
  • jquery 权威指南 笔记
    第一章 入门 基本功能：访问和操作 dom 元素，控制页面样式，对页面的事件处理，与ajax完美结合，有丰富的插件...
    X_Arts阅读 1,027评论 0赞 2
  • jQuery基础(2)
    (续jQuery基础(1)) 第5章 DOM节点的复制与替换 （1）DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,318评论 0赞 8
  • 暮归
    荫院梢头千簇丽，出墙枝上一点红。燕衔夕阳南蒲过，衣沾芦絮北江空。
    柳尘微阅读 150评论 0赞 4
  • 肩膀得靠的起
    今天下午和武汉来的伙伴们做外场的工作，看到的是一种责任的感觉，在他们工作的时候会说到一个词，责任。做为员工的一个责...
    梦游世界阅读 192评论 0赞 0