[Collection] 7 useful jquery code snippets to share

7 useful jquery Code snippets to share

jquery is a lightweight JavaScript library, one of the most popular client-side HTML scripts, well-known among web designers and developers, and has many useful plugins and technologies to help web developers develop creative and beautiful web pages.

Today we share a few tips for jquery users that will help you to suggest the creative and functional nature of your site layout and application.

First, open the link in a new window

With the following code, you can click on the link to open in a new window:

Author http://www.lai18.com$ (document). Ready (function () {  //select all anchor tags this has http in the href  / /and Apply the Target=_blank  $ ("a[href^= ' http ']"). attr (' target ', ' _blank ');});

second, set the column of equal height

Apply the following code to make every column of your Web application want to wait for the heightReference Source: http://www.lai18.com/content/422703.html

<div class= "Equalheight" style= "border:1px solid" > <p>first line</p> <p>second Line</p> <p>third line</p></div><div class= "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 valuevar maxheight = 0;function equalheight (col) {//get all the Elem Ent with class = col col = $ (col); Loop all the Col col.each (function () {//store the highest value if ($ (this). Height () > maxheight) {maxheight =  $ (this). Height (); } }); Set the height col.height (maxheight);} </script>

third, jquery preloaded image

This tip can increase the speed at which the page loads pictures:

Author http://www.lai18.comjQuery.preloadImagesInWebPage = function () {for (var ctr = 0; Ctr & lt; arguments.length ; ctr++) {  jQuery (""). attr ("src", arguments[ctr]);}} How to use: $.preloadimages ("Image1.gif", "Image2.gif", "image3.gif");//Check whether the picture is loaded $ (' #imageObject '). attr (' src ', ' Image1.gif '). Load (function () {alert (' The image has been loaded ... ');});

Four, disable the right mouse button

Author http://www.lai18.com$ (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;});

Five, set the timer

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

Vi. 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>

position the element 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>

[Collection] 7 useful jquery code snippets to share