Scribd
Upload
142 views

Manual Jquery

This document provides an introduction to jQuery, including: - jQuery is a lightweight JavaScript library that makes interacting with HTML elements and handling browser-specific behavior much easier. - It was created in 2006 and is free, open-source software. - jQuery helps developers create dynamic web pages and interactive features without needing to write long pieces of JavaScript code.

Uploaded by

Jerson Callejas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
142 views

Manual Jquery

This document provides an introduction to jQuery, including: - jQuery is a lightweight JavaScript library that makes interacting with HTML elements and handling browser-specific behavior much easier. - It was created in 2006 and is free, open-source software. - jQuery helps developers create dynamic web pages and interactive features without needing to write long pieces of JavaScript code.

Uploaded by

Jerson Callejas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 24

Introduction to jQuery

JavaScript
A script language that interpreted

by browser
OOP
Dynamic typing
Run-time evaluation

JavaScript Libraries
jQuery
Mootools
Prototype
YUI

Introduction to jQuery

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

Introduction to jQuery

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

Introduction to jQuery
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) <p> elements having the CSS class
$(p:first) $(p:last) $(p:odd) $(p:even)
$(p:eq(2))
gets the 2nd <p> element (1 based)
$(p)[1]
gets the 2nd <p> element (0 based)
$(p:nth-child(3))
gets the 3rd <p> 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>
$(p>a)
<a> elements, direct child of a <p>
$(p+a)
<a> elements, directly following a <p>
$(p, a)
<p> and <a> elements
$(li:has(ul))
<li> elements that have at least one <ul> descendent
$(:not(p))
all elements but <p> elements
$(p:hidden)
only <p> elements that are hidden
$(p:empty) <p> 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 <p> 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(<p>Inserted before #target</p>);


$(#target).after(<p>This is added after #target</p>);
$(#target).append(<p>Goes inside #target, at end</p>);
$(#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()

You might also like