Download presentation
Presentation is loading. Please wait.
1
Document Object Model
2
jQuery Intro and Overview
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.
3
jQuery Features HTML element selections HTML element manipulation
CSS manipulation HTML event functions JavaScript Effects and animations HTML DOM traversal and modification AJAX Utilities
4
What jQuery does 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
5
Basic of 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 .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”>
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(selector)
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> <div>old content</div> <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
<!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> jQuery - example2 - 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
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <form> <input name="" type="checkbox" /> <input name="" type="radio" /> <input name="" type="text" /> <input name="" type="button" /> </form> jQuery - example 3 - html
22
jQuery - example 3 <!– onderaan het HTML document <script type="text/JavaScript" src="jquery.js"></script> <script type="text/JavaScript"> //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
Similar presentations
