Web Development Introduction to jQuery
Download as PPTX, PDF0 likes387 views
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
- 2. The most popular JavaScript 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 common JavaScript 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 dynamic interactions with web users via jQuery
- 5. jQuerycom Having a experience with JavaScript and CSS will help you get started with jQuery quicker
- 6. It’s small in size 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
- 8. Introduction to jQuery There are 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 library jQuery Link to <script src="https://ajax.googleapis.com/ajax/libs/ jquery/1.12.2/jquery.min.js"></script>
- 10. Powerful JQUERY
- 11. INTRODUCTION TO DOCUMENT OBJECT 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 DOCUMENT OBJECT 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 THE DOM? 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 THE DOM? 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 THE DOM? 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 THE DOM? 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. Powerful JQUERY
- 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 run when 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 Works like 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 DOM MANIPULATION 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 content to 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 Looping of 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 USING JQUERY Append After prepend Before Empty Remove Although they may initially sound similar there are differences.
- 28. Events
- 29. User initiates a trigger Most commonly used are click events $( 'li' ).click(function( event ) { console.log( 'clicked', $( this ).text() ); });
- 30. stops the default action of an element from happening. event.preventDefault(); <a></a> hyperlinks…...
- 33. keydown() keyup() keypress() Get key information
- 36. JQUERY TRAVERSING HTML elements in 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 First top 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 Gets all the descendants of each element
- 41. CSS
- 43. attributes
- 45. Simple hide() and show()
- 47. Sliding moving the element slideDown() slideUp() slideToggle()
- 48. You can perform animation .animate()
- 49. You can add more than one effect chaining methods together in jQuery
- 51. What is AJAX asynchronous JavaScript 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 happen in 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 JSON is 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() to get data $(“#output”).load('php.php'); Uses Selectors to load the result of the AJAX call inside the selected element
- 56. Using Get to get 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 to get 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 control with settings Used when other methods cannot be used
- 60. More about AJAX http://api.jquery.com/category/ajax/ Same Origin 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