Share 12 useful jquery codes

Share 7 useful jquery codes

This article mainly introduces 7 useful jquery skills to share, this article gives a new window to open links, set high columns, jquery preloaded images, disable the right mouse button, set a timer and other useful code snippets, the need for friends can refer to the next

jquery is an excellent JavaScript library that is well-known among web developers and web designers, helping web designers develop a lot of creative and beautiful web pages.

Here are some tips I've collected that will help you improve the creativity and functionality of your site's layout and application.

First, open the link in a new window

With this code, when you click on a hypertext link, it opens in a new window, giving the user a better experience:

$ (document). Ready (function () {  //Select all anchor tags  that has http in the href c5>//and apply the Target=_blank  $ ("a[href^= ' http ']"). attr ('  target','_blank') ;

Second, set the timer

$ (document). Ready (function () {  window.settimeout () () {    //  some code   - );});

Third, set the column of equal height

Use the following code to make every column of your Web application the same height:

<divclass="Equalheight"style="border:1px Solid"> <p>first line</p> <p>second line</p> <p>third line</p></div><divclass="Equalheight"style="border:1px Solid"> <p>column two</p></div><script src="Http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script><script>$ (document). Ready (function () {Equalheight ('. Equalheight');});//global variable, this would store the highest height valuevarMaxHeight =0; function Equalheight (col) {//Get all the element with class = ColCol =$ (col);//Loop all the colCol.each (function () {//Store the highest value  if($( This). Height () >maxheight) {MaxHeight= $( This). Height (); } }); //Set the heightcol.height (maxheight);}</script>

Iv. jquery pre-load image

This technique can speed up the loading of pictures on your page:

Jquery.preloadimagesinwebpage =function () { for(varCTR =0; Ctr & lt; Arguments.length; ctr++) {jQuery (""). attr ("src", arguments[ctr]); }}//How to use:$.preloadimages ("Image1.gif","Image2.gif","Image3.gif");//Check if the picture is loaded$('#imageObject'). attr ('src','Image1.gif'). Load (function () {alert ('The image has been loaded ...');});

V. Positioning elements in the middle of the page

<div id="Foo"style="width:200px;height:200px;background: #ccc;"></div><script src="Http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script><script type="Text/javascript">JQuery.fn.center=function () { This. CSS ("position","Absolute");  This. CSS ("Top", ($ (window). Height ()- This. Height ())/2+ $ (window). scrolltop () +"px");  This. CSS (" Left", ($ (window). Width ()- This. width ())/2+ $ (window). ScrollLeft () +"px"); return  This;}//Use the above function as:$('#foo'). Center ();</script>

Vi. Disabling the right mouse button

// 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 ; });});

Vii. counting the number of child elements

<div id="Foo"> <div id="Bar"></div> <div id="Baz"> <div id="Biz"></div> <span><span></span></span> </div></div><script src="Http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script><script type="Text/javascript">//JQuery code to count child elements $ ("#foo > div"). Size ()Alert ($ ("#foo > Div"). Size ())</script>

Viii. changing the list of styles

This code will help you change the list of styles.

$ (document). Ready (function () {$ ("a.cssswap"). Click (function () {   //   $ ('link[rel=stylesheet]'). attr ('href  ' , $ (this). attr ('rel'));  }   );

Nine. Use jquery to set the text size

By adding this code, the user can reset the text size (increase or decrease) as needed.

$ (document). Ready (function () {//find the current font size varOriginalfontsize = $ ('HTML'). CSS ('font-size');//increase the text size$(". Increasefont"). Click (function () {varCurrentfontsize = $ ('HTML'). CSS ('font-size'); varCurrentfontsizenumber = parsefloat (Currentfontsize,Ten);varNewfontsize = currentfontsizenumber*1.2; $('HTML'). CSS ('font-size', newfontsize); return false; });//Decrease the Text Size$(". Decreasefont"). Click (function () {varCurrentfontsize = $ ('HTML'). CSS ('font-size'); varCurrentfontsizenum = parsefloat (Currentfontsize,Ten);varNewfontsize = currentfontsizenum*0.8; $('HTML'). CSS ('font-size', newfontsize); return false; });//Reset Font Size$(". Resetfont"). Click (function () {$ ('HTML'). CSS ('font-size', originalfontsize); }); });

X. Detection of the current mouse coordinates

Using this JS code, you can get mouse coordinates in any browser.

$ (document). Ready (function () {$ (). MouseMove (function (e) {$ ("). HTML ("     "" "+ E.pagey);});  

Xi. get the X/y axis of the mouse pointer

// display the x and Y axis values inside the P element $ ('P'). html (" c8>"" "+ E.pagey);});  

12. Back to top link

This code is very useful for longer pages, and users do not have to pull the scroll bar to return to the top, just click "Back to Top".

// When the id= "Top" link is clicked $ ('#top'//scoll the page back to the top $ (document). ScrollTo (0,+);});

jquery is one of the best libraries in JavaScript and supports both Ajax and HTML scripting clients, primarily for event handling and animation. In addition, jquery has a variety of plugins that allow developers to create Web pages in the quickest possible time.

Share 12 useful jquery codes