《锋利的jquery》源码整理——jquery技巧上

浏览数：52 / 时间：2015年06月09日

        在看《锋利的jquery》这本书的时候，书末尾总结了jquery的一些用法技巧，感觉很实用，先收藏着以后用到，可以借鉴看看。

  一，资源（在w3cfuns资源中可以找到第一版和第二版）

         《锋利的jquery》： http://pan.baidu.com/share/link?shareid=1725756399&uk=4245516461 （PDF）

                                       http://www.readfar.com/books/5520ce503063e1f304000696（ebup）

         源码：http://pan.baidu.com/share/link?shareid=104027&uk=2030367496

 二，代码

      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>

　　

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 返回顶部 class style log com 代码 src http java 返回顶部 class style log com 代码 src http java

相关文章

随机文章

您可能还喜欢

您可能还喜欢