8个超实用的jQuery技巧攻略

http://bbs.html5cn.org/forum.php?mod=viewthread&tid=79097&extra=

本文我们将为jQuery用户分享8个超实用的技巧攻略。jQuery是JavaScript最好的库之一，主要用于制作动画、事件处理，支持Ajax及HTML 脚本客户端。此外，jQuery还拥有各种插件，以帮助开发者在最短时间内快速创建网站/网页。

文中分享的这些实用代码，希望你会喜欢。

1）禁用右键单击功能

如果你想为用户节省网站信息，那么开发者可以使用这段代码——禁用右键单击功能。

1. $(document).ready(function() {
   

2. //catch the right-click context menu
   

3. $(document).bind("contextmenu",function(e) {
   

4. //warning prompt - optional
   

5. alert("No right-clicking!");
   

6. 
   

7. //delete the default context menu
   

8. return false;
   

9. });
   

10. });

复制代码

2）使用jQuery设定文本大小

使用这段代码，用户可根据需求重新设定文本尺寸（增加或减少）。

1. $(document).ready(function() {
   

2. //find the current font size
   

3. var originalFontSize = $('html').css('font-size');
   

4. 
   

5. //Increase the text size
   

6. $(".increaseFont").click(function() {
   

7. var currentFontSize = $('html').css('font-size');
   

8. var currentFontSizeNumber = parseFloat(currentFontSize, 10);
   

9. 
   

10. var newFontSize = currentFontSizeNumber*1.2;
    

11. $('html').css('font-size', newFontSize);
    

12. return false;
    

13. });
    

14. 
    

15. //Decrease the Text Size
    

16. $(".decreaseFont").click(function() {
    

17. var currentFontSize = $('html').css('font-size');
    

18. var currentFontSizeNum = parseFloat(currentFontSize, 10);
    

19. 
    

20. var newFontSize = currentFontSizeNum*0.8;
    

21. $('html').css('font-size', newFontSize);
    

22. return false;
    

23. });
    

24. 
    

25. // Reset Font Size
    

26. $(".resetFont").click(function(){
    

27. $('html').css('font-size', originalFontSize);
    

28. });
    

29. });

复制代码

3）在新窗口打开链接

使用这段代码会帮助用户在新窗口打开链接，为用户带来更好的用户体验。

1. $(document).ready(function() {
   

2. //select all anchor tags that have http in the href
   

3. //and apply the target=_blank
   

4. $("a[href^='http']").attr('target','_blank');
   

5. });

复制代码

4）更改样式列表使用这段代码帮助你更改样式列表。

1. $(document).ready(function() {
   

2. $("a.cssSwap").click(function() {
   

3. //swap the link rel attribute with the value in the rel
   

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

5. });
   

6. });

复制代码

5）返回到顶部链接

此代码对于长时间点击单页面非常实用，你可以在重要关头点击“返回顶部”功能。

1. $(document).ready(function() {
   

2. //when the id="top" link is clicked
   

3. $('#top').click(function() {
   

4. //scoll the page back to the top
   

5. $(document).scrollTo(0,500);
   

6. }
   

7. });

复制代码

6）获取鼠标指针的X / Y轴

1. $().mousemove(function(e){
   

2. //display the x and y axis values inside the P element
   

3. $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
   

4. });

复制代码

7）检测当前鼠标坐标

使用这个脚本，你可以在任何网络浏览器获取鼠标坐标。

1. $(document).ready(function() {
   

2. $().mousemove(function(e)
   

3. {
   

4. $('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
   

5. });

复制代码

8）图片预加载

此段代码帮助用户快速加载图片或网页页面。

1. jQuery.preloadImagesInWebPage = function()
   

2. {
   

3. for(var ctr = 0; ctr

4. {
   

5. jQuery("").attr("src", arguments[ctr]);
   

6. }
   

7. }
   

8. To use the above method, you can use the following piece of code:
   

9. $.preloadImages("p_w_picpath1.gif", "p_w_picpath2.gif", "p_w_picpath3.gif");
   

10. To check whether an p_w_picpath has been loaded, you can use the following piece of code:
    

11. $('#p_w_picpathObject').attr('src', 'p_w_picpath1.gif').load(function() {
    

12. alert('The p_w_picpath has been loaded…');
    

13. });

复制代码