HTML DOM & JQuery
“Less is more”
Compiled from Wikipedia.org, W3Schools.com & JQuery.com
by Abdul Hafeez
HTML DOM & JQuery : Agenda
• DOM – Document Object Model
• DOM History
• Node Document Tree
• Find & Access Nodes
• What i...
DOCUMENT OBJECT MODEL
• Platform and language independent standard object model for representing HTML or
XML related forma...
HTML DOM
• Defines a standard way for accessing and manipulating
HTML documents
• Everything in an HTML document is a node...
• DOM presents an HTML document as a tree structure (a node tree) with elements,
attributes and texts.
The tree starts at ...
• With JavaScript we can restructure an entire HTML
document. We can add, remove, change or reorder
items on a page.
• To ...
Node/Document Tree
• All nodes have relationships to each other
• Except document node, every other node has a parent node...
Find & Access Nodes
• JavaScript provides methods and properties to find and access nodes
• Using getElementById() and get...
What is jQuery
• An open source JavaScript library that simplifies the
interaction between HTML and JavaScript
• Is design...
Why jQuery?
• Fully documented
• Great community
• Tons of plugins
• Small size (15kb)
• Everything works in IE 6+, Firefo...
jQuery Philosophy
• (Almost) every operation boils down to:
– Find some stuff
– Do something to it
jQuery
• Select all <div> tags from the document
• document.getElementsByTagName(‘div’)
• jQuery(‘div’)
• $(‘div’)
• Selec...
jQuery
• Add a class (css) to all links in a document
• $(‘a’).addClass(‘cssURL’)
• Find all divs that do not have an id a...
jQuery
• jQuery can take a snippet of HTML and it will
turn into a DOM element
• var div = $(‘<div>Dexter is in lab</div>’...
jQuery
• Find this, do something
$(‘#DX’).show(‘medium’);
$(‘#FX’).addClass(‘css’);
• Chainable events: find this, do seve...
How do you assign events?
• Don't add "onclick" to your markup: use jQuery to find
and assign events
$(‘#control’).click(f...
Asynchronous Dynamic Fun
• Asynchronous HTML and HTTP
$(‘#control’).click(function() {
$(‘#DX’).load(‘service.php’);
});
Asynchronous Dynamic Fun
• JSON Style (JavaScript Object Notation)
$(‘#control’).click(function() {
$.getJSON(‘service_jso...
References
• http://www.jquery.com
• http://docs.jquery.com
• http://jquery.bassistance.de/api-browser
• http://www.learni...
Q&A
Contact
Abdul Hafeez
habdul@in.com
http://in.linkedin.com/in/habdul
http://twitter.com/hafeez1216
http://drupal.coolpage.b...
Upcoming SlideShare
Loading in …5
×

Html dom & j query

2,490 views

Published on

Basics of HTML, DOM & JQuery specially for freshers

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,490
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
44
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html dom & j query

  1. 1. HTML DOM & JQuery “Less is more” Compiled from Wikipedia.org, W3Schools.com & JQuery.com by Abdul Hafeez
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. jQuery Philosophy • (Almost) every operation boils down to: – Find some stuff – Do something to it
  12. 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. 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. 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. 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. 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. 17. Asynchronous Dynamic Fun • Asynchronous HTML and HTTP $(‘#control’).click(function() { $(‘#DX’).load(‘service.php’); });
  18. 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. 19. References • http://www.jquery.com • http://docs.jquery.com • http://jquery.bassistance.de/api-browser • http://www.learningjquery.com • http://15daysofjquery.com
  20. 20. Q&A
  21. 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

×