8 practical jQuery tips

Source: Internet
Author: User

1) disable the right-click Function

If you want to save your website information, you can use this code to disable the right-click function.

<font><font>$(document).ready(function() {//catch the right-click context menu$(document).bind("contextmenu",function(e) { //warning prompt - optionalalert("No right-clicking!");//delete the default context menureturn false;});});</font></font>

2) use jQuery to set the text size

With this code, you can reset the text size (increase or decrease) as needed ).

<font><font>$(document).ready(function() {//find the current font sizevar 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);  });});</font></font>

3) Open the link in a new window

Using this code will help you open a link in a new window to provide a better user experience.

$(document).ready(function() {//select all anchor tags that have http in the href//and apply the target=_blank$("a[href^='http']").attr('target','_blank');});
$(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')); }); });

5) return to the top Link

This code is very useful for clicking a single page for a long time. You can click "Back to Top" in an important moment.

$(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) obtain the X/y axis of the mouse pointer

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

7) detect the current mouse coordinates

With this script, you can get the mouse coordinates in any web browser.

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

8) image pre-loading

This Code helps you quickly load images or webpages.

<font><font>jQuery.preloadImagesInWebPage = function() {     for(var ctr = 0; ctr<arguments.length; ctr++){jQuery("").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…');});</font></font>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.