Introducing jQuery

#1

Day #1

Introducing jQuery

Wildan Maulana
wildan.m@openthinklabs.com

http://workshop.openthinklabs.com

Why we should use jQuery

<script type="text/javascript">
$(function() {
$("table tr:nth-child(even)").addClass("striped");
});
</script>

The real power in this jQuery statement comes
from the selector, an expression
for identifying target elements on a page that
allows us to easily identify and grab
the elements we need;

What Unobtrusive JavaScript means

● Unobtrusive JavaScript means behavior is
separated from structure, think of it as MVC
paradigm for JavaScript

An Example of Unobtrusive JavaScript
<button
type="button"
onclick="document.getElementById('xyz').style.color='red';">
Click Me
</button>
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('testButton').onclick = makeItRed;
};
function makeItRed() {
document.getElementById('xyz').style.color = 'red';
}
</script>
</head>
<body>
<button type="button" id="testButton">Click Me</button>
</body>

The Fundamental Elements and concepts of
jQuery
● At its core, jQuery focuses on retrieving
elements from our HTML pages and per-
forming operations upon them.
● Selector ..selector .., selector ..!

The jQuery Wapper
● To collect a group of elements, we use the
simple syntax :
$(selector) or jQuery(selector)
● $("p a") means , retrieve a group of links nested
inside a <p> element

Query Chain
● $("div.notLongForThisWorld").fadeOut();

● Query Chain :

$("div.notLongForThisWorld").fadeOut().addClass("removed");

● $("#someElement").html("I have added some text to an element");

same with

$("#someElement")[0].innerHTML = "I have added some text to an element");

Query Chain - cont
● $("div.fillMeIn").html("I have added some text to a group of
nodes");

same with

var elements = $("div.fillMeIn");
for(i=0;i<elements.length;i++)
elements[i].innerHTML =
"I have added some text to a group of nodes";

Advanced Selector
● This selector is identical to the selector in CSS
● $("p:even"); means selects all even <p> elements
● $("tr:nth-child(1)"); means selects the first row of each table
● $("body > div"); means selects direct <div> children of <body>.
● $("a[href$=pdf]"); means selects link to PDF files
● $("body > div:has(a)") means selects direct <div> children of <body> -
containing links

Powerfull stuff right ?!!

You can see for full list of selector here : http://docs.jquery.com/Selectors.

About $ and jQuery()
● $ is alias of jQuery()
● $.trim(someString); is same with
jQuery.trim(someString);

The document ready handler
● To operate on a page jQuery have to wait until
all DOM elements are fully loaded
● Traditionally we use the onload handler
window.onload = function() {
$("table tr:nth-child(even)").addClass("even"); };

But if we are using this method, browser will execute the load function after the
DOM tree created and also waits until after all images and external resources are
fully loaded and the page is displayed in the browser window

A Better Approach
● A much better approach would be to wait only until the document structure is fully
parsed and the browser has converted the HTML into its DOM tree form before
executing the script to apply the rich behaviors.
● JQuery Way :

$(document).ready(function() {
$("table tr:nth-child(even)").addClass("even");
});

or using the shorthand :

$(function() {
$("table tr:nth-child(even)").addClass("even");
});

Another use of $() Function
● Making DOM elements
<html>
<head>
<title>Follow me!</title>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js">
</script>
Ready handler that
<script type="text/javascript"> creates HTML element
$(function(){
$("<p>Hi there!</p>").insertAfter("#followMe");
});
</script> Existing element
tobe followed
</head>

<body>
<p id="followMe">Follow me!</p>
</body>
</html>

Extending jQuery
$.fn.disable means that we’re
extending the $ wrapper with a function
called disable.
$.fn.disable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") this.disabled = true;
});
}

So we can use .....

$("form#myForm input.special").disable();

$("form#myForm input.special").disable().addClass("moreSpecial");

Using jQuery in Conjunction with Other JavaScript
libraries

● If use jQuery with other library such as
Prototype, just call :

jQuery.noConflict()

Reference
● Jquery in Action, Bear Bibeault, Yehuda Katz,
Manning

Introducing jQuery

More Related Content

What's hot

Viewers also liked

Similar to Introducing jQuery

More from Wildan Maulana

Recently uploaded

Introducing jQuery