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:$(element).center();$.extend($.expr[':'], {
over100pixels: function(a) { return $(a).height() > 100; }});$('.box:over100pixels').click(function() { alert('The element you clicked is over 100 pixels high');});1. jQuery seperates behavior from markup
In HTML markup it is still quite common to see things like this:
<form id=”myform” onsubmit=return validate();” >
Even though the validate() function can be placed in an external file, in effect we are still mixing markup with logic and events here. jQuery allows you to completely seperate the two. With jQuery, the markup would look like this:
<form id=”myform”>
Next, the seperate JS file will contain the following event subscription code:
$(“myform”).submit(function() {
…your code here
)}
This allows for very clean markup with a lot of flexibility. jQuery takes javascript out of your markup, much like CSS took the style out of markup years ago.
2. Write less, do more
Write less, do more – it is the jQuery slogan, and it is an accurate one. Using jQuery’s advanced selectors, you can do amazing things in just a few lines of code. You do not need to worry about browser differences (much), there is full Ajax-support and many other abstractions that make you more productive. jQuery takes javascript to a higher level. Here’s a very simple example:
$(“p.neat”).addClass(“ohmy”).show(“slow”);
That little snippet loops through all <p> elements with the class “neat” and then adds the class “ohmy” to it, whilst slowly showing the paragraph in an animated effect. No browser checks, no loop code, no complex animation functions, just one line of code!
3. Performance
Out of the big Javascript frameworks, jQuery understands performance best. The minimized and gzipped version is only 18K in size, despite tons of new features in various releases, this number has hardly changed. With each release, major performance improvements have been made. This article is telling of the raw speed of jQuery and the focus that their developers have on it. Combine this with the new generation of browsers (Firefox 3, Google Chrome) that have fast javascript engines on board, and you have a whole new wealth of possibilities in creating rich web applications.
4. It is a “standard”
JQuery is not an official standard, let that be clear. However, the industry support for jQuery is overwhelming. Google uses it, and even hosts it for you. Dell, Digg, WordPress, Mozilla and many others use it too. Microsoft is even shipping jQuery with Visual Studio. With so much weight behind this framework, you can consider it a safe choice for the future, and a safe bet to invest time in.
5. Plugins!
There are thousands of plugins developed on top of jQuery. You can use it for form validation, galleries, field hints, animation, progress bars, you name it, it is available. The jQuery community is an eco-system, not just a library. This further supports reason #4, it is a safe choice. By the way, did you know that jQuery actively works together with their “competitors”, such as Prototype. It looks like they’re here to improve the overall state of javascript, not just for their own benefit.
6. It costs you little time
Of course it will cost you time to truly learn jQuery, especially if you will be writing lots of code or even your own plugins. However, you can do this in bits and pieces, there are tons of examples out there and it is really easy to get started. My advise is to first have a look in the plugin pool before you code something yourself. Next, have a look at the actual plugin code to see how it works. In short, learning jQuery is no huge investment, you can be productive right away and increase your skill in small increments.
7. Fun
I found working with JQuery to be a lot of fun. It is fresh, short and you quickly get results. It solves many nagging javascript problems and annoyances. I used to hate javascript coding but (somewhat) enjoy it now. With the basics fixed, one can now really think about developing next-generation web applications, without being slowed down by an inferior language or tool. I believe in the “Write less, do more” slogan.It is true.
What is not good about jQuery
Of course jQuery is not perfect. So far, I have experienced the following jQuery caveats:
Up until recently, retrieving DOM elements with jQuery was a finely choreographed combination of parsing selector strings, JavaScript loops and inbuilt APIs like getElementById(), getElementsByTagName() andgetElementsByClassName(). But now, all major browsers support querySelectorAll(), which understands CSS query selectors and brings a significant performance gain.
However, you should still try to optimize the way you retrieve elements. Not to mention that a lot of users still use older browsers that force jQuery into traversing the DOM tree, which is slow.
$('li[data-selected="true"] a') // Fancy, but slow
$('li.selected a') // Better
$('#elem') // BestSelecting by id is the fastest. If you need to select by class name, prefix it with a tag – $('li.selected'). These optimizations mainly affect older browsers and mobile devices.
Accessing the DOM will always be the slowest part of every JavaScript application, so minimizing it is beneficial. One of the ways to do this, is to cache the results that jQuery gives you. The variable you choose will hold a jQuery object, which you can access later in your script.
var buttons = $('#navigation a.button');// Some prefer prefixing their jQuery variables with $:
var $buttons = $('#navigation a.button');Another thing worth noting, is that jQuery gives you a large number of additional selectors for convenience, such as:visible, :hidden, :animated and more, which are not valid CSS3 selectors. The result is that if you use them the library cannot utilize querySelectorAll(). To remedy the situation, you can first select the elements you want to work with, and later filter them, like this:
$('a.button:animated'); // Does not use querySelectorAll()
$('a.button').filter(':animated'); // Uses itThe results of the above are the same, with the exception that the second example is faster.
To check whether an element is visible, you can use the following piece of code:
if($(element).is(":visible") == "true")
{
//The DOM element is visible
}
else
{
//The DOM element is invisible
}
To check whether an element exists, you can write the following code:
if ($("#someElement").length)
{
//The DOM element exists
}
else
{
//The DOM element doesn't exist
}
WordPress does this automatically to the content and the excerpt, but there’s no reason not to use it elsewhere. The function responsible for turning double line breaks into paragraphs is wpautop().
$my_text = 'Welcome!
Smashing Magazine is a great place to learn new things.
I hope you’re having a nice time!';echo wpautop( $my_text );Sometimes you’ll want to disable this filter by default, which you can do by removing it from the content and excerpt, like so:
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
sandip shirsale's blog 