《锋利的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>

时间： 2024-10-25 13:29:23

《锋利的jquery》源码整理——jquery技巧上的相关文章

jQuery源码分析-jQuery中的循环技巧

Js代码作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:[email protected] 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 前记:本文收集了jQuery中出现的各种遍历技巧和场景 Js代码 // 简单的for-in(事件) for ( type in events ) { } Js代码 // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度 // 但是如果遍历HTMLCollection时,性能提升非常

JQuery源码解析-JQuery的工具方法(2)

这篇对下面的方法进行讲解: isFunction():是否为函数 isArray():是否为数组 isWindow():是否为window isNumeric()是否为数字 type():判断数据类型 isPlainObject():是否为对象自变量 isEmptyObject():是否为空的对象 isFunction方法: 这个方法很简单,判断对象是否为函数,返回bool类型,看一下源码: // See test/unit/core.js for details concerning isFu

JQuery源码解析-JQuery的工具方法(5)

下面对最后这几个方法进行讲解. guid():唯一表示(内部) proxy():改变this指向 access(): 多功能值操作 now():当前时间 swap():css交换(内部) guid: 这个属性是对事件进行控制的,例如每次对dom元素进行绑定事件的时候,会通过这个属性进行绑定,这个属性每次自增,产生一个唯一的标示,所以对dom元素进行事件解绑等操作的时候,通过这个属性就可以找到. 源码: // A global GUID counter for objects guid: 1, p

JQuery源码解析-JQuery的工具方法(4)

下面对这些方法进行讲解 each():遍历集合 trim():去前后空格 makeArray():类数组转换真数组 inArray():数组版indexOf merge():合并数组 grep():过滤新数组 map():映射新数组 each方法: each是遍历集合用的方法,也是一个加强版的循环操作.例如: var arr = { Name: 'jam', Age: 15 }; $.each(arr, function (key, val) { console.log(key + ":&quo

JQuery源码解析-JQuery的工具方法(3)

这篇文章主要对下面这几个方法进行解释 error();抛出异常 parseHTML():解析节点 parseJSON():解析JSON parseXML:解析XML noop():空函数 globalEval():全局解析JS camelCase():转驼峰 nodeName():是否为指定节点(内部) error:方法: error方法的作用是抛出一个自定义异常,内部直接调用了原生解释的throw new Error error: function( msg ) { throw new Err

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

接上:http://www.cnblogs.com/akou/p/4461557.html 代码: 13.获取选中的下拉框 <!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; chars

{{jQuery源码分析}}jQuery对象初始化的多种传参数形式

jQuery对象初始化的传参方式包括:1.$(DOMElement)2.$('<h1>...</h1>'), $('#id'), $('.class') 传入字符串, 这是最常见的形式, 这种传参数经常也传入第二个参数context指定上下文,其中context参数可以为$(...), DOMElement3.$(function() {}); <===> $(document).ready(function() { });4.$({selector : '.class

js菜鸟进阶-jQuery源码分析(1)-基本架构

导读: 本人JS菜鸟一枚,为加强代码美观和编程思想.所以来研究下jQuery,有需要进阶JS的同学很适合阅读此文!我是边看代码(jquery2.2.1),边翻“javascript高级程序设计”写的,有很多基本知识点我都写了书本对应的章节.有分析得不好的还请各位多多指教,更正! 希望我的分析对大家有所帮助,谢谢! 一.代码构成 (function(global, factory){ if ( typeof module === "object" && typeof mo

jQuery源码解析（jQuery对象的实例属性和方法）

1.记录版本号以及修正constructor指向 jquery: core_version, constructor: jQuery, 因为jQuery.prototype={ ... } 这种写法将自动生成的jQuery.prototype.constructor属性覆盖删除,所以需要重新修正(指向其构造函数 jQuery).2.init() 初始化方法: init()方法最终返回的是this -jQuery(其实是jQuery.prototype.init)方法的实例对象. 实例对象继承