《锋利的jquery》源码整理——jquery技巧上
在看《锋利的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>
