Downloaded 22 times
Uploaded byLaurence Svekis ✔
Web Development Introduction to jQuery
The document introduces jQuery, a popular JavaScript library that simplifies programming by wrapping common tasks into easy-to-use methods, facilitating DOM manipulation and AJAX interactions. It emphasizes the importance of understanding the Document Object Model (DOM) for effective usage of jQuery, highlighting its features such as event handling, animations, and seamless server communication without page reloads. Additionally, it covers the use of AJAX for dynamic content updates, emphasizing JSON as a preferred data format for asynchronous communication.
Web Development Introduction to jQuery
- 1.
- 2. The most popularJavaScript library in use today Installed on 65% of the top 10 million highest-trafficked sites on the Web jQuery is free, open-source software licensed under the MIT License jQuery is a JavaScript Library It simplifies JavaScript programming
- 3. jQuery wraps commonJavaScript tasks into a method which you can then call with simple lines of code. Makes it easier to navigate a document Select DOM elements Create animations Handles Events Use AJAX
- 4. Create powerful dynamicinteractions with web users via jQuery
- 5. jQuerycom Having a experiencewith JavaScript and CSS will help you get started with jQuery quicker
- 6. It’s small insize and loads quickly Really powerful features allow you to create interactions faster Simple straight forward Selectors are the same as CSS It’s easy to learn and get started with Easier to add JavaSCript functionality to your website
- 7.
- 8. Introduction to jQuery Thereare a number of way to get jquery http://jquery.com/download/ Use CDN (Content Delivery Network) https://developers.google.com/speed/libraries/ If you download make sure you place it in a directory that your can access it from. Benefits of CDN - visitors may already have it cached within their browsers, which allows for quicker load times.
- 9. Including the libraryjQuery Link to <script src="https://ajax.googleapis.com/ajax/libs/ jquery/1.12.2/jquery.min.js"></script>
- 10.
- 11. INTRODUCTION TO DOCUMENTOBJECT MODEL jQuery, at its core, is a DOM (Document Object Model) manipulation library. So understanding the DOM is important to understanding how jQuery works.
- 12. INTRODUCTION TO DOCUMENTOBJECT MODEL jQuery, at its core, is a DOM (Document Object Model) manipulation library. So understanding the DOM is important to understanding how jQuery works.
- 13. WHAT IS THEDOM? DOCUMENT OBJECT MODEL https://en.wikipedia.org/wiki/Document_Object_Model The Document Object Model (DOM) is a cross-platform and language- independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API).
- 14. WHAT IS THEDOM? DOCUMENT OBJECT MODEL JavaScript allows for client-side interactivity. DOM is the standardized format for the complete model of the webpage. Its provides a means to change any portion of the document, handle events, and more. To render an HTML page, most web browsers use an internal model similar to the DOM. Nodes ( all the pieces of the page ) are organized in a tree structure. The tree stems from a main node referred to as the document object.
- 15. WHAT IS THEDOM? DOCUMENT OBJECT MODEL When a web page is loaded it creates a DOM of the page. JavaScript can ● JavaScript can add, change, and remove all the HTML elements and attributes in the page ● JavaScript can change all the CSS styles in the page ● JavaScript can react to all existing events in the page ● JavaScript can create new events in the page
- 16. WHAT IS THEDOM? DOCUMENT OBJECT MODEL Chrome comes with a built in DOM inspector. We want the page to fully load before we try to access page content!
- 17.
- 18. JQUERY $ Jquery Object$ uses $ to define jQuery. jQuery has two usage styles: Via the $ function, which is a factory method for the jQuery object. These functions, often called commands, are chainable as they all return jQuery objects. Via $.-prefixed functions. These are utility functions, which do not act upon the jQuery object directly. Selectors are CSS syntax - if you are familiar with CSS selectors, jQuery selectors will be straightforward.
- 19. JQUERY jQuery is runwhen the document is ready. <script type="text/javascript"> $(document).ready(function(){ // jQuery code }); </script>
- 20. JQUERY Same as the$(document).ready(function(){ but shorter. You can use either. <script type="text/javascript"> $(function(){ // jQuery code }); </script>
- 22. JQUERY SELECTORS jQuery Selectors Workslike CSS and has its own custom selectors. Once selected you probably will want to do something with the element. Example l1.html
- 23. HTML AND DOMMANIPULATION The DOM allows scripts to access and manipulate web documents. text() html() val() Example script1.js
- 24. SELECTORS SET $(“id”).html(‘new’); $(“.class”).html(‘new’); $(“p”).html(‘new’); Setting contentto value of new Changing page content Update your HTML with jquery
- 25. SELECTORS GET $(“#id”).html(); $(“.class”).html(); -this returns the first class value $(“p”).html(); - this returns the first tag value You should be specific with get on the content. Content should be retrieved from a single element. Get page content
- 26. SELECTORS EXPLICIT ITERATION Loopingof multiple elements. When you loop you generally may want to apply specific changes to each of the matching selections. Appending of content But you can also list out selections individually….
- 27. UPDATING HTML USINGJQUERY Append After prepend Before Empty Remove Although they may initially sound similar there are differences.
- 28.
- 29. User initiates atrigger Most commonly used are click events $( 'li' ).click(function( event ) { console.log( 'clicked', $( this ).text() ); });
- 30. stops the defaultaction of an element from happening. event.preventDefault(); <a></a> hyperlinks…...
- 31.
- 32.
- 33. keydown() keyup() keypress() Get keyinformation
- 34.
- 35.
- 36. JQUERY TRAVERSING HTML elementsin relation to other HTML elements. Moving from the starting point element to other elements within the page until you reach the desired element. Parents Children siblings
- 37. JQUERY TRAVERSING FAMILY Firsttop element that contains others is an ancestor or parent to the elements within it. Child is descendant of the parent, and sibling to the other elements that share the same parent. Parent is the immediate parent whereas parents are all ancestors up to html
- 38. JQUERY TRAVERSING FIND Getsall the descendants of each element
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. Simple hide() andshow()
- 46.
- 47. Sliding moving theelement slideDown() slideUp() slideToggle()
- 48. You can performanimation .animate()
- 49. You can addmore than one effect chaining methods together in jQuery
- 50.
- 51. What is AJAX asynchronousJavaScript and XML Using AJAX web applications can send data to and retrieve data from a server without page reloads. Ability to change content dynamically. Despite the name, the use of XML is not required (JSON is often used in the AJAJ variant), and the requests do not need to be asynchronous. JavaScript Object Notation (JSON) is often used as an alternative format for data interchange, although other formats such as preformatted HTML or plain text can also be used https://en.wikipedia.org/wiki/Ajax_(programming)
- 52. AJAX AJAX requests happenin the background making them invisible to the user. Allowing you to access data that is not currently loaded within the page. Behavior is smooth and seamless jQuery make AJAX easy $.get(), $.post(), load(), $.getJSON(), $.post(), $.ajax()
- 54. What is JSON JSONis an open-standard format that uses human-readable text to transmit data objects consisting of attribute–value pairs. It is the most common data format used for asynchronous browser/server communication (AJAJ), largely replacing XML which is used by AJAX. JSON is a language-independent data format
- 55. Using LOAD() toget data $(“#output”).load('php.php'); Uses Selectors to load the result of the AJAX call inside the selected element
- 56. Using Get toget data $.get('php.php', function (data) { ///reads contents of php.php into data }); Handles the success response of the AJAX call Free to define the behavior you want Simple way to make AJAX calls Static and dynamic documents both work
- 57. Using GetJSON toget data $.get('php.php', function (data) { ///reads contents of php.php into data }); Result type is expected JSON format Shorthand for get retriving JSON data
- 58. Using AJAX post $.post('php.php',data, function (data) { ///reads contents of php.php into data }); Send data to server securely
- 59. jQuery $.ajax() More controlwith settings Used when other methods cannot be used
- 60. More about AJAX http://api.jquery.com/category/ajax/ SameOrigin policy https://en.wikipedia.org/wiki/Same-origin_policy https://en.wikipedia.org/wiki/Cross-origin_resource_sharing Get the course https://www.udemy.com/web-development-introduction-to- jquery/?couponCode=SLIDESHARE