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. //delete the default context menu

  7. return false;

  8. });

  9. });

复制代码

2)使用jQuery设定文本大小

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

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

  2. //find the current font size

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


  4. //Increase the text size

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

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

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


  8. var newFontSize = currentFontSizeNumber*1.2;

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

  10. return false;

  11. });


  12. //Decrease the Text Size

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

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

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


  16. var newFontSize = currentFontSizeNum*0.8;

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

  18. return false;

  19. });


  20. // Reset Font Size

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

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

  23. });

  24. });

复制代码

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. });

复制代码