When I start learning jQuery, I always look for a best way to implement a code. Or sometimes, look for the simplest solution among the rest, though it's not the elegant way to do it, but it's easy to understand. So, now, I'm gonna show you my favourite collection of jQuery tips and tricks
1. jQuery cheatsheets
First of all, it's good to have a cheatsheet as a reference. I found 3 of them online:jQuery Cheatsheet from ColorCharge
jQuery Cheatsheet from Gscottolson WebBlog
jQuery Cheatsheet from From Far East WebBlog
2. jQuery $(document).ready shorthand
This is a great tip! Instead of doing this$(document).ready(function() { //write your code here }You can also do this, both are the same!
$(function(){ //write your code here });
3. Open in new window
Target attribute is not valid in STRICT W3C standard. Thus, we need to use REL and a bit of jQuery code to dynamically create the attribute to avoid validation error. This is one of my favourite codes. It's so simple and does the job well.$('a[rel=external]').attr('target','_blank');
<a href="http://www.queness.com" rel="external">Queness in new window</a> <ul> <li><a href="home">home</a></li> <li><a href="home">about</a></li> <li><a href="home">contact</a></li> </ul> <link rel="stylesheet" href="default.css" type="text/css"> ...... <a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> <a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> <a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a> <p></p> <a href="#" id="close"></a> <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script> ...... <a id="top" style="cursor:hand;cursor:pointer"> Back to top <div class="col" style="border:1px solid">Column One<br/> With Two Line<br/> And the height is different<br/><br/> </div> <div class="col" style="border:1px solid">Column Two<br/><br/></div> <a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">=</a> <span>Font size can be changed in this section</span> <div class="section1">This won't be affected</div> <div class="section2">This one is adjustable too!</div>
4. Make the entire LI clickable
This trick is very useful when you're using UL list to make a menu. What it does is, when you click on the LI area (outside of the link), it will search for the url in the anchor tag and execute the link:$("ul li").click(function(){ //get the url from href attribute and launch the url window.location=$(this).find("a").attr("href"); return false; });
<a href="http://www.queness.com" rel="external">Queness in new window</a> <ul> <li><a href="home">home</a></li> <li><a href="home">about</a></li> <li><a href="home">contact</a></li> </ul> <link rel="stylesheet" href="default.css" type="text/css"> ...... <a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> <a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> <a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a> <p></p> <a href="#" id="close"></a> <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script> ...... <a id="top" style="cursor:hand;cursor:pointer"> Back to top <div class="col" style="border:1px solid">Column One<br/> With Two Line<br/> And the height is different<br/><br/> </div> <div class="col" style="border:1px solid">Column Two<br/><br/></div> <a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">=</a> <span>Font size can be changed in this section</span> <div class="section1">This won't be affected</div> <div class="section2">This one is adjustable too!</div>
5. Switch to different CSS style sheets
You want to have different design for your website. You can use this to switch to different CSS Style Sheets:$("a.cssSwitcher").click(function() { //swicth the LINK REL attribute with the value in A REL attribute $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); });
<a href="http://www.queness.com" rel="external">Queness in new window</a> <ul> <li><a href="home">home</a></li> <li><a href="home">about</a></li> <li><a href="home">contact</a></li> </ul> <link rel="stylesheet" href="default.css" type="text/css"> ...... <a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> <a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> <a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a> <p></p> <a href="#" id="close"></a> <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script> ...... <a id="top" style="cursor:hand;cursor:pointer"> Back to top <div class="col" style="border:1px solid">Column One<br/> With Two Line<br/> And the height is different<br/><br/> </div> <div class="col" style="border:1px solid">Column Two<br/><br/></div> <a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">=</a> <span>Font size can be changed in this section</span> <div class="section1">This won't be affected</div> <div class="section2">This one is adjustable too!</div>
6. Disable right click
Some of us might want to disable right click, or want to create our own context menu for the website, this is how we can detect right click:$(document).bind("contextmenu",function(e){ //you can enter your code here, e.g a menu list //cancel the default context menu return false; });
7. Get mouse cursor x and y axis
This script will display the x and y value - the coordinate of the mouse pointer.$().mousemove(function(e){ //display the x and y axis values inside the P element $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); });
<a href="http://www.queness.com" rel="external">Queness in new window</a> <ul> <li><a href="home">home</a></li> <li><a href="home">about</a></li> <li><a href="home">contact</a></li> </ul> <link rel="stylesheet" href="default.css" type="text/css"> ...... <a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> <a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> <a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a> <p></p> <a href="#" id="close"></a> <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script> ...... <a id="top" style="cursor:hand;cursor:pointer"> Back to top <div class="col" style="border:1px solid">Column One<br/> With Two Line<br/> And the height is different<br/><br/> </div> <div class="col" style="border:1px solid">Column Two<br/><br/></div> <a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">=</a> <span>Font size can be changed in this section</span> <div class="section1">This won't be affected</div> <div class="section2">This one is adjustable too!</div>
8. Prevent default behaviour
Assuming we have a long page, and we have a link similar to below that is used for other purposes other than a hyperlink. If you clicked on it, it will bring you to the top of your page. The reason of this behavior is because of the # symbol. To solve this problem, we need to cancel the default behavior by doing this:$('#close').click(function(e){ e.preventDefault(); }); /* OR */ $('#close').click(function(){ return false; });
<a href="http://www.queness.com" rel="external">Queness in new window</a> <ul> <li><a href="home">home</a></li> <li><a href="home">about</a></li> <li><a href="home">contact</a></li> </ul> <link rel="stylesheet" href="default.css" type="text/css"> ...... <a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> <a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> <a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a> <p></p> <a href="#" id="close"></a> <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script> ...... <a id="top" style="cursor:hand;cursor:pointer"> Back to top <div class="col" style="border:1px solid">Column One<br/> With Two Line<br/> And the height is different<br/><br/> </div> <div class="col" style="border:1px solid">Column Two<br/><br/></div> <a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">=</a> <span>Font size can be changed in this section</span> <div class="section1">This won't be affected</div> <div class="section2">This one is adjustable too!</div>
9. Back to top button/link
A handy back to top button/link using jQuery with scroll to plugin. I like the scroll to top effect, you can test it by pressing the button below this page. You'll know what I meant : ) Get jQuery scrollTo plugin$('#top').click(function() { $(document).scrollTo(0,500); }
<a href="http://www.queness.com" rel="external">Queness in new window</a> <ul> <li><a href="home">home</a></li> <li><a href="home">about</a></li> <li><a href="home">contact</a></li> </ul> <link rel="stylesheet" href="default.css" type="text/css"> ...... <a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> <a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> <a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a> <p></p> <a href="#" id="close"></a> <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script> ...... <a id="top" style="cursor:hand;cursor:pointer"> Back to top <div class="col" style="border:1px solid">Column One<br/> With Two Line<br/> And the height is different<br/><br/> </div> <div class="col" style="border:1px solid">Column Two<br/><br/></div> <a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">=</a> <span>Font size can be changed in this section</span> <div class="section1">This won't be affected</div> <div class="section2">This one is adjustable too!</div>
10. Columns of equal height
I think this script is quite useful. I haven't have a chance to use it yet. It's more on design. If you want columns have the same height, this function will answer your request. Inspired by CSSNewbie$(document).ready(function() { setHeight('.col'); }); //global variable, this will store the highest height value var maxHeight = 0; function setHeight(col) { //Get all the element 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); }
<a href="http://www.queness.com" rel="external">Queness in new window</a> <ul> <li><a href="home">home</a></li> <li><a href="home">about</a></li> <li><a href="home">contact</a></li> </ul> <link rel="stylesheet" href="default.css" type="text/css"> ...... <a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> <a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> <a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a> <p></p> <a href="#" id="close"></a> <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script> ...... <a id="top" style="cursor:hand;cursor:pointer"> Back to top <div class="col" style="border:1px solid">Column One<br/> With Two Line<br/> And the height is different<br/><br/> </div> <div class="col" style="border:1px solid">Column Two<br/><br/></div> <a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">=</a> <span>Font size can be changed in this section</span> <div class="section1">This won't be affected</div> <div class="section2">This one is adjustable too!</div>
11. Write our own selector
This is a more advance trick. I didnt know about this until I saw it from this website illuminatikarate.com.//extend the jQuery functionality $.extend($.expr[':'], { //name of your special selector moreThanAThousand : function (a){ //Matching element return parseInt($(a).html()) > 1000; } }); $(document).ready(function() { $('td:moreThanAThousand').css('background-color', '#ff0000'); });
<a href="http://www.queness.com" rel="external">Queness in new window</a> <ul> <li><a href="home">home</a></li> <li><a href="home">about</a></li> <li><a href="home">contact</a></li> </ul> <link rel="stylesheet" href="default.css" type="text/css"> ...... <a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> <a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> <a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a> <p></p> <a href="#" id="close"></a> <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script> ...... <a id="top" style="cursor:hand;cursor:pointer"> Back to top <div class="col" style="border:1px solid">Column One<br/> With Two Line<br/> And the height is different<br/><br/> </div> <div class="col" style="border:1px solid">Column Two<br/><br/></div> <a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">=</a> <span>Font size can be changed in this section</span> <div class="section1">This won't be affected</div> <div class="section2">This one is adjustable too!</div><table> <tbody> <tr><td>1400</td><td>700</td><td>400</td></tr> <tr><td>2500</td><td>600</td><td>100</td></tr> <tr><td>100</td><td>1100</td><td>900</td></tr> <tr><td>2600</td><td>1100</td><td>1200</td></tr> </tbody> </table>
12. Font resizing
This is one of the famous facilities on a webpage - able to let user increase the font size. I modified the script from shopdev.co.uk. Now, you'll be able to put in ID, Classes or HTML elements that you want the font to be adjustable into an array.$(document).ready(function(){ //ID, class and tag element that font size is adjustable in this array //Put in html or body if you want the font of the entire page adjustable var section = new Array('span','.section2'); section = section.join(','); // Reset Font Size var originalFontSize = $(section).css('font-size'); $(".resetFont").click(function(){ $(section).css('font-size', originalFontSize); }); // Increase Font Size $(".increaseFont").click(function(){ var currentFontSize = $(section).css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; $(section).css('font-size', newFontSize); return false; }); // Decrease Font Size $(".decreaseFont").click(function(){ var currentFontSize = $(section).css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*0.8; $(section).css('font-size', newFontSize); return false; }); });
<a href="http://www.queness.com" rel="external">Queness in new window</a> <ul> <li><a href="home">home</a></li> <li><a href="home">about</a></li> <li><a href="home">contact</a></li> </ul> <link rel="stylesheet" href="default.css" type="text/css"> ...... <a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> <a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> <a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a> <p></p> <a href="#" id="close"></a> <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script> ...... <a id="top" style="cursor:hand;cursor:pointer"> Back to top <div class="col" style="border:1px solid">Column One<br/> With Two Line<br/> And the height is different<br/><br/> </div> <div class="col" style="border:1px solid">Column Two<br/><br/></div> <a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">=</a> <span>Font size can be changed in this section</span> <div class="section1">This won't be affected</div> <div class="section2">This one is adjustable too!</div>
Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.I'm glad that you found our blog post on jQuery selectors useful. I'll ping you next time we post a jQuery tip.
Cheers,
George Huger
Illuminati Karate
@Maujor: Thanks for the correction. I have updated the content.
@masikma: thanks for your argument about the TARGET and w3c standard. I should have put another sentence at the CSS switcher trick. "Assuming, you have only one css stylesheet" : )
@Zachary: Thanks for the information, I have fixed the stupid bug, and increased the characters for the comment.
For #4, with your simple example, an all CSS solution would be in order. Make the anchor inside of the list item display: block; height: 100%; and then your anchor/link will fill the entire LI making the whole thing clickable. Problem solved, no JS needed.
P.P.S. 400 characters isn't long enough to write a very meaningful comment.
e.preventDefault()
List all events bound to an element
jQuery stores a list of all events bound to elements and objects with its data function. The following code will list all bound events and their handlers:
$.each($(elem).data("events"), function(i, event) {
$.each(event, function(i, handler) {
console.log(handler.toString());
});
});
http://www.badlydrawntoy.com/2009/03/03/replacing-target_blank-for-strict-xhtml-using-jquery-redux/