Document Object Model

(1)

Document Object Model

(2)

•

jQuery is an open source JavaScript library that simplifies the interactions

between an HTML document, or more precisely the Document Object Model (DOM) and JavaScript. Query is free, open source software.

•

Java Script A scripting language developed by Netscape to enable Web authors to design interactive sites. It can interact with HTML source code, enabling Web authors to spice up their sites with dynamic content.

•

DOM(Document Object Model)

It is the specification for how objects in a Web page are represented.

The DOM defines what attributes are associated with each object, and how the objects and attributes can be manipulated.

jQuery Intro and

Overview

(3)

• HTML element selections

• HTML element manipulation

• CSS manipulation

• HTML event functions

• JavaScript Effects and animations

• HTML DOM traversal and modification

• ^AJAX

• Utilities

jQuery Features

(4)

• Access elements in a document.

• Modify the appearance of a web page

• Alter the content of a document

• Respond to a user's interaction

• Animate changes being made to a document

• Retrieve information from a server without refreshing a page

• Simplify common JavaScript tasks

What jQuery does

(5)

•

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

•

.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”>

Basic of jQuery

(6)

Adding the jQuery Library to Your Pages

<head>

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

</head

jQuery---“Write less, do more.”

•Finding some elements (via CSS selectors) and doing something with them (via jQuery methods)

•Chaining multiple jQuery methods on a set of elements

•Using the jQuery wrapper and implicit iteration

(7)

jQuery API's

• jQuery Core

• Selectors

• ^Attributes

• ^Traversing

• Manipulation

• ^CSS

• ^Events

• ^Effects

• ^Ajax

• ^Utilities

(8)

jQuery Fundamentals

• jQuery Wrapper

It is a method that uses of selectors, which

concisely represent elements based upon their attributes or positions within the HTML

document.

• ^Example:

a

a - refers to group of all links (<a> element).

• To collect the <a> element in your page,

we can use the syntax:

(9)

jQuery - selector

• To collect the <a> element in your page,

we can use the syntax:

• Applying the jQuery to collect the elements, this would be:

$(“a”).hide()

$(selector) or

jQuery(selecto

r)

(10)

jQuery - Document ready handler

• This handler is executed when the DOM has been created,

but before the page is presented to the user.

• This guarantees that you can set up the page prior to the user being able to interact with it.

• First, we wrap the document instance with the jQuery() function,

• Then we apply the ready() method, passing a function to be executed

when the document is ready to be manipulated.

$(document).ready(function() {

});

(11)

jQuery - Making DOM elements

• We can create DOM elements on the fly by passing the $() function a string

that contains the HTML markup for those elements.

• For example, we can create a new paragraph element as follows:

$("<p>Hi there!</p>")

(12)

jQuery - Syntax

• $(this).hide()

– Demonstrates the jQuery hide() function, hiding the current HTML element.

• $("#test").hide()

– Demonstrates the jQuery hide() function, hiding the element with id="test“.

• $("p").hide()

– Demonstrates the jQuery hide() function, hiding all< p> elements.

• $(".test").hide()

– Demonstrates the jQuery hide() function, hiding all elements with

class="test".

(13)

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 alias.

• A (selector) to "query (or find)" HTML elements

• A jQuery action() to be performed on the

element(s)

(14)

jQuery - example - html

<!DOCTYPE html >

<html>

<head>

<script type="text/JavaScript" src="jquery.js"></script>

<script type="text/JavaScript" src="myscript.js"></script>

</head>

<body><b>

<div>old content</div>

<div>old content</div></b>

<script>

(15)

jQuery - example – myscript.js

//update the text contained inside of all divs

$(document).ready(

function() {

alert('Document Handler is Ready');

});

$(function() {

$('div').text('new content');});

(16)

jQuery - example – demo

(17)

jQuery - example – demo

(18)

jQuery - example2 - html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

<a href='#'>link 1</a><br>

<a href='#'>link 2</a><br>

<a href='#'>link 3</a><br>

<a href='#'>link 4</a><br>

<a href='#'>link 5</a><br>

<a href='#'>link 6</a><br>

<script type="text/JavaScript"

src="jquery.js"></script>

<script type="text/JavaScript">

//alerts there are 6 elements

alert('Page contains ' + $('a').length + ' <a> elements!');

</script>

</body>

</html>

(19)

jQuery - example2

<!– onderaan het HTML document 

<script type="text/JavaScript"

src="jquery.js"></script>

<script type="text/JavaScript">

//alerts there are 6 elements

alert('Page contains ' + $('a').length + ' <a>

elements!');

</script>

(20)

jQuery - example2 - demo

(21)

jQuery - example 3 - html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<form>

</form>

<form>

</form>

(22)

jQuery - example 3

<!– onderaan het HTML document 

src="jquery.js"></script>

//searches within all form elements, using a wrapper for context, alerts "8 inputs"

alert('selected ' + jQuery('input',$('form')).length + ' inputs');

//search with the first form element, using DOM reference as the context, alerts //"4 inputs"

alert('selected' + jQuery('input',document.forms[0]).length + ' inputs');

//search within the body element for all input elements using an expression, //alerts "12 inputs"

alert('selected' + jQuery('input','body').length + ' inputs');

</script>

(23)

jQuery - example 3 -

demo

(24)

jQuery - example 3 -

demo

(25)

jQuery - example 3 -

demo

(26)

Document Object Model