Easy jQuery

1. When you add some handler for the event - it does no replace previous handler . So both handlers will run.

In this example, if you click on element with id “example” - you will see both alerts:

$('#example').click(function(){ alert('one'); } );
$('#example').click(function(){ alert('two'); } );

2. Basing on previous fact we can do next conclusion - you can use function

$(document).ready();

as many times as you want in your page.

3. You can create your own events in jQuery. This method allow make your code more simple and readable.

$('button').click(function(){ jQuery.event.trigger('buttonClicked'); });
$('div').bind('buttonClicked',function(){ $(this).hide(); });
$('span').bind('buttonClicked',function(){ $(this).show(); });

4. Annimation effects in iQuery is asynchronous so question “how to excecute one function exactly after another” can appears very often. But all animation core-functions of jQuery receive callback function as a last argument.

$('element-1').fadeOut(3000,function() {
                        $('element-2').fadeIn(1500,function() {
                            alert('done second effect');
                        });
});

5. You can add any attribute to any html-element:

<span myownattr="somevalue" />

and match them using jQuery selectors:

var elements_by_attr = $('[@myownattr]');
var elements_by_attr_with_value = $('[@myownattr="somevalue"]');
var spans_by_attr = $('span[@myownattr]');

One of the often appearing tasks during making user interface for website is the control of the data, entered by users into the input fields. For example, phone number, SSN, date should has certain format.
Masked input plugin allow you easy control what user can enter in input field on client side. Of course, it should not replace serever-side checking, you have to use both methods together but this is other theme to talk about.
This plugin allow you to use alpha, numeric and alphanumeric characters, to change placeholders and to execute a function once the mask has been completed, if needed.
Detailed description of this plugin you can find on the it homepage, but I can show you just a small example:

Including jQuery library and plugin:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maskedinput.js"></script>

Calling the mask function for those items you wish to have masked:

jQuery(function($){
   $("#phone").mask("(999) 999-9999");
   $("#date").mask("99/99/9999",{placeholder:" "});
   $("#ssn").mask("999-99-9999",{completed:function(){
              alert("You typed the following: "+this.val());}});
})

..and HTML code:

<form method="get" id="example" action="" />
<input type="text" id="phone" /><br />
<input type="text" id="date" /><br />
<input type="text" id="ssl" /><br />
</form>

Open this example in separate window and view source code.

This plugin is good if you know how many characters exactly user shoud enter. But sometimes you need to allow or restrict user to enter variable quantity of certain characters. Another one great plugin, jQuery AlphaNumeric allow you to resolve this task. It allow you to use alpha, numeric or alphanumeric characters, some special characters, like dots, you can also allow or restrict using caps letters.
Another one example:

Including jQuery library and plugin:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.alphanumeric.js"></script>

Calling functions for items you want to control:

jQuery(function($){
$('#alphanum').alphanumeric();   //allow only alpha and numeric characters
$('#alphanocaps').alpha({nocaps:true}); //allow only alpha lowercase characters
$('#numwithdot').numeric({allow:"."});  //allow numeric characters and dots
})

..and HTML code:

<form method="get" id="example" action="" />
<input type="text" id="alphanum" /><br />
<input type="text" id="alphanocaps" /><br />
<input type="text" id="numwithdot" /><br />
</form>

Open this example in separate window and view source code.

I think that usage of Masked Input and jQuery AlphaNumeric plugins is completely enough for handling the task of controlling the characters that the user can input in form fields.

Selectors - is a key to understanding jQuery. Generally, it’s combination of CSS 1-3, XPath and custom code. Selectors allow you easy and quick identify any set of webpage elements for manipulating. Selecting the part of document is performed by using function jQuery(). This is the most important function of library. Depending of passed arguments it can do many things. It this post I will use syntax jQuery (element) which wrap jQuery functionality around a single or multiple set of document elements. This function also has alias $(), which make scripts more readable.
So, let’s talk about type of selectors.

Basic selectors.

#id - select single element with the given id.
This code will set red 3-pixels border to div with id=”mydiv”:

$("#mydiv").css("border","3px red");

Open this example in new window and view source code.

element - select all elements on page with given name.
This code select all div’s on webpage and set red border around them:

$("div").css("border","3px solid red");

Open this example in new window and view source code.

.classname - select all elements with given class.
This code make all elements with class “myheadertext” look in bold:

$(".myheadertext").css("font-weight","bold");

Open this example in new window and view source code.

* - select all elements on page.
This code will set red border to all elements on page (including html and body!):

$("*").css("border","3px solid red");

Open this example in new window and view source code.

selector1, selector2, selector3, … - select set of selectors.
This code will select 3 divs on page and set padding from top to 10px for them:

$("#div1, #div2, #div3").css("padding-top", "10px");

Open this example in new window and view source code.

Hierarchy selectors.

ancestor descendant - select all descendant elements specified by “descendant” of elements specified by “ancestor”.

This code select inputs of given form and set blue dotted border about them:

$("form input").css("border", "2px dotted blue");

Open this example in new window and view source code.

parent > child - select all child elements specified by “child” of elements specified by “parent”. Notice that this selector match only direct child elements (first level).
This code select all childs of element with id=”main” and set double red border around them:

$("#main > *").css("border", "3px double red");

Open this example in new window and view source code.

prev + next - select all next elements specified by “next” that are next to elements specified by “prev”.
Select all input fileds that are next to label and set their value to “Labeled!” of blue color:

$("label + input").css("color", "blue").val("Labeled!");

Open this example in new window and view source code.

prev ~ siblings - select all elements that are siblings after the “prev” element.
Select all divs on the same level after div with id=”prev” and set them blue border:

$("#prev ~ div").css("border", "3px groove blue");

Open this example in new window and view source code.

jQuery it is a JavaScript library, which has been developed in January 2006. There is a slogan on developers website - “jQuery is designed to change the way that you write JavaScript”. These words are completely true. Using this library has a lot of advantages:

• easy and elegant access to the your document’s objects (DOM) and manipulating them using selectors;
• making chains from methods;
• friendly event handling and binding;
• built-in animation features, allowing make your web-page more dynamical without huge volume of code;
• clear interface for working with AJAX;
• well-made documentation with a lot of examples;
• finally – hundreds plug-ins, allowing quickly to solve everyday’s tasks of JavaScript programming.

I think that programming with jQuery is make you work really pleasant. As for me as a developer this library save me a lot of time, allowing concentrate on global tasks but not on details. I have made my blog for telling about this library, about different methods of solving widespread tasks appearing during web programming and about how such a boring task as a creating user interface can enjoy yourself. I’m also planning to review some useful plug-ins too. In the next post I’ll tell you about such a great jQuery tool as “selectors”.