jquery中几个小技能 _Web前端

jquery中几个小技巧
   再次小结若干个jquery的小技巧

1 使用load加载
   可以使用load去加载外部文件

<!-- File name index.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
		libs/jquery/1.7.1/jquery.min.js"></script>
		<title>Load external files with jQuery Demo</title>
		<style type="text/css">
			.load_files {
				padding: 5px;
				font-weight: bold;
				background-color: #A9F5A9;
				border: solid #333333 1px;
				cursor: pointer;
			}
			/* 装载中的图片*/
			.loading {
				width: 20px;
				height: 20px;
				background-image: url('loader.gif');
				display: none;
			}

		</style>
		<script type="text/javascript">
			$(function() {
				$(".load_files").click(function() {
					$(this).hide();
					/*当点加载按钮时,显示加载的图案*/
					$(".loading").show();
										$(".loaded_files").load('external.html', function() {

      //加载完毕隐藏加载图形						$(".loading").hide();
											});
				});
			});

		</script>
	</head>
	<body>
		<h2>Load external files with jQuery</h2>
		<button class="load_files">
			Load Files
		</button>
		<div class="loading"></div>
		<div class="loaded_files"></div>
	</body>
</html>

2 让用户自由的改动字体

$(document).ready(function() {
	//获得当前字体大小	
var originalFontSize = $('html').css('font-size');


	//增加字体大小
	$(".increaseFont").click(function() {
		var currentFontSize = $('html').css('font-size');
		var currentFontSizeNumber = parseFloat(currentFontSize, 10);
		//设置新的字体大小
		var newFontSize = currentFontSizeNumber*1.2;
		$('html').css('font-size', newFontSize);
		return false;
	});

	//减少字体大小
	$(".decreaseFont").click(function() {
		var currentFontSize = $('html').css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
				var newFontSize = currentFontSizeNum*0.8;
		$('html').css('font-size', newFontSize);
		return false;
	});

	//重新恢复字体大小 
	$(".resetFont").click(function(){
	$('html').css('font-size', originalFontSize);
  });
});

3 在新窗口中打开连接

   $(document).ready(function() {
	
	$("a[href^='http']").attr('target','_blank');
});

4 禁止右键

//check that the DOM is ready
$(document).ready(function() {
	//catch the right-click context menu
	$(document).bind("contextmenu",function(e) {				 
		//warning prompt - optional
		alert("No right-clicking!");
					 
		//cancel the default context menu
		return false;
	});
});

5 快速将用户从底部带到顶部

$(document).ready(function() {
	//when the id="top" link is clicked
	$('#top').click(function() {
		//scoll the page back to the top
		$(document).scrollTo(0,500);
	}
});

1 楼 lvwenwen 2012-02-24

2 楼 gengqi88 2012-02-25