JavaScript and JQuery practical code snippets (1)_jquery

(1) How to refresh an image using JQuery?
Note: We all know that when we request a resource (such as a web page, picture, etc.), if the resource is cached in the browser, the request will return a cached copy, not the resource we want to obtain. (The resource content has been updated). The most common method at this time is to add a query string "ran=" Math.random() after the requested page or the src of the image, so that the latest resource will be requested. Version resources!
Code:

Copy code The code is as follows:

$(imageObj).attr( 'src',$(imageObj).attr('src') '?' Math.random());

(2) How to use JQuery to check whether an image is fully loaded?
Note: Calling JavaScript operations when a page is not fully loaded will often fail because the DOM has not been parsed at this time. The JavaScript/JQuery method to be executed can be executed in the windiw.onload method (the image must be loaded at this time, and its height and other attributes can be obtained), or it can be executed in $(function(){}) (although the DOM is parsed at this time Completed, but not all requested resources may be loaded).
If you want to check whether the image is loaded before using it, you can use the following code:
Code:

Copy code The code is as follows:

var imgsrc = "img/img.png";
$(imageObj).load(function()
{
alert(' Image loading completed');
}).error(function()
{
alert('Image loading error');
}).attr('src',imgsrc);

(3) How to use JQuery to check whether multiple images are fully loaded?
Instructions: The instructions are as above. There are ten pictures to be loaded in your page. At this time, you can set a variable to record the number of loaded pictures. When the variable is equal to the total number of pictures, the loading is complete!

Copy code The code is as follows:

var totalImages = 10;
var loadedImages = 0 ;
$('img').load(function()
{
loadedImages; // Closure here
if(loadedImages == totalImages)
{
alert ('All images have been loaded!');
}
});

(4) How to use JQuery to sort an unordered list (ul)?
Note: Sometimes we need to sort an unordered list (ul) (of course you can use an ordered list ol), but ul can provide more customization functions and can customize the sorter.
Code: (1) The list to be sorted is:

Copy code The code is as follows:

• cloud


• sun


• rain


• snow

(2) The JQuery code is:

Copy code The code is as follows:

var items = $('.to_order li').get(); //Get all li to be sorted
items.sort (function(a,b) //Call the javascript built-in function sort, the parameter is a closure function, that is, the sorter
{
var keyA = $(a).val();
var keyB = $(b).val();
if(keyA < keyB) return -1;
if(keyA > keyB) return 1;
return 0;
});
var ul = $('.to_order');
$.each(items,function(i,li) //At this time, items is a queued collection
{
ul.append( li);
});

(5) How to disable the right mouse button (contextmenu)?
Note: Sometimes we hope that users cannot use the right mouse button to avoid copying, saving as, etc.

Copy code The code is as follows:

$(function(){
$(document ).bind('contextmenu',function(e){
return false;
});
});

(6) How to fade out a picture ( After FadeOut), what is the effect of another picture fading in (FadeIn)?
Note: It’s time to show some cooler effects. The fade-in and fade-out effects can be achieved using JQuery’s FadeIn and FadeOut effects.

Copy code The code is as follows:

$('img').fadeOut(function(){
$(this).load(function(){
$(this).fadeIn();
}) .attr('src',AnotherSource);
});

(7) Detect whether a DOM object exists?
Note: Before operating on a DOM object, first check whether it exists.

Copy code The code is as follows:

//Method 1
if($(' #elementId').length)
{
//Exists
}
//Method 2
if($('#elementId').size() > 0)
{
//Exists
}
//Method 3
if($('#elementId')[0])
{
//Exists
}
//Method 4~Method N
Looking forward to your additions, haha!