Manual Jquery

Introduction to jQuery
JavaScript
A script language that interpreted
by browser
OOP
Dynamic typing
Run-time evaluation
JavaScript Libraries
jQuery
Mootools
Prototype
YUI
Developed in 2006 by John Resig at Rochester

Institute of Technology
jQuery is a lightweight JavaScript library that

emphasizes interaction between JavaScript and
HTML
jQuery is free, open source software Dual-licensed

under the MIT License and the
GNU General Public License
Helps web developers to create simple pieces of

interaction without being forced to write long,
complex, book-length pieces of code
Why do I want it
Rich Internet Applications (RIA)
Dynamic HTML (DHTML)
How do I get it
www.jquery.com
How can I learn it
jQuery in Action by Bibeault & Katz, Manning

jQuery Visual Quickstart Guide by Holzner, Peachpit
www.jquery.com
docs.jquery.com
www.visualjquery.com
www.Jqueryfordesigners.com
www.gscottolson.com/weblog/ - cheat sheet
www.javascripttoolbox.com/jquery
Summary
Introduction, installation, Howdy World,
Ready function, DOM, Selecting and

Formatting web page elements
Events and Animations
jQuery Plugin libraries
AJAX with PHP and ASP.NET
Installation
just download the jquery-1.x.x.js file and put it in

your website folder
Using jQuery
Visual Web Developer Express Edition

Expression Web
What jQuery Does

Unobtrusive JavaScript
separation of behavior from structure

CSS
separation of style from structure

Allows adding JavaScript to your web pages
Advantages over
just JavaScript
Much easier to use

Eliminates cross-browser problems
5 Things jQuery Provides

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
The DOM
Document Object Model
jQuery is DOM scripting
Heirarchal structure of a web page
You can add and subtract DOM elements on
the fly
You can change the properties and contents
of DOM elements on the fly
The DOM
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
The jQuery Function

jQuery() = $()
$(function)
The Ready handler

$(selector)
Element selector expression
$(element)
Specify element(s) directly
$(HTML)
HTML creation
$.function()
Execute a jQuery function
$.fn.myfunc(){} Create jQuery function
The Ready Function

Set up a basic HTML page and add jQuery
Create a ready function
Call a function
5 ways to specify the ready function
jquery(document).ready(function(){};);
jquery().ready(function(){};)
jquery(function(){};)
jquery(dofunc);
$(dofunc);
Selecting Elements
Creating a wrapped set
$(selector)
selector:
$(#id)
id of element
$(p)
tag name
$(.class)
CSS class
$(p.class) elements having the CSS class
$(p:first) $(p:last) $(p:odd) $(p:even)
$(p:eq(2))
gets the 2nd element (1 based)
$(p)[1]
gets the 2nd element (0 based)
$(p:nth-child(3))
gets the 3rd element of the parent. n=even, odd too.
$(p:nth-child(5n+1)) gets the 1st element after every 5th one
$(p a)
<a> elements, descended from a 
$(p>a)
<a> elements, direct child of a 
$(p+a)
<a> elements, directly following a 
$(p, a)
 and <a> elements
$(li:has(ul))
<li> elements that have at least one <ul> descendent
$(:not(p))
all elements but elements
$(p:hidden)
only elements that are hidden
$(p:empty) elements that have no child elements
Selecting Elements, cont.

$(img[alt])
$(a[href^=http://])
$(a[href$=.pdf])
$(a[href*=ntpcug])
<img> elements having an alt attribute

<a> elements with an href attribute
starting with http://
<a> elements with an href
attribute ending with .pdf
<a> elements with an href attriute
containing ntpcug
Useful jQuery Functions

.each()
.size()
.end()
.get(n)
.eq(n)
.slice(n,m)
.not(p)
.add(p)
.remove()
.empty()
.filter(fn/sel)
.find(selector)
.parent()
.children()
.next()
.prev()
.siblings()
iterate over the set

number of elements in set
reverts to the previous set
get just the nth element (0 based)
get just the nth element (0 based) also .lt(n) & .gt(n)
gets only nth to (m-1)th elements
dont include p elements in set
add elements to set
removes all the elements from the page DOM
removes the contents of all the elements
selects elements where the func returns true or sel
selects elements meeting the selector criteria
returns the parent of each element in set
returns all the children of each element in set
gets next element of each element in set
gets previous element of each element in set
gets all the siblings of the current element
Formatting Elements
.css(property, value)
.html()
.val()
(form elements)
.text()
.addClass(class)
.removeClass(class)
Add Page Elements
$(#target).before(Inserted before #target);

$(#target).after(This is added after #target);
$(#target).append(Goes inside #target, at end);
$(#target).wrap(<div></div>);
Adding Events
Mouseover events bind, hover, toggle
Button click events
Keystrokes
Event Background
DOM Level 2 Event Model
Multiple event handlers, or listeners, can be

established on an element
These handlers cannot be relied upon to run an
any particular order
When triggered, the event propagates from the top
down (capture phase) or bottom up (bubble
phase)
IE doesnt support the capture phase
Basic Syntax of Event

Binding
$(img).bind(click,function(event){alert(Howdy;});
$(img).bind(click,imgclick(event));
Allows unbinding the function
$(img).unbind(click,imgclick());
$(img).unbind(click);
$(img).one(click,imgclick(event));
Only works once
$(img).click(imgclick);
$(img).toggle(click1, click2);
$(img).hover(mouseover, mouseout);
jQuery Core
jQuery(selector, [ context ]): Accepts a
string containing a CSS selector which is then

used to match a set of elements and returns a
jQuery object.
jQuery(element)
jQuery(elementArray)
jQuery(jQuery object)
jQuery()
can be written as $()
jQuery Events
.ready(handler) : execute handler when the DOM is fully loaded.
js
function printhello(){
$(#hello).html(Hello,
jQuery!);
}
$(document).ready(printhello());
Same as window.onload???
js
$(document).ready(function(){
$(#hello).html(Hello, jQuery!);
});
jQuery Events
.bind()
.blur()
.change()
.click()
.focus()
.hover()
.select()
.toggle()
.trigger()
.submit()
.mousedown()
.mouseenter()
.mouseleave()
.keypress()
.keyup()

Manual Jquery

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual Jquery

Uploaded by

Copyright:

Available Formats

Introduction to jQuery

Developed in 2006 by John Resig at Rochester

jQuery is a lightweight JavaScript library that

jQuery is free, open source software Dual-licensed

Helps web developers to create simple pieces of

How can I learn it

jQuery in Action by Bibeault & Katz, Manning

Ready function, DOM, Selecting and

just download the jquery-1.x.x.js file and put it in

Visual Web Developer Express Edition

What jQuery Does

separation of behavior from structure

separation of style from structure

Much easier to use

5 Things jQuery Provides

elements on a page one element or a group

The jQuery Function

The Ready handler

The Ready Function

Selecting Elements, cont.

<img> elements having an alt attribute

Useful jQuery Functions

iterate over the set

Add Page Elements

$(#target).before(<p>Inserted before #target</p>);

Multiple event handlers, or listeners, can be

Basic Syntax of Event

string containing a CSS selector which is then

can be written as $()

.ready(handler) : execute handler when the DOM is fully loaded.

You might also like