Document Object Model
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.
jQuery Features HTML element selections HTML element manipulation CSS manipulation HTML event functions JavaScript Effects and animations HTML DOM traversal and modification AJAX Utilities
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
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”>
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
jQuery API's jQuery Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities
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:
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)
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() { });
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>")
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".
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)
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>
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');});
jQuery - example – demo
jQuery - example – demo
<!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
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>
jQuery - example2 - demo
<!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
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>
jQuery - example 3 - demo
jQuery - example 3 - demo
jQuery - example 3 - demo