jquery and JavaScript common code fragment collation

(a) How to use jquery to refresh a picture?
Description: 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 returns a cached copy, not the resource we want to acquire (the resource content has been updated), The most common method at this point is to add a query string "ran=" + math.random () after the requested page or the image's SRC, which will request the latest version of the resource!
Code:

$ (imageobj). attr (' src ', $ (imageobj). attr (' src ') + '? ' + math.random ());

(b) How to use jquery to see if a picture is fully loaded?
Description: Invoking a JavaScript operation often fails when a page is not loaded completely, because the DOM is not resolved at this time. You can perform the Javascript/jquery method you want to execute in the Windoiw.onload method (at which point the picture is definitely loaded, can get properties such as its height), or it can be executed in $ (function () {}) (when the DOM is parsed, However, the requested resource may not be fully loaded.
If you want to check whether the picture is loaded before using the picture, you can use the following code:
Code:

var imgsrc = "Img/img.png";
$ (imageobj). Load (function ()
{
Alert (' Picture loading complete ');
). Error (Function ()
{
Alert (' Picture loading error ');
}). attr (' src ', imgsrc);

(c) How to use jquery to see if multiple pictures are fully loaded?
Description: As above, add your page has 10 pictures to load, at this time you can set a variable record load picture number, when the variable equals total picture number, loading is done!

var totalimages = 10;
var loadedimages = 0;
$ (' img '). Load (function ()
{
++loadedimages; Here is the closure
if (loadedimages = = totalimages)
{
Alert (' All pictures loaded! ');
}
});

(d) How to use jquery to sort without sequence list (UL)?
Description: Sometimes we need to order an unordered list (UL) sort (of course, we can use ordered listing OL), but UL can provide more customization functions, and can customize the sequencer.
Code: (1) The sorted list is:

<ul class= ' To_order ' >
<li>cloud</li>
<li>sun</li>
<li>rain</li>
<li>snow</li>
</ul>

(2) The jquery code is:

var items = $ ('. To_order li '). get (); Get all pending Li
Items.Sort (function (a,b)//Call JavaScript built-in function sort, 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 for the collection of line
{
Ul.append (LI);
});

(v) How to prohibit the right mouse button (ContextMenu)?
Description: Sometimes we want users to not use the right mouse button, so as to avoid copying, save as such behavior.

$ (function () {
$ (document). Bind (' ContextMenu ', function (e) {
return false;
});
});

(vi) How to achieve a picture fade (fadeout), another picture fade (FadeIn) effect?
Description: It is time to show some cool effect, fade effect can use jquery Fadein and fadeout effect to achieve.

$ (' img '). fadeout (function () {
$ (this). Load (function () {
$ (this). FadeIn ();
}). attr (' src ', anothersource);
});

(vii) Detect if a DOM object exists?
Description: Detects whether a DOM object exists before it is manipulated.

Method One
if ($ (' #elementId '). Length)
{
Exist
}
Method Two
if ($ (' #elementId '). Size () > 0)
{
Exist
}
Method Three
if ($ (' #elementId ') [0])
{
Exist
}
Method Four ~ Method n
Expect everyone to add, haha!

$ ("a[href= '/fyou ']"). html (); Get the hyperlink for the specified link

7//$ ("A[href]")//hyperlink with href attribute

(8) Change the object's CSS

1 $ ("#61dh a"). css (' color ', ' #123456 ');

2 $ (' #sp '). Parent (). CSS (' background ', ' #000 '); #sp的父原素的背景变黑

(9) Clear Form form Reset

1 $ ("#reset"). Click (function () {

2 $ ("#form") [0].reset ()

3})

(10) Binding events

Functionsecondclick () {

$ ("#dv1"). Unbind (); To dismiss an object event

Alert ("Second click!");

04}

$ ("#dv1"). Bind ("MouseOver", Secondclick);

06

Modified//$ ("#dv1"). Trigger ("click"); Automatically trigger events

08//Add a click event for all the paragraphs, including the elements that are added later

$ ("P"). Live ("Click", Function () {

Alert ($ (this). html ());

11});

(11) Animation effect Customization animate

1 $ ("#go"). Click (function () {

2

3 $ ("#block"). Animate ({height:300,width: ' +800 ', marginleft: ' +=300 '}, "slow");

4});

5

6//+800 said the increase to 800 +=800 said on the original base plus 800

7//$ (". Panel"). Slidetoggle ("slow"); Upper and lower integrated <span style= "Color:rgb (31, 73, 125); font-family: ' Microsoft Yahei '; > </span>

(a) JavaScript native binding event

1 var dg = document.getElementById ("DG");

2 Dg.onmouseover =function () {

3

4 Alert ("good");

5

6}

Return false in JavaScript is the way to jump out of this!

() jquery Added Delete class

1 $ (thisobj). AddClass ("selected");

2 $ (thisobj). Parents ("ul"). Find ("Li"). Removeclass ("selected");

(15) Select value

1 var pp = $ ("#provide option:selected"). Val ();

2//or

3 var area0 = $ ("select[name= ' prov ')"). Val ();

(16) inserting content in an element (can be HTML, can be a string)

Insert content at the end of each P element:

1 $ ("button"). Click (function () {

2 $ ("P"). Append ("<b>Helloworld!</b>");

3});

Click here for quick jump "javascript" common JQuery code snippets and JavaScript snippets (next).

2. JavaScript article

(1) Find HTML elements by ID

1 var x=document.getelementbyid ("Intro");
This example looks for the element of id= "main" and then looks for all the <p> elements in "main":

1 var X=document.getelementbyid ("main");

2 var y= x.getelementsbytagname ("P");
var xx = document.getelementsbyname (' name ');

(2) This example changes the attributes of an element

1

2 document.getElementById ("image"). src= "Landscape.jpg";

(3) The JavaScript event assigns the OnClick event to the button element:

1 <button id= "mybtn" > Press me </button>

2 <script>

3 document.getElementById ("Mybtn"). Onclick=function () {displaydate ()};

4 </script>

(4) Change CSS

1 <p id= "P2" >hello world!</p>

2

3 <script>

4 document.getElementById ("P2"). style.color= "Blue";

5 </script>

(5) Change the contents of the inside

1 <p id= "P2" >hello world!</p>

2

3 <script> document.getElementById ("P2"). InnerHTML = "12333333333333";

4 </script>