《鋒利的jquery》源碼整理——jquery技巧上

時間 2019-12-14

標籤鋒利的jquery 源碼整理 jquery 技巧欄目 JQuery 简体版

原文原文鏈接

在看《鋒利的jquery》這本書的時候，書末尾總結了jquery的一些用法技巧，感受很實用，先收藏着之後用到，能夠借鑑看看。javascript

一，資源（在w3cfuns資源中能夠找到初版和第二版）css

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

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

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

二，代碼ajax

1，禁用頁面的右鍵菜單chrome

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

2，判斷瀏覽器類型json

$(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，輸入框文字輸入和失去焦點api

<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>