jquery中几个小技巧

jackyrong

浏览: 7935685 次
性别:
来自: 广州

最近访客更多访客>>

尘与飞

深情痞子

Crow00

zihai367

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax/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);
	}
});

4
顶

0
踩

分享到：

oracle导入数据时20001错误的解决 | .NET 嵌入式版4.2发布：关键更新抢先看

2012-02-24 10:50
浏览 2354
评论(2)
分类:Web前端
查看更多

2 楼 gengqi88 2012-02-25

1 楼 lvwenwen 2012-02-24

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery中几个小技巧

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery中几个小技巧

评论

发表评论

相关推荐

微信开发工具中时间问题的小坑

三篇不错的介绍CSS GRID的文章

双因素认证（2FA）教程

es6 中的export

markdown中的空格

(转）讲真，别再使用JWT了

(转）手把手教你WebStorm+chrome实现时时调试刷新

IntelliJ Idea 2017 免费激活方法

前端框架这么多，该何去何从？

记录一个HTML 5画拓扑图的商业公司

vue 2例子学习收集

（收藏）虚拟DOM内部是如何工作的

最近看到的几篇精彩JAVASCRIPT博客文章推荐

jsonp 跨域原理：深入浅出 jsonp

(转）深度长文-JavaScript数组所有API全解密

(收藏）网页导出PDF的方案

Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素

国内一个不错的大屏UI设计厂家

canvas仿芝麻信用分仪表盘

(转）CSS 变量教程

最近访客更多访客>>