JQuery Intro

spongereasonInternet and Web Development

Nov 12, 2013 (3 years and 6 months ago)

53 views


jQuery

is a fast and concise JavaScript Library that
simplifies HTML document traversing, event
handling, animating, and Ajax interactions for rapid
web development.



jQuery

is designed to change the way that you
write JavaScript.



2



Cross browser : Latest version supports:


IE /
FireFox

/ Safari / Opera /Chrome?



CSS
-
like syntax


easy for developers/non
-
developers to understand



Lightweight (compressed version)



Active developer community



Extensible
-

plugins

3



A substitute for knowing JavaScript


jQuery

is very
useful, but you should still know how
JavaScript works and how to use it correctly. This means
more than
Googling

a
jQuery
/JavaScript tutorial
and
calling yourself an expert
.



The answer to every problem


There is still plenty of functionality built into JavaScript
that should be utilized! Don’t turn every project into a
quest to ‘
jQuery
-
ize
’ the problem, use
jQuery

where it
makes sense. Create solutions in environments where they
belong.


Select DOM (Document Object Model) elements on
a page


one element or a group of them



Set properties of DOM elements, in groups (“Find
something, do something with it”)



Creates, deletes, shows, hides DOM elements



Defines event behavior on a page (click, mouse
movement, dynamic styles, animations, dynamic
content)



AJAX calls


jQuery

is “DOM scripting




You can add and subtract



DOM
elements on the fly



You can change the properties and contents of DOM
elements on the
fly



Document Object Model
-

Hierarchical (treelike) structure of
a web page




“The
Document Object Model

(
DOM
) is a
cross
-
platform

and
language
-
independent convention for representing and interacting with
objects

in
HTML
,
XHTML

and
XML

documents. Aspects of the DOM (such as its
"Elements") may be addressed and manipulated within the syntax of the
programming language in use.” Wikipedia


Get it @


www.jquery.com


Installation


download the appropriate jquery.js file and
put it in a folder



How to learn it


www.jquery.com


docs.jquery.com


www.visualjquery.com


www.Jqueryfordesigners.com


www.gscottolson.com/weblog/

-

cheat sheet


www.javascripttoolbox.com/jquery



$(selector).function(…) or $.function(…) or
$(selector).function1(…).function2(…).
functionN
(…);



$() or
jQuery
()


JQuery

objects are created by
jQuery
() or $()


jQuery

object is a wrapper for a selected node or group of DOM nodes


$(“p”) is a
JQuery

object containing all the “p” elements in the document



selector


reference to an element or many different elements on in a document



Function
-

any
jQuery

supported method or plugin.


(…) refers to function parameters


Functions can be chained in sequence


Think CSS!



jQuery

has a built in DOM transversal engine.



$(selector) returns a list of elements on the page that match
the “selector”.



Example: $(“input”) will return a list of ALL input elements
on the page.



Just
add reference to
Jquery

JavaScript file
from anywhere in your
code
.




Document.Ready

is
used to attach events
and many other things
using
JQuery
.


<html>

<head>

<script type="text/
javascript
"
src
="path/to/jquery.js"></script>

<script type="text/
javascript
">

$(document).ready(function()

{

alert(“Welcome to
JQuery
”);

});

</script>

</head>

<body>

<a
href
="http://jquery.com/">jQue
ry</a>

</body>

</html>


11



Document
-
> Ready is
equivalent to body
onload

method and is executed when
entire page and resources have
been loaded in the DOM
.



If
you run the above code you
will get a
Javascript

alert box on
document load
.



Look at the structure of the
document.ready
,
it accepts a
method as a parameter.



Look
between the method
braces


$(document).ready(function()

{

alert(“Welcome to
JQuery
”);

});





function(){

alert(“Welcome to
JQuery
”);}


12



By default,
jQuery

uses "
$
" as a shortcut for "
jQuery




$

is nothing but a shorthand notation for find method
in
JQuery
. You can also use
Jquery
("") instead of
$
("")
however use
$

as it will be consistent.



$

accepts search selector. There are many search
selector which helps in finding elements in DOM tree.



$

returns array of elements.

13



ID selector
. Find DOM element by ID.


Syntax
:
$
("#
myDiv
")
selects element with ID
myDIV
.


ID
search requires # to be
preFixed
.



Element selector:

Find all DOM element by element Type.


Syntax
:
$
("
div")
selects all DIV in the
dom

tree.

Notice no prefix used.



CSS selector:

Find all element with a CSS class.


Syntax
:
$
(".
myClass
")
select all element with
myClass
. CSS class requires
a
dot.



You can also mix and match.


$(

div.main

)
// tag and class


$(

table#data

)
// tag and id


$(
“#content
,

.menu”
)

// find by id + by class


$(
“h1
,

h2, h3,
div.content

)

// multiple combination


Read :
http://docs.jquery.com/Selectors


14



Events in
Jquery

are bound to
elements inside the
document.ready

method. The
elements get bound when
document.ready

is fired.



$("a").click has 2 parts. 1st selector ,
2nd event. The 1st part finds the
element on which method is to be
attached and 2nd part attaches
method on the give event , in this
example a Click.



Look at the syntax , event accepts a
method as a parameter.

$(document).ready(function()

{

$("a").click(function()

{

alert("Thanks for visiting!");

});

});



Read:
http://docs.jquery.com

15



jQuery

abstracts events


.click()


.blur()


.focus()


.change()


Etc…



Attached via selectors



$(<select0r>).
eventname
(<
functionpointer
> or inline);



$("a").click(function(){




$(this).
addClass
(‘red’);});

16



.
css
(‘property’, ‘value’)


.
css
({‘prop1’:‘value1’, ‘prop2’:’value2’…})


E.g. .
css
(‘color’, ‘red’)



$(“div”).
show
();
// just show


$(“div”).
show
(“slow”);
// reveal slowly, slow=600ms


$(“div”).
hide
(“fast”);
// hide fast, fast=200ms


$(“div”).
toggle
(100);
// hide or show in 100ms


$(“div”).
slideUp
();


$(“div”).
slideDown
(“fast”);


$(“div”).
slideToggle
(1000);


$(“div”).
fadeIn
(“fast”);


$(“div”).
fadeOut
(“normal”);


$(“div”).
fadeTo

(“fast”, 0.5);
// fade to a custom opacity





17



Example


Show/Hide
the old way


<
a
href
="#"
onclick
="
toggle_visibility
('
foo
');">Click
here to toggle visibility of #
foo
</a>


function
toggle_visibility
(id) {


var

e =
document.getElementById
(id);


if(
e.style.display

== 'block')


e.style.display

= 'none';


else


e.style.display

= 'block';


}


Example


Show/Hide
with
jQuery


$().ready(function(){


$("a").click(function(){



$("#more").toggle("slow");




return false;



});


});


18



Jquery

can have performance implication dependent on how you write code.



Generalization is good but excess is bad. Remember every $/Find search using
attribute /element ,parses the DOM for elements and excessive use can cause the
browse to hang.



Use ID selector as much as possible or at least use nested selector using the ID as
parent. To search all input element


$(
"
input
"
)
will perform slower than


$(
"
#
tableName

input
"
)

which will be faster
.



Use
JQuery

methods only to change properties , get values and modify attribute s, to
avoid cross browser issues.



Remember
JQuery

offers abstraction to provide a common interface for all cross
browser method and members.

19



www.jquery.com



jQuery

homepage


www.learningjquery.com



jQuery

tutorial blog


www.visualjquery.com



jQuery

documentation


http://ui.jquery.com


jQuery

user interface


http://bassistance.de/jquery
-
plugins/

-

homepage of the
author of several useful
jQuery

plugins
.

20