Slide 1JavaScript FrameworksjQuery: IntroductionFeaturesjQuery: IntroductionjQuery: SyntaxjQuery: SyntaxjQuery: Document Ready EventjQuery: Document Ready EventjQuery: SelectorsjQuery: SelectorsjQuery: Selector ExamplejQuery: EventsjQuery: Event ExamplejQuery: Event ExamplejQuery: Page Effects – Hide & ShowjQuery: Page Effects – Hide/ShowjQuery: Page Effects – Hide/ShowjQuery: Page Effects - FadingjQuery: Page Effects - FadingjQuery: Page Effects - FadingjQuery: Page Effects - SlidingjQuery: Page Effects - SlidingjQuery: Page Effects - AnimationsjQuery: Page Effects - AnimationsjQuery: Page Effects – Callback FunctionsjQuery: Page Effects - ChainingjQuery: Page Effects – ChainingjQuery: HTML Methods - GetjQuery: HTML Methods - GetjQuery: HTML Methods - GetjQuery: HTML Methods - GetjQuery: HTML Methods - SetjQuery: HTML Methods - SetjQuery: HTML Methods - SetjQuery: HTML Methods - AddjQuery: HTML Methods - RemovejQuery: HTML Methods - RemovejQuery: HTML Methods - RemovejQuery: HTML Methods - RemovejQuery: HTML Methods - CSSjQuery: HTML Methods - CSSjQuery: HTML Methods - CSSjQuery: HTML Methods - CSSjQuery: DOM TraversingjQuery: DOM Traversing - AncestorsjQuery: DOM Traversing - AncestorsjQuery: DOM Traversing - DescendantsjQuery: DOM Traversing - DescendantsjQuery: DOM Traversing - DescendantsjQuery: DOM Traversing - SiblingsjQuery: DOM Traversing - SiblingsAJAX: Brief IntroductionAJAX: Brief IntroductionAJAX ExamplesWEB PROGRAMMING LANGUAGESjQuery and AJAXJavaScript FrameworksjQuery: Introduction•jQuery: write less, do more•popular JavaScript library•used by: Google, IBM, Microsoft, Nokia, Netflix, etc.•designed to simplify DOM-oriented client-side scripting•lightweight, "write less, do more", JavaScript library•jQuery makes it easier to write client-side scripting code•jQuery creates higher-level methods needed for achieving common tasks by wrapping several JavaScript statements into a single call•Example: AJAX calls and DOM manipulationFeatures•The jQuery library contains the following features:•HTML/DOM manipulation•CSS manipulation•HTML event methods•Effects and animations•AJAX•Utilities•plugins to deal several real-world tasksjQuery: Introduction•How to use jQuery:•Download the jQuery library from jQuery.com •Two versions:•Production version - live website (production system): minified and compressed•Development version - testing and development environments: uncompressed and readable code•The jQuery library is a single JavaScript file•Place the jQuery library file in the same directory as the pages where you wish to use it•Reference jQuery library file with the HTML <script> tag<head> <script src="jquery-3.3.1.min.js"></script></head> •Include jQuery library from CDNs (Content Delivery Network) like Google or Microsoft:<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script></head>jQuery: Syntax•Use jQuery Selector to select/query HTML elements•Actions can then be performed on the selected/queried elements•jQuery functions can be stored in a separate .js file and referenced using the “script” element’s “src” attribute•Basic syntax is: $(selector).actio n()•$ sign to specify jQuery•selector to specify the HTML elements to select/query•action is the action to be performed on the element(s)jQuery: Syntax•Examples:•$(this).hide() - hides the current element•$("p").hide() - hides all <p> elements•$(".test").hide() - hides all elements with class="test"•$("#test").hide() - hides the element with id="test"jQuery: Document Ready Event•Document Ready Event is used to prevent any jQuery code from running before the document is finished loading•Good practice to wait for the document to be fully loaded and ready before manipulating it•Document Ready Event allows for JavaScript code to be present in the HTML document head section•Problems if JavaScript Statements run before document is fully loaded:•hide an element that is not created yet•get the size of an image that is not loaded yetjQuery: Document Ready Event•Usage:$(document).ready(function(){ // jQuery methods go here...});OR$(function(){ // jQuery methods go here...});jQuery: Selectors•jQuery uses CSS syntax to select elements•jQuery selectors are used to find/select/query HTML elements based on:•id•classes•types•attributes•values of attributes•etc.•jQuery selectors are based on the existing CSS selectors•In addition, jQuery has custom selectors•jQuery selectors start with the dollar sign and open parentheses and end with closed parenthesis•Examples:•$(this) – select current element•$("p") – select all <p> elements•$(".test") – select all elements with class="test"•$("#test") - select the element with id="test"jQuery: Selectors$("*") Selects all elements$(this) Selects the current HTML element$("p.intro") Selects all <p> elements with class="intro"$("p:first") Selects the first <p> element$("ul li:first") Selects the first <li> element of the first <ul>$("ul li:first-child")Selects the first <li> element of every <ul>$("[href]") Selects all elements with an href attribute$("a[target='_blank']")Selects all <a> elements with a target attribute value equal to "_blank"$("a[target!='_blank']")Selects all <a> elements with a target attribute value NOT equal to "_blank"$(":button")Selects all <button> elements and <input> elements of type="button"$("tr:even") Selects all even <tr> elements$("tr:odd") Selects all odd <tr> elementsjQuery: Selector Example<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button>Click me</button></body></html>jQuery: Events•jQuery can respond to events in an HTML page•Most DOM events have an equivalent jQuery method•Examples:Mouse EventsKeyboard EventsForm EventsDocument/Window Eventsclick keypress submit loaddblclick keydown change resizemouseenter keyup focus scrollmouseleave blur unloadjQuery: Event Example<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function(){ $("p").click(function(){ $(this).hide(); });});</script></head><body><p>If you click
View Full Document
Unlocking...