jQuery – Nice to Meet

jQuery is an awesome Javascript library that has changed the “way of thinking” for many developers in today’s world.
jQuery is fast, reliable, and makes HTML DOM elements traversable and easy for manipulation.
With the help of jQuery and its rich and easy-to-use API, event handling, animation, and Ajax calls – Javascript becomes very intuitive and easy.

jQuery has changed the look and feel for every “javascript enhanced” site that you see online. With the ability of controlling the DOM elements on the client side in an asynchronous way, and animating the browser with 3 lines of code, jQuery has become the most powerful tool for client side development.

Nice to Meet

Keep it simple

Every developer nowadays can use jQuery with little knowledge and achieve a lot in several days of development, but in order to keep your code simple and easy to reuse you need to invest a little more time in planning than developing.

These are 2 examples for making the code more readable and shorter:
Selecting the selected checkbox:

$("select :selected").val();

Selecting the un-selected checkboxes:

$("select option:not(:selected)").each();

The above examples show the right way for selecting the elements. Many times I see the use of find() method where you just need to invest couple of minutes of thinking and then write the appropriate selector. This is one easy way for enhancing your code and make it understandable it quick and easy use.

Unnecessary variables

jQuery has an API for invisibly storing data on DOM elements.
You can add data to any element (using .data()) and it will store it in a central repository which jQuery handles for us.

$("#myDivToStoreTextBeforeChangingIt").data("originalText", $("#myDivToStoreTextBeforeChangingIt").text()
// Manipulate the same dom and change his text….
// When you want to show the original text you can just assign back the original data we have already saved.
$("#myDivToStoreTextBeforeChangingIt").text( $("#myDivToStoreTextBeforeChangingIt").data("originalText") );

As you can see, no need to save the data to a variable.

Handle multiple events

After binding more than one event to an element there is no need to trigger this functionality twice.
As it turns out, custom events are a great way for creating several actions (functions) with the same trigger.
This creates a one to many relationship. You trigger one event but many handlers are executed.

$("div").bind("click.myplugin", functionA); 
$("div").bind("click.myplugin", functionB); 
$("div").trigger("click");

This will execute both functions on click event.

Adding multiple css styles to an element on event

There are several scenarios in which you want to change an element’s layout. You can do this by adding the element css styles with the css() function.
If you need to add several changes then my advise is to set a new class in your css file and on the event just add this class and remove it in the event handlerOut callback.

$("li.subMenu").hover(
  function() {
    $(this).addClass(“menuHovered”);
  }, function() {
    $(this).removeClass(“menuHovered”);
  }
};

css file:

.menuHovered {
   opacity: 0.5;
   font-size: 14;
   color: blue;
   text-decoration: underline;
}

All of the above is just a drop in the huge ocean of jQuery.
Good luck with your jQuery experience.

Leave a Reply

Your email address will not be published. Required fields are marked *