Scribd
Upload
38 views14 pages

Jquery: Comp3001 Scripting Languages Javascript

This document discusses jQuery, a JavaScript library that simplifies common JavaScript tasks like selecting elements, modifying styles and content, handling events, and adding animations. It provides examples of how jQuery can be used to select elements by CSS or XPath expressions, add and remove classes to change styles, and execute code when the page loads. Basic jQuery functions are demonstrated, including selecting elements, adding classes, binding event handlers, and modifying styles and content.

Uploaded by

Ema
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
38 views14 pages

Jquery: Comp3001 Scripting Languages Javascript

This document discusses jQuery, a JavaScript library that simplifies common JavaScript tasks like selecting elements, modifying styles and content, handling events, and adding animations. It provides examples of how jQuery can be used to select elements by CSS or XPath expressions, add and remove classes to change styles, and execute code when the page loads. Basic jQuery functions are demonstrated, including selecting elements, adding classes, binding event handlers, and modifying styles and content.

Uploaded by

Ema
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/ 14

JQuery

COMP3001
Scripting Languages
JavaScript

JQuery
Powerful JavaScript library
Simplify common JavaScript tasks
Access parts of a page
using CSS or XPath-like expressions

Modify the appearance of a page


Alter the content of a page
Change the users interaction with a page
Add animation to a page
Provide AJAX support
Abstract away browser quirks

Introductory Sample
<html>
<body>
<h1>Cities of the World</h1>
<dl>
<dt>Paris</dt><dd>Chic,
fashionable, expensive
rude</dd>
<dt>Sydney</dt><dd>Opera
house but no culture, Mardi
Gras, fireworks</dd>
</dl>
</body>
</html>

h1 {font-size: 2.5em;
margin-bottom: 0;}
.emphasize {font-style:
italic; color:red;}

Basic JQuery
Selecting part of document is
fundamental operation
A JQuery object is a wrapper for a
selected group of DOM nodes
$() function is a factory method that
creates JQuery objects
$(dt) is a JQuery object containing all
the dt elements in the document

Basic JQuery
.addClass() method changes the DOM nodes
by adding a class attribute
The class attribute is a special CSS construct that
provides a visual architecture independent of the
element structures

$(dt).addClass(emphasize) will change all


occurrences of <dt> to
<dt class=emphasize>
See also .removeClass()

Basic JQuery
To make this change, put it in a function and
call it when the document has been loaded
and the DOM is created
function doEmph(){$(dt).addClass(emphasize)}
<body onLoad=doEmph()>

We had to alter the HTML (bad)


Structure and appearance should be
separated!
Also, onLoad waits until all images etc are
loaded. Tedious.

Basic JQuery
JQuery provides an independent scheduling
point after DOM is created and before images
are loaded
$(document).ready(doEmph);

No HTML mods required. All done in script.


Better solution:
$(document).ready(function(){
$(dt).addClass(emphasize)

});

<html><head>
<script src="jquery.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>

JQuery Selectors
CSS
p
#id
.class
p.class
pa
p>a

element name
identifier
classname
element with class
anchor as any descendant of p
anchor direct child of p

JQuery Selectors
XPath
/html/body//div
paths
a[@href]
anchor with an href attr
div[ol]
div with an ol inside
//a[@ref='nofollow'] any anchor with a
specific value for the ref attribute

JQuery Filters
p:first
li:last
a:nth(3)
a:eq(3)
p:even or p:odd
a:gt(3) or a:lt(4)
a:contains(click)

first paragraph
last list item
fourth link
fourth link
every other paragraph
every link after the 4th or
up to the fourth
links that contain the
word click

Example
JQuery uses chaining as follows
$(a:contains("ECS")).
parent().
addClass("emphasize")

JQuery Events
bind(eventname, function) method
click
change
resize

$(a[@href]).bind(click,function(){
$(this).addClass(red);});

Other JQuery Effects


.css(property, value)
.css({prop1:value1, prop2:value2})
E.g. .css(color, red)
.hide(speed) or .show(speed)
Where speed is slow, normal or fast

More JQuery Changes DOM


.attr({name, value})
sets a new attribute (or many)

$(<i>hello</i>)
Creates a new element

$(<i>hello</i>).insertAfter(div.chapter p);
Creates element and inserts it into the document

.html() or .text() or .empty() will replace matched


elements with newly created elements

You might also like