Basics of HTML, DOM & JQuery specially for freshers

1. HTML DOM & JQuery
“Less is more”
Compiled from Wikipedia.org, W3Schools.com & JQuery.com
by Abdul Hafeez

2. HTML DOM & JQuery : Agenda
• DOM – Document Object Model
• DOM History
• Node Document Tree
• Find & Access Nodes
• What is JQuery
• Why JQuery
• JQuery Philosophy
• How to assign events using JQuery
• Asynchronous Dynamic Fun

3. DOCUMENT OBJECT MODEL
• Platform and language independent standard object model for representing HTML or
XML related formats
• Level 1 DOM specification is published in 1998 by W3C, and it allowed to and
manipulation of every single element.
• No cross browser incompatibility
• DOM is the way JavaScript sees its containing HTML page
• DOM supports navigation in any direction
• SAX (Simple API for XML) is a popular alternative to the DOM
• DOM is separated in different parts
– Core
– XML
– HTML
• And into different levels, Level 1/2/3

4. HTML DOM
• Defines a standard way for accessing and manipulating
HTML documents
• Everything in an HTML document is a node.
– Document Node : Entire Document
– Element Node : HTML tags
– Text Node : Texts in element node
– Attribute Node : HTML attribute
– Comment Nodes

5. • DOM presents an HTML document as a tree structure (a node tree) with elements,
attributes and texts.
The tree starts at the document node and continues to branch out until it has reached
all text nodes at the lowest level.
• All the nodes in a node tree have relationships to each other (e.g. parent/child).
HTML DOM
Contd….

6. • With JavaScript we can restructure an entire HTML
document. We can add, remove, change or reorder
items on a page.
• To do so, JavaScript needs access to all elements in the
HTML document, and this access to the elements is
given through DOM.
HTML DOM
Contd….

7. Node/Document Tree
• All nodes have relationships to each other
• Except document node, every other node has a parent node
• Most element nodes have child nodes
• Nodes might share a parent and we call them siblings
• Nodes can also have descendants, meaning all the nodes that are children of a node,
or children of those children and so on.
• Nodes can also have ancestors. Ancestors are nodes that are parents of a node, or
parents of this parent and so on.

8. Find & Access Nodes
• JavaScript provides methods and properties to find and access nodes
• Using getElementById() and getElementByTagName() mothods
– It doesn’t follow document structure
– Can find any HTML element in the entire document.
– Gives us the HTML element(s) we need regardless of where they are in the document
– getElementByTagName(‘p’) gives us all the <p> elements in the document
– getElementById(‘RT’) returns the correct element whether it is hidden in the tree
• Using parentNode, firstChild and lastChild properties of an element node
– Follows document structure and allow short-distance travel in the document

9. What is jQuery
• An open source JavaScript library that simplifies the
interaction between HTML and JavaScript
• Is designed to change the way you write JavaScript

10. Why jQuery?
• Fully documented
• Great community
• Tons of plugins
• Small size (15kb)
• Everything works in IE 6+, Firefox, Safari 2+ and Opera
9+
• Simplifies how you handle events, perform animations or
add Ajax interactions
• And it is fast
• Can learn in 30 minutes

11. jQuery Philosophy
• (Almost) every operation boils down to:
– Find some stuff
– Do something to it

12. jQuery
• Select all <div> tags from the document
• document.getElementsByTagName(‘div’)
• jQuery(‘div’)
• $(‘div’)
• Select an element whose id is ‘DX’
• document.getElementById(‘DX’)
• $(‘#DX’)
• $(‘#DX’).hide(‘slow’)

13. jQuery
• Add a class (css) to all links in a document
• $(‘a’).addClass(‘cssURL’)
• Find all divs that do not have an id attribute
• $(‘div’).not(‘[@id]’)
• Find the fifth paragraph on the page, then find
the next element (its direct sibling)
• $(‘p’).eq(4).next()
Contd….

14. jQuery
• jQuery can take a snippet of HTML and it will
turn into a DOM element
• var div = $(‘<div>Dexter is in lab</div>’);
• div.addClass(‘cssDiv’);
• div.attr(‘id’,’DX’);
• Chaining
• var div = $(‘<div>text</div>’).addClass(‘cd’).attr(‘id’, ‘DX’);
• div.appendTo(‘div#FX’)
Contd….

15. jQuery
• Find this, do something
$(‘#DX’).show(‘medium’);
$(‘#FX’).addClass(‘css’);
• Chainable events: find this, do several things in
succession
$(‘#GX’).fadeIn(‘slow’).addClass(‘css’).html(‘Text’);
Contd….

16. How do you assign events?
• Don't add "onclick" to your markup: use jQuery to find
and assign events
$(‘#control’).click(function() {
$(‘#DX’).show().addClass(‘css’);
});

17. Asynchronous Dynamic Fun
• Asynchronous HTML and HTTP
$(‘#control’).click(function() {
$(‘#DX’).load(‘service.php’);
});

18. Asynchronous Dynamic Fun
• JSON Style (JavaScript Object Notation)
$(‘#control’).click(function() {
$.getJSON(‘service_json.php’, function(json)() {
alert(json);
});
});
• $.get( url, params, callback )
Load a remote page using an HTTP GET request.
• $.getScript( url, callback )
Loads and executes, a remote JavaScript file using an HTTP GET request.
• $.post( url, params, callback )
Load a remote page using an HTTP POST request.
Contd….

19. References
• http://www.jquery.com
• http://docs.jquery.com
• http://jquery.bassistance.de/api-browser
• http://www.learningjquery.com
• http://15daysofjquery.com

20. Q&A

21. Contact
Abdul Hafeez
habdul@in.com
http://in.linkedin.com/in/habdul
http://twitter.com/hafeez1216
http://drupal.coolpage.biz
http://drupal.org/user/315349