Jquery

JQUERY
WRITE LESS, DO MORE
Presented By
Nayab
Sheikh

Introduction to jQuery
• jQuery is a lightweight, open-source
JavaScript library that simplifies
interaction between HTML and
JavaScript

• It was and still being developed
by John Resig from Mozilla and was first
announced in January 2006

• It has a great community, great
documentation, tons of plugins, and it was
recently adopted by Microsoft

The current version is 1.3.2
(as of July 2009)

• Download the latest version from
http://jquery.com

Copy the
jquery.js
and the
jquery-vsdoc.js
into your application folder

Reference it in your markup
• <script src=“jquery.js”/>

Reference it in your JS files:
• … or just drag it into the file
///<reference
path=“jquery.js”/>

jQuery Basics
• jQuery()
• This function is the heart of the jQuery library
• You use this function to fetch elements using CSS
selectors
• and wrap them in jQuery objects so we can manipulate
• them
• There’s a shorter version of the jQuery() function: $()
• $("h1");
• $(".important");

Document Ready
• $(document).ready(function(){
• // Your code here
• });
• jQuery has a simple statement that checks
the
• document and waits until it's ready to be
manipulated

What’s the problem with
JavaScript?
• JavaScript is a weakly typed, classless,
prototype based OO language, that can
also be used outside the browser. It is
not a browser DOM.

It means no more of this
• var tables =
document.getElementsByTagName("table");
• for (vart = 0; t<tables.length; t++) {
• var rows =
tables[t].getElementsByTagName("tr");
• for (vari = 1; i<rows.length; i += 2) {
• if
(!/(^|s)odd(s|$)/.test(rows[i].className))
{
• rows[i].className += " odd";
• }
• }
• };

Using jQuery we can do this
• $("tabletr:nth
• child(odd)").addClass("odd");

Using jQuery we can do
this
• jQuery("tabletr:ntchild(odd)"
). addClass("odd");
JQUERY FUNCTION

this
• jQuery("tabletr:nthchild(odd)").add
Class("odd");
JQUERY SELECTOR(CSS EXPRESSION)

this
• jQuery("tabletr:nth-
child(odd)").addClass("odd");
JQUERY METHOD

Hide divs with pure
JavaScript
• divs =
document.getElementByTagName(‘div’)
;
• for (i = 0; i < divs.length; i++) {
• divs[i].style.display = ‘none’;
• }

Hide divs with jQuery
• $(“div”).hide();

• It really is the
“write less, do more”
JavaScript Library!

Why use jQuery
• Helps us to simplify and speed up web
development
• Allows us to avoid common headaches
associated with browser development
• Provides a large pool of plugins
• Large and active community
• Tested on 50 browsers, 11 platforms
• Its for both coders and designers

how jQuery works?
• The $() function is an alias for the jQuery()
function .
• This returns a special Java-Script object.
• This JavaScript Object contains an array
of DOM elements that matches the selector.
• Selector is key thing in jQuery development.
• It is away to select node from DOM. This
Java-Script object possesses a large number
of useful predefined methods that can action
group of elements.

Starting with Jquery
• We load the Jquery library as any external JavaScript file.
script type="text/javascript"
src="jquery.js"></script>
• Now we loaded the Jquery library
• As almost everything we do when using jQuery reads or
manipulates the document object model (DOM), we need to
make sure that we start adding events etc. as soon as the DOM
is ready.
• To do this, we register a ready event for the document.
$(document).ready(function() {
// do stuff when DOM is ready
});

jQuery Syntax
• The jQuery syntax is tailor made for selecting HTML
elements and perform some action on the
element(s).
• Basic syntax is: $(selector).action()
– A dollar sign to define jQuery
– A (selector) to "query (or find)" HTML elements
– A jQuery action() to be performed on the
element(s)

jQuery Syntax Con,t
• Examples:
– $(this).hide() - hides current element
– $("p").hide() - hides all paragraphs
– $("p.test").hide() - hides all paragraphs with
class="test"
– $("#test").hide() - hides the element with id="test"

Selectors
• With normal JavaScript, finding elements can be extremely
cumbersome, unless you need to find a single element
which has a value specified in the ID attribute.
• jQuery can help you find elements based on their ID,
classes, types, attributes, values of attributes and much,
much more.
• It's based on CSS selectors and as you will see after going
through this that, it is extremely powerful

Selectors(cont’d)
• You can instantiate the jQuery object simply by writing
jQuery() or even shorter using the jQuery shortcut name:
$(). Therefore, selecting a set of elements is as simple as
this:
$(<query here>)
• With the jQuery object returned, you can then start using
and altering the element(s) you have matched.

Select DOM elements
• Selecting DOM elements through document based on the
css selectors.
• The #id selector
$(“#d1").text("Test");
});
• This code will be applied on only one element whose ID
attribute is d1.

Select DOM
elements(cont’d)
• The .class selector
$(“.para").text("Test");
});
• This code will be applied on all elements with the .para
class

Select DOM
elements(cont’d)
• The element selector
$(“div").text("Test");
});
• This code will be applied on all <div> tags

Select DOM
elements(cont’d)
$("#d2 span").text("Test");
});
• This code will be applied on all span elements within
the element whose ID attribute is #d2.
$("span.bold").text("Test");
});
• This will match all span elements with "bold" as the
class

Some More Examples
• Syntax Description
• $(this) Current HTML element
• $("p) All <p> elements
• $("p.intro") All <p> elements with class="intro"
• $("p#intro") All <p> elements with id="intro"
• $("p.intro:first“) The first <p> element with class="intro"
• $(".intro“) All elements with class="intro"
• $("ul li:first") The first <li> element of the first <ul>

Find elements with a
specific attribute
• The most basic task when selecting elements
based on attributes is to find all the elements
which has a specific attribute.
• The syntax for this selector is a set of square
brackets with the name of the desired attribute
inside it, for instance [name] or [href].

Find elements with a
specific attribute(cont’d)
• Example.
$(“[id]").text("Test");
});
• We use the attribute selector to find all elements on the
page which has an id attribute and then add text to it. As
mentioned, this will match elements with an id element no
matter what their value is

jQuery Events
• The jQuery event handling methods are core functions in
jQuery.
• Event handlers are method that are called when "something
happens" in HTML. The term "triggered (or "fired") by an
event" is often used.
• $("button").click(function() {..some code... } )
• EX:
– $(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

jQuery Events(cont’d)
• Here are some examples of event methods in jQuery:
• Event Method Description
• $(document).ready(function) Binds a function to the ready event of a
document
(when the document is finished loading)
• $(selector).click(function) Triggers, or binds a function to the click
event of selected elements
• $(selector).dblclick(function) Triggers, or binds a function to the
double click event of selected elements

A Few Examples
 Forms
 Chatboxes
 Menus
 Dropdowns
 Sliders
 Tabs
 Slideshows
 Games

Pros:
• Large Community
• Ease of use
• Large library
• Strong opensource community. (Several
jQuery plugins available)
• Great documentation and tutorials
• Ajax support

Cons:
• Regular updates that change existing
behaviour
• Overhead of adding extra javascript to
page
• Learning curve may not be short for some
developers

Conclusions
• Conclusion In the end, jquery is popular for a
reason. It will make your website easier to control
and to access through any browser.
• By using this library, you can create or include
complex plug-ins in a matter of minutes. This will
make your website easier to use and as long as you
have imagination, the possibilities are endless.

Jquery

More Related Content

Jquery