In today’s article we’ll do a small review of interesting jQuery tips. The framework itself gives the programmer a gigantic possibilities, that still can be extended through tricks and best practices.
jQuery tips
This time we focus more on practice and examples, rather than theory.
Tip 1. Determine the size of our document
In details, it’s a query of the DOM elements number, which the page contains. In jQuery this information is available in the following manner:
alert($('*').length);
2. Checking if a checkbox is checked 🙂
It’s simple — can be done in such a way:
if ($("#myCheckBoxID").is(':checked')) { … }
or by checking an attribute:
if ($('#myCheckBoxID').attr('checked')) { … }
3. Checking whether an element exists
if ($("#myElementID").length == 0) alert('#myElementID does not exist'); else alert('#myElementID exist!');
4. Checking if an element is visible
Is visible:
$("#myElementID").is(":visible");
Is hidden:
$('#myElementID').is(':hidden')
5. Number of found (matching) elements
This simple trick gives us information of how many elements of the document matches the selector (e.g. find by the CSS class):
alert($(".our-class-css").size());
6. Scroll the page to the selected item
How to scroll the page in jQuery? Simply:
$(document).scrollTop($('#myElement').offset().top);
7. Substitution of one element to another
So replace an element by another:
$("#oldID").replaceWith("<span>New element …</span>");
8. Finding an element by CSS class
The code below adds blue 2px border for all elements with foobar class.
$('body').find('.foobar').css({'border': 'solid 2px blue'});
9. Finding an element by attribute
Going one step further, we can search for an item by attribute, even our own.
var p_id = 12345; $('#container').find('div[data-photoid="' + p_id + '"]').hide(); // e.g.: // <div data-photoid="12345"><img src="path-to-image.jpg" /></div>
This code is looking for a specific item (here: div), wherein the attribute data-photoid has a value of the specified variable (p_id), and hides the item if was found.
10. “Sticking” actions to the HTML elements
First, we call the unbind() function, so we’ll be able to connect behavior defined by us to the component, instead of the default.
HTML
<span id="prev">PREV</span> 1 2 3 4 5 <span id="next">NEXT</span>
JS
$('#next').unbind(); $('#prev').unbind(); $('#next').click(function() { clickTime = new Date().getTime(); alert(clickTime); return false; }); $('#prev').click(function() { clickTime = new Date().getTime(); alert(clickTime); return false; });
In this example, the time of click is displayed (timestamp).
Next tricks in jQuery are not directly related to the document element.
11. Blocking the right mouse button in jQuery
$(document).bind("contextmenu", function(e) { return false; });
12. Short version of document.ready
For the document.ready event
$(document).ready(function() { .... });
we can use shorter version:
$(function() { … });
13. Reaction to resize the browser window
Simply we handle the resize event of the window. We can thus adjust the size or appearance of the elements depending on the window size.
$(window).resize(myHandler); function myHandler() { alert('Do something …'); }
14. More?
Take a look at the pages dedicated to jQuery and JavaScript tricks, such as:
http://css-tricks.com/snippets/jquery/
I also recommend a topic on StackOverflow — a collection of interesting solutions:
http://stackoverflow.com/questions/182630/jquery-tips-and-tricks
jQuery tips — summary
The jQuery Framework gives the power for developers, especially when we know the tricks and tips.
Everything that can increase our capacity or to save time, should always be welcome.
And additionally http://code.tutsplus.com/tutorials/14-helpful-jquery-tricks-notes-and-best-practices–net-14405
[…] jQuery tips and tricks, and an overview of interesting tricks with this excellent framework […]
You should not encourage people to write like this. it is old code you showing so this is not a good tips.
Thanks.
There are only tips like How to do something…
but unfortunately you’re right; I just moved some articles from OLD blog version, like this one, and there still are some old things, even after a review.
Anyway now I try to avoid basic / old stuff, and focus on the new, fresh and modern topics.
Best regards
Thanks for your valuable information. This clears the base of every developer with ease practises.
Hope this link makes a quite effect on you:
http://www.namasteui.com/tips-and-tricks-for-powerful-developers/
—
Thanks,
Sourav Basak [Blogger, Entrepreneur, Thinker]
http://www.namasteui.com
Thanks for your valuable information. This clears the base of every developer with ease practises.
Hope this link makes a quite effect on you:
http://www.namasteui.com/tips-and-tricks-for-powerful-developers/
—
Regards,
Sourav Basak [Blogger, Entrepreneur, Thinker]
http://www.namasteui.com