8个对程序员来说有用的jQuery小贴士和技巧

  5) 回到顶端链接

  That is very common function you can see on eve site nowadays is ”
Back to Top”. This functionality is very useful for long pages for make
short in a single click. Visit this code below: –

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

  6) 获取鼠标光标的x和y轴

  You can find the values of X and Y coordinator of mouse pointer.
Code is blow : –

1 2 3 4 $().mousemove(function(e){     //display the x and y axis values inside the P element     $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); });

  2) 利用jQuery调节文字大小

  使用此代码,客户可以重新网址上文字的深浅(增大和减削卡塔尔

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 $(document).ready(function() {     //find the current font size     var originalFontSize = $('html').css('font-size');       //Increase the text 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;     });       //Decrease the Text Size     $(".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;     });       // Reset Font Size     $(".resetFont").click(function(){     $('html').css('font-size', originalFontSize);   }); });

  3) 在新的Windows打开链接

  Try this code and increase your site impressions because using this
jquery code users will go on new window after clicking on any link of
your site. Code is below: –

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

  8) 在jQuery中预加载图片

  此图像预加载的脚本有援救非常高效加载图像或网页。你不要等待图像加载。代码:

1 2 3 4 5 6 7 8 9 10 11 12 13 jQuery.preloadImagesInWebPage = function() {      for(var ctr = 0; ctr<arguments.length; ctr++) { jQuery("<img alt="">").attr("src", arguments[ctr]); } } To use the above method, you can use the following piece of code: $.preloadImages("image1.gif", "image2.gif", "image3.gif"); To check whether an image has been loaded, you can use the following piece of code: $('#imageObject').attr('src', 'image1.gif').load(function() { alert('The image has been loaded…'); });

) 禁止使用鼠标右键单击
jQuery技术员可以选用此代码在网页上禁止使用鼠标右键点击。 12345678910
$(document).ready( function () { //catch the right-click
context…

  7) 检查测量试验当前鼠标坐标

  使用这几个剧本,你能够在jQuery所帮忙的任何Web浏览器找到当前鼠标的坐标。代码如下:

1 2 3 4 5 $(document).ready(function() { $().mousemove(function(e) { $('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY); });

});

 1) 禁止使用鼠标右键单击

  jQuery工程师可以行使此代码在网页上禁止使用鼠标右键点击。

1 2 3 4 5 6 7 8 9 10 $(document).ready(function() {     //catch the right-click context menu     $(document).bind("contextmenu",function(e) {                         //warning prompt - optional         alert("No right-clicking!");           //delete the default context menu         return false;     }); });

  4) Style Sheets Swap

  Swap style sheets using this code and the “Style sheets swap” script
 is below: –

1 2 3 4 5 6 $(document).ready(function() {     $("a.cssSwap").click(function() {         //swap the link rel attribute with the value in the rel            $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));     }); });

发表评论

电子邮件地址不会被公开。 必填项已用*标注