Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > jQuery tips that may be used in development_jquery

jQuery tips that may be used in development_jquery

WBOY
Release： 2016-05-16 16:56:23
Original
972 people have browsed it

1) Disable right-click
When developing web applications, there are some situations where it is necessary to disable the right-click function. Using this code, jQuery developers can disable right mouse clicks on web pages. The code is as follows:

Copy code The code is as follows:

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

2) Text scaling
Using the following code, users can increase or zoom the font size in the web page as needed. The code is as follows:
Copy code The code is as follows:

$(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) in Open Links in New Window
With this jQuery code, any link that a user clicks on your website will open in a new window. As follows:
Copy code The code is 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 to skin a website? The following code can help you implement the style sheet switching function, as follows:
Copy the code The code is as follows:

$(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) Back to top
This is a very common back to top function in websites nowadays, especially suitable for long pages. The code is very simple, as follows:
Copy code 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) Get the X, Y coordinates of the mouse
The following code can get the mouse’s X, Y coordinates, the code is as follows:
Copy code The code is as follows:

$(). 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) Detect the coordinates of the current mouse
Use the following code to get the coordinates of the current mouse anywhere that supports jQuery, as follows:
Copy code The code is as follows:

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

8) Preload images
This image preload snippet allows you to quickly preload images without waiting. The code is as follows:
Copy code The code is as follows:

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

Calling method:
Copy code The code is as follows:

$.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...');
});
Related labels：
jQuery技巧
source：php.cn
Previous article：Detailed analysis of javascript operation referer_javascript skills Next article：A preliminary study on event proxy in javascript_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Record query under partial value conditions - SQL skill sharing I have a table called zipcode which has a column called code. The Code column contains the...
From 2024-04-06 16:01:26
0
1
395
What causes CSS text animations to jitter excessively on load? I tried every trick I could find, but the animation is still very choppy. I tried followin...
From 2024-04-01 23:54:24
0
1
322
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template