jQuery – the best Javascript library ever !

jQuery is my favorite javascript library and luckily it is the most popular at all on the market according to these "Usage of JavaScript libraries for websites".
What I especially like in jQuery is its powerful and consistent way to select DOM elements. Combined with a professional way to use CSS styles and classes it becomes quiet easy to come up with a dynamic full functional web page with a consistent look-and-feel and behaviour.
I have created a jsFiddle here to demonstrate what I am stating here. In this example I have two divs with three paragraphs in each, and thru some buttons I demonstrate how to highlight particular divs or paragraphs and how to easily reset everything to default settings by simply adding or removing a particular class "Highlight" I have created for this. This class could be more fancy than just changing background color, it could come with larger or different fonts, nice borders or whatever you can think of CSS-wise.
jQuery selector like "div#div2" ( choose the div with id "div2" ) or "div p:first-child" ( to select the first paragraph in all divs ) make it really easy to deal with particular DOM elements on the web page.
HTML code:

Code:

<div id="div1">
    <p id="p1">Item 1</p>
    <p id="p2">Item 2</p>
    <p id="p3">Item 3</p>
</div>
<div id="div2">
    <p id="p1">Item 1</p>
    <p id="p2">Item 2</p>
    <p id="p3">Item 3</p>
</div>
<div id="buttons">
    <button type="button" id="b1">Highlight div 1</button>
    <button type="button" id="b2">Highlight div 2</button>   
    <button type="button" id="b3">Highlight all first items</button>   
    <button type="button" id="b4">Highlight 2nd item in 2nd div</button>   
    <button type="button" id="b">Factory settings</button>
</div>

CSS Code:

Code:

div {
    background: lightcyan;
}
.highlight {
    background: yellow;
}

Javascript ( and jQuery ) code:

Code:

$("button#b1").click( function () {
    $("div#div1").addClass("highlight");
  });
$("button#b2").click( function () {
    $("div#div2").addClass("highlight");
  });
$("button#b3").click( function () {
    $("div p:first-child()").addClass("highlight");
  });
$("button#b4").click( function () {
    $("div#div2 p:nth-child(2)").addClass("highlight");
  });
$("button#b").click( function () {
    $("div").removeClass("highlight");
    $("p").removeClass("highlight");
  });

 

I have enhanced my example with a fancy way to highlight the first div: using a blue border and animations.
http://jsfiddle.net/amagard/pB8nx/7/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: