Several jQuery tips and tips that may be used during development

Today, we will share some useful tips and tips for jQuery developers.JQueryIs one of the best JavaScript libraries for simplifying animation, event processing, and supporting Ajax andHTMLClient script. There are a large number of jQuery plug-ins in the network to help you easily create a website in a short time.

Today, we have selected several useful code snippets for jQuery developers. Hope you can use the code in your next project.

Articles you may be interested in

• 10 Most Popular Front-end development blog posts in 2013
• 35 amazing CSS3 animation demos
• 8 amazing HTML5 and JavaScript Effects
• The most popular Web Design Trends in 2014
• My friends are stunned! 8 superb Web effects

1) Disable right-click

When developing a Web application, you must disable the right-click function in some cases. With this code, jQuery developers can disable right-click on the webpage. The Code is as follows:

$(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;});});

2) text Scaling

Use the following code to increase or scale the font size of a webpage. The Code is as follows:

$(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);  });});

3) Open the link in a new window

With this jQuery code, users will click any link to your website and it will be opened in a new window. As follows:

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

4) style sheet Switching

Do you know how the website skin change is made? The following code helps you implement the style sheet switching function:

$(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

This is a frequently used back-to-top function for websites. It is especially suitable for long pages. The Code is as follows:

$(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 and Y coordinates of the mouse

The following code obtains the X and Y coordinates of the mouse:

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

7) Check the coordinates of the current mouse

Use the following code to obtain the coordinates of the current mouse in any place that supports jQuery:

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

8) pre-load images

This image preload segment allows you to quickly pre-load images without waiting. The Code is as follows:

jQuery.preloadImagesInWebPage = function() {    for(var ctr = 0; ctr<arguments.length; ctr++){        jQuery("").attr("src", arguments[ctr]);    }}

Call method:

$.preloadImages("image1.gif", "image2.gif", "image3.gif");

Determine whether the image has been loaded:

$('#imageObject').attr('src', 'image1.gif').load(function() {alert('The image has been loaded…');});

　　

Articles you may be interested in

• A well-selected jQuery image effect plug-in
• Excellent jQuery Ajax paging plug-ins and tutorials carefully selected
• Excellent jQuery text special effect plug-ins and tutorials carefully selected
• Recommended 8 awesome responsive jQuery slide plug-ins
• Carefully selected 12 excellent jQuery accordion plug-ins and tutorials

Link to this article: Several jQuery tips and tips used in Web Development

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

This article from [dream sky (http://www.cnblogs.com/lhb25 )]