JavaScript and JQuery code snippets (1) _ jquery

JavaScript and JQuery code snippets. If you like jquery, refer to them. (1) how to use JQuery to refresh an image?
Note: We all know that when we request a resource (such as a webpage or image), if the resource is cached in the browser, the request returns a cached copy, it is not the resource we want to obtain (the resource content has been updated ), at this time, the most common method is to add a query string "ran =" + Math after the requested page or the src of the image. random (). In this way, the resource of the latest version will be requested!
Code:

The Code is as follows:

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

(2) How can I use JQuery to check whether an image is fully loaded?
Note: When a page is not fully loaded, calling the JavaScript operation often fails because the DOM has not been parsed. It can be found in windoiw. in the onload method, execute the JavaScript/JQuery method to be executed (the image must be loaded at this time, and you can get its height and other attributes), or at $ (function (){}) ).
If you want to check whether the image is loaded before using the image, you can use the following code:
Code:

The Code is as follows:

Var imgsrc = "img/img.png ";
$ (ImageObj). load (function ()
{
Alert ('image loaded successfully ');
}). Error (function ()
{
Alert ('image loading error ');
}). Attr ('src', imgsrc );

(3) How can I use JQuery to check whether multiple images are fully loaded?
Note: As shown above, there are 10 images to be loaded on your page. You can set a variable to record the number of images to be loaded. When the variable is equal to the total number of images, loading will be done!

The Code is as follows:

Var totalImages = 10;
Var loadedImages = 0;
$ ('Img '). load (function ()
{
++ LoadedImages; // Closure
If (loadedImages = totalImages)
{
Alert ('all images are loaded! ');
}
});

(4) How to Use JQuery to sort Unordered Lists (ul?
Note: Sometimes we need to sort an unordered list (ol can be used), but ul can provide more customization functions and customize sorters.
Code: (1) the list to be sorted is:

The Code is as follows:

• Cloud


• Sun


• Rain


• Snow

(2) JQuery code:

The Code is as follows:

Var items = $ ('. to_order li'). get (); // obtain all li
Items. sort (function (a, B) // call the javascript built-in function sort. The parameter is a closure function, that is, the sequencer.
{
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 the set of queues
{
Ul. append (li );
});

(5) How do I disable right-clicking (contextmenu )?
Note: You may not be able to use the right-click button to avoid copying or saving the image as an object.

The Code is as follows:

$ (Function (){
$ (Document). bind ('textmenu ', function (e ){
Return false;
});
});

(6) How does one image fade out and then fade in to another image?
Note: It is time to show some cool effects. The Fade-in and fade-out effects can be achieved using the FadeIn and FadeOut effects of JQuery.

The Code is as follows:

$ ('Img '). fadeOut (function (){
$ (This). load (function (){
$ (This). fadeIn ();
}). Attr ('src', AnotherSource );
});

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

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
I look forward to your attention. Haha!