FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!

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");
  });




1 blog comments below

Enhanced my example with a fancy way to highlight the first div: using a blue border and animations.
http://jsfiddle.net/amagard/pB8nx/7/
amagard on Fri Jul 18, 2014 2:49 pm



FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.