5 Helpful jQuery Tricks（五个有用的jQuery技巧）

在开始之前，我们简单的介绍一下到底什么是jQuery？

jQuery是一个优秀的Javascript框架。它是快速的，简洁的，轻量级的js库，使用户能够更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。它能够兼容各种浏览器，一直坚持的核心理念是WRITE LESS，DO MORE（写的更少，做的更多）。

上面的话看上去很官方，但是这是我们必须要了解的。jQuery能够实现很多的页面效果，下面的五个技巧是我们经常要用到的，所以简单的给大家翻译一下，供大家一起学习吧。

1.改变字体的大小

允许用户调整网站字体的大小具有很多的优点，可以更好的提高用户体验。下面使用jQuery给大家展示一下如何使用它。

//check that the DOM is ready
$(document).ready(function() {
	//get the current font size
	var originalFontSize = $('html').css('font-size');

	//Increase the font size
	$(".increaseFont").click(function() {
		var currentFontSize = $('html').css('font-size');
		var currentFontSizeNumber = parseFloat(currentFontSize, 10);
		//increases the font- could be set to a value from 
		//the user as well
		var newFontSize = currentFontSizeNumber*1.2;
		$('html').css('font-size', newFontSize);
		return false;
	});

	//Decrease the Font Size
	$(".decreaseFont").click(function() {
		var currentFontSize = $('html').css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		//decreases font.  Could be set to a value from
		//the user as well
		var newFontSize = currentFontSizeNum*0.8;
		$('html').css('font-size', newFontSize);
		return false;
	});

	// Reset Font Size
	$(".resetFont").click(function(){
	$('html').css('font-size', originalFontSize);
  });
});

2.在新窗口中打开链接

也许你跟我一样，在打开外部链接时不喜欢多次验证就可以实现。但是在XHTML 1.0中又没有“_blank”的标签属性。并且网站的拥有者也想在新窗口中打开所有外部链接时，能够保持访问者仍然在自己的网站上。就这jQuery而言,将允许在新窗口中打开所有的外部链接。

//check that the DOM is ready
$(document).ready(function() {
	//select all anchor tags that have http in the href
	//and apply the target=_blank
	$("a[href^='http']").attr('target','_blank');
});

好了！现在，所有的外部链接将可以打开一个新窗口,允许用户留在原页面。如果你使用了大量的外部文档链接如PDF或DOC文件可以创建一些规则在新窗口中来加载这些文件。

3.互换样式表　　　　

不仅允许用户改变页面字体大小，而且您还允许用户能够选择不同的主题样式。

//check that the DOM is ready
$(document).ready(function() {
       $("a.cssSwap").click(function(){ 
                //swapthe link rel attributewith the value in the rel    

               $('link[rel=stylesheet]').attr('href', $(this).attr('rel'));
       }); 
});

最后亲自体验一下互换样式表是怎么工作的。

4. 禁用右键

通常禁用右键是为了防止用户直接复制页面的信息或者是你想创建一个自己的独特的右键功能，下面我们来看一下是如何实现的：

//check that the DOM is ready

$(document).ready(function() {
       //catch the right-click contextmenu
       $(document).bind("contextmenu",function(e){                              

                //warningprompt - optional
               alert("Noright-clicking!");
                                       

                //cancelthe default contextmenu
                returnfalse;
       });
});

jQuery能够更简单、容易的处理右键的单击事件。

5. 返回顶部链接

对于大篇幅的页面，可以通过增加“返回顶部”的链接来使用户方便地返回到页面顶部。这是一个简单的JavaScript实现的效果，我们也可以通过jQuery运用滚动效果增添一点点小技巧。

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

对于大篇幅的页面来说，这是一个必备的功能。

当你想成为熟练掌握jQuery网页开发者，一定会发现更多的jQuery的使用技巧。最后一句，用我的话说：“革命尚未成功，同志仍需努力。”

这是我第一次翻译文章，好困难啊，在兴奋中开始，在磕磕绊绊中结束，哎，真是：革命尚未成功，同志仍需努力。

 

英语原文地址：

http://www.learncomputer.com/5-helpful-jquery-tricks/