12. 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");
14. 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.
15. 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";
• }
• }
• };
16. Using jQuery we can do this
• $("tabletr:nth
• child(odd)").addClass("odd");
17. Using jQuery we can do
this
• jQuery("tabletr:ntchild(odd)"
). addClass("odd");
JQUERY FUNCTION
18. Using jQuery we can do
this
• jQuery("tabletr:nthchild(odd)").add
Class("odd");
JQUERY SELECTOR(CSS EXPRESSION)
19. Using jQuery we can do
this
• jQuery("tabletr:nth-
child(odd)").addClass("odd");
JQUERY METHOD
20. Hide divs with pure
JavaScript
• divs =
document.getElementByTagName(‘div’)
;
• for (i = 0; i < divs.length; i++) {
• divs[i].style.display = ‘none’;
• }
22. • It really is the
“write less, do more”
JavaScript Library!
23. 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
24. 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.
25. 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
});
26. 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)
27. 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"
28. 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
29. 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.
30. Select DOM elements
• Selecting DOM elements through document based on the
css selectors.
• The #id selector
$(document).ready(function() {
$(“#d1").text("Test");
});
• This code will be applied on only one element whose ID
attribute is d1.
31. Select DOM
elements(cont’d)
• The .class selector
$(document).ready(function() {
$(“.para").text("Test");
});
• This code will be applied on all elements with the .para
class
32. Select DOM
elements(cont’d)
• The element selector
$(document).ready(function() {
$(“div").text("Test");
});
• This code will be applied on all <div> tags
33. Select DOM
elements(cont’d)
$(document).ready(function() {
$("#d2 span").text("Test");
});
• This code will be applied on all span elements within
the element whose ID attribute is #d2.
$(document).ready(function() {
$("span.bold").text("Test");
});
• This will match all span elements with "bold" as the
class
34. 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>
35. 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].
36. Find elements with a
specific attribute(cont’d)
• Example.
$(document).ready(function() {
$(“[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
37. 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();
});
});
38. 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
39. A Few Examples
Forms
Chatboxes
Menus
Dropdowns
Sliders
Tabs
Slideshows
Games
43. Pros:
• Large Community
• Ease of use
• Large library
• Strong opensource community. (Several
jQuery plugins available)
• Great documentation and tutorials
• Ajax support
44. Cons:
• Regular updates that change existing
behaviour
• Overhead of adding extra javascript to
page
• Learning curve may not be short for some
developers
45. 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.