JQuery Overview Unleash the Power of jQuery SoftUni Team Technical Trainers Software University

Slides:



Advertisements
Similar presentations
The jQuery library. What is jQuery ? A javascript lightweight library Is very easy to use Is powerful Is cross-browser compatible Downloadable from jQuery.com,
Advertisements

JQuery. What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversing and manipulation event handling.
Philly.NET Hands-On jQuery + Plug-ins Bill Wolff, Rob Keiser.
Fundamentals, DOM, Events, AJAX, UI Doncho Minkov Telerik Corporation
PhpXperts What is jQuery Javascript Library Fast and concise Simplifies the interaction between HTML and JavaScript.
JavaScript Basics Course Introduction SoftUni Team Technical Trainers Software University
AngularJS Routing Routes, Route Parameters, Templates, Location, Navigation SoftUni Team Technical Trainers Software University
AngularJS Services Built-in and Custom Services SoftUni Team Technical Trainers Software University
Software University Curriculum, Courses, Exams, Jobs SoftUni Team Technical Trainers Software University
Fundamentals SoftUni Welcome to Software University SoftUni Team Technical Trainers Software University
13. jQuery See the official documentation at  See the terse API documentation at
Project Tracking Tools Trello, Asana, Basecamp, GitHub Issue Tracker, TRAC SoftUni Team Technical Trainers Software University
AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University
Software Testing Lifecycle Exit Criteria Evaluation, Continuous Integration Ivan Yonkov Technical Trainer Software University.
Fundamentals SoftUni Welcome to Software University SoftUni Team Technical Trainers Software University
Entity Framework Performance SoftUni Team Technical Trainers Software University
Svetlin Nakov Technical Trainer Software University
Processing Redis with.NET How to Operate with Redis Databases SoftUni Team Technical Trainers Software University
JQuery Youn-Hee Han
Test-Driven Development Learn the "Test First" Approach to Coding SoftUni Team Technical Trainers Software University
Unleash the Power of jQuery Doncho Minkov Telerik Software Academy academy.telerik.com Senior Technical Trainer
DOM Document Object Model (DOM) SoftUni Team Technical Trainers Software University
Fundamentals, Ajax, Templates, UI Doncho Minkov Telerik Corporation
Templating, Routing, lodash Extending functionality using Collections SoftUni Team Technical Trainers Software University
Controllers and Markup Controllers, $scope, Markup, Directives, Expressions, Binding, Filters, Validation SoftUni Team Technical Trainers Software University.
AMD and RequireJS Splitting JavaScript Code into Dependent Modules Software University Technical Trainers SoftUni Team.
Asynchronous Web Services Writing Asynchronous Web Services SoftUni Team Technical Trainers Software University
SASS & LESS Syntactically Awesome StyleSheets Dynamic StyleSheet Language Svetlin Nakov Technical Trainer Software University
Unleash the Power of jQuery Learning & Development Team Telerik Software Academy.
JQuery JavaScript is a powerful language but it is not always easy to work with. jQuery is a JavaScript library that helps with: – HTML document traversal.
Web Fundamentals (HTML and CSS) Course Introduction SoftUni Team Technical Trainers Software University
Controls, Widgets, Grid…
Jekyll Static Site Generator Template-Based Site Generation Svetlin Nakov Technical Trainer Software University
Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software.
Web Development Tools Tools for Front-End Developers Writing HTML and CSS Code SoftUni Team Technical Trainers Software University
Web Fundamentals (HTML and CSS)
ASP.NET SignalR SoftUni Team Technical Trainers Software University
Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event.
Tables, Rows, Columns, Cells, Header, Footer, Colspan, Rowspan
CSS Transitions and Animations Animated HTML Elements SoftUni Team Technical Trainers Software University
Design Patterns: Structural Design Patterns General and reusable solutions to common problems in software design Software University
Bootstrap Front-End Framework for Responsive Web Sites Svetlin Nakov Technical Trainer Software University
Advanced C# Course Introduction SoftUni Team Technical Trainers Software University
Events Event Handling in JavaScript SoftUni Team Technical Trainers Software University
JavaScript Applications Course Introduction SoftUni Team Technical Trainers Software University
Mocking with Moq Tools for Easier Unit Testing SoftUni Team Technical Trainers Software University
Introduction to JQuery COGS 187A – Fall JQuery jQuery is a JavaScript library, and allows us to manipulate HTML and CSS after the page has been.
05 | Integrating JavaScript and MVC 4 Jon Galloway | Tech Evangelist Christopher Harrison | Head Geek.
JavaScript Tools Tools for Writing / Editing / Debugging JavaScript Code Svetlin Nakov Technical Trainer Software University
Sets, Dictionaries SoftUni Team Technical Trainers Software University
JavaScript Applications Course Introduction SoftUni Team Technical Trainers Software University
Advanced Tree Structures Binary Trees, AVL Tree, Red-Black Tree, B-Trees, Heaps SoftUni Team Technical Trainers Software University
Software Technologies Course Overview SoftUni Team Technical Trainers Software University
Doctrine The PHP ORM SoftUni Team Technical Trainers Software University
Creating Content Defining Topic, Creating Technical Training Materials SoftUni Team Technical Trainers Software University
Web Storage and Cookies Cookies, Local and Session Storage SoftUni Team Technical Trainers Software University
First Steps in PHP Creating Very Simple PHP Scripts SoftUni Team Technical Trainers Software University
DOM, jQuery, AJAX, REST Using Kinvey as JS Back-End
Advanced JavaScript Course Introduction SoftUni Team Technical Trainers Software University
Stacks and Queues Processing Sequences of Elements SoftUni Team Technical Trainers Software University
Web API - Introduction AJAX, Spring Data REST SoftUni Team Web API
jQuery Library, Selectors, DOM Manipulation, Events, Plugins
Unleash the Power of jQuery
MVC Architecture. Routing
AJAX and jQuery AJAX AJAX Concepts, XMLHttpRequest, jQuery AJAX: $.ajax(), $.get(), $.post() jQuery AJAX XMLHttpRequest SoftUni Team Technical Trainers.
Extending functionality using Collections
CSS Transitions and Animations
Fundamentals, DOM, Events, AJAX, UI
CSS Transitions and Animations
jQuery The Easy JavaScript Nikolay Chochev Technical Trainer
Presentation transcript:

jQuery Overview Unleash the Power of jQuery SoftUni Team Technical Trainers Software University

 What is jQuery?  jQuery Fundamentals  Selectors  DOM Manipulation  DOM Altering  jQuery DOM Elements  jQuery Events  AJAX  jQuery AJAX Methods  Executing AJAX Requests Table of Contents 2

What is jQuery? The World’s Most Popular JavaScript Library

4  jQuery is a cross-browser JavaScript library  Designed to simplify the client-side scripting of DOM  The most popular JavaScript library in use today  Free, open-source software by jQuery Foundation  jQuery's syntax is designed to make it easier to  Navigate through the document and select DOM elements  Create animations / transitions / effects  Handle DOM events What is jQuery?

5  jQuery has very large community  Used in 540,000 sites (Nov 2014) Used in 540,000 sites  Microsoft adopted jQuery within Visual Studio ad ASP.NET MVC  jQuery provides capabilities for developers to create plugins for  Low-level interaction and animations  Advanced effects and high-level, theme-able widgets  Creation of powerful and dynamic web pages  Official web site: What is jQuery? (2)

6  Easy to learn  Easy to extend  Create new jQuery plugins by writing JavaScript functions  Powerful DOM Selection  Powered by CSS 3.0  Lightweight  Community Support  Large community of developers and geeks Why jQuery is So Popular?

7  Download the jQuery scripts from:   Self hosted  You can choose to self host the.js file  E.g. jquery js or.min.js file  Use it from CDN (content delivery network)  Microsoft, jQuery, Google CDNs  e.g. How to Add jQuery to a Web Site?

Including jQuery in a Project Live Demo

Selectors and DOM Manipulation

10  jQuery selectors returns a collection of the items  Even if there is only one item  Can be stored in a variable or used right away  Selection with jQuery $('div') // Like: document.querySelectorAll('div'); $('.menu-item') // Like: document.querySelectorAll('.menu-item'); $('#navigation') // Like: document.getElementById('navigation'); $('ul.menu li') // Like: document.querySelectorAll('ul.menu li'); $('div').css('background', 'blue'); // Make all DIVs blue

 DOM elements selection in jQuery is much like as in JavaScript  All selector  Class selector  Element selector  Id selector  Multiple selector jQuery Selectors $('*') // Selects all elements $('.class') // Selects all elements by class name $('section') // Selects all elements by tag name $('#id') // Selects a element by given id attribute $('selector1, selector2') // Combines two selectors 11

Filter Selectors $('li:eq(2)') // Selects the element at index 2 $('li:even') // Even $('li:even') // Even $('li:odd') // Odd $('li:odd') // Odd $('li:first') // First $('li:first') // First $('li:last') // Last $('li:last') // Last $('li:not(:checked)') // Elements not matching the selector $('li:has(p)') // Selects all holding inside $('li:contains("Sofia")') // Selects holding given text $('li:first-child') // Selets the first child of $('li:first-child') // Selets the first child of 12

 Attribute selectors support "contains" / "starts with" semantic Attribute Selectors <body> Home Home About About Contacts Contacts </body> <script> $('a[hreflang*="en"]').css('color', 'red'); $('a[hreflang*="en"]').css('color', 'red'); $('a[hreflang^="en"]').css('color', 'green'); $('a[hreflang^="en"]').css('color', 'green');</script> contains starts with 13

Selection with jQuery Live Demo

DOM Traversal Traversing the Nodes of the DOM

 The DOM can be traversed with jQuery, as with plain JavaScript  jQuery has properties for:  Next and previous siblings  Parents and children  First and last in a collection  It is impossible to reference elements that are not yet rendered at the time of script execution! DOM Traversal 16

 jQuery.next(), jQuery.prev()  Returns the next / previous sibling  Returns an HTML element, not a [text] node  next([selector]) & prev([selector]) can take selector  Returns the next/previous sibling, that matches selector DOM Traversal: Next and Previous var first = $('li').first(); console.log(first.text()); // "Item 1" console.log(first.next().text()); // "Item 2" console.log(first.prev().text()); // "" <ul> Item 1 Item 1 Item 2 Item 2 Item 3 Item 3 </ul> 17

 jQuery.parent()  Returns the parent of the element  jQuery.parents([selector])  Returns the first parent that matches the selector DOM Traversal: Parent var node = $('.special'); node.parent().attr('id'); // "items-list" node.parents('div').attr('id'); // "wrapper" node.parents('#wrapper').attr('id'); // "wrapper" Item 1 Item 1 Item 2 Item 2 Item 3 Item 3 Item 4 Item 4 </div> 18

 jQuery.children()  Returns the children of the element  jQuery.children([selector])  Returns the children of element, filtered by a selector DOM Traversal: Children var list = $('#items-list'); var items = list.children(); // gets all list items var specials = list.children('.special'); //gets all list items with class special Item 1 Item 1 Item 2 Item 2 Item 3 Item 3 Item 4 Item 4 </div> 19

DOM Traversal Live Demo

Altering the DOM with jQuery Adding and Removing DOM Elements

22  Adding elements can be done on the fly  jQuery.appendTo() / jQuery.prependTo()  jQuery.append() / jQuery.prepend() Adding Elements $('#wrapper div').append(' Test '); SoftUni Greetings SoftUni Greetings Hello, student Hello, student Goodbye, student Goodbye, student </div> SoftUni Greetings Hello, student Test Goodbye, student Test $(' First ').prependTo('body'); First SoftUni Greetings Hello, studentdiv> Goodbye, student

23  Creating new elements is also easy  with the jQuery HTML parser  with document.createElement  A little bit faster Creating Elements var divElement = $(' '); var anotherDiv = $(' '); var paragraph = $(' Some text '); var divElement = $(document.createElement('div'));

24  You can also remove elements from the DOM  Just as easy Removing Elements <div> Red Red Green Green </div><script> $('p').remove(); // Remove all paragraphs $('p').remove(); // Remove all paragraphs</script>

Altering the DOM with jQuery Live Demo

jQuery Extended DOM Elements

 Selected elements with jQuery are not pure DOM elements  jQuery elements extend regular DOM elements  They have additional properties and methods  addClass(), removeClass(), toogleClass()  on(event, callback) for attaching events  animate(), fade(), etc… jQuery Objects // Parsing a regular DOM element to jQuery element var content = document.createElement('div'); // DOM element var $content = $(content); // jQuery extended DOM element 27

28  Methods for altering the elements  jQuery.css('color', '#f3f')  jQuery.html() – returns the innerHTML  jQuery.html(content) – sets the innerHTML  jQuery.text(content) – gets / sets the innerHTML as text  Performs HTML escaping of the passed content  jQuery.val(content) – sets the value of input field Properties of jQuery Elements

Changing the Elements Content Live Demo

jQuery Events Cross-Browser Events Handling

31  jQuery has a convenient way for attaching and detaching events  Works cross-browser  Using methods on() and off() jQuery Events function onButtonClick() { $('.selected').removeClass('selected'); $('.selected').removeClass('selected'); $(this).addClass('selected'); $(this).addClass('selected'); // "this" is the event source (the hyperlink clicked) // "this" is the event source (the hyperlink clicked)} $('a.button').on('click', onButtonClick);

32  Handling events on multiple elements  Add a handler on the parent element  A bit different syntax jQuery Events (2) function onListItemClick(){ $('.selected').removeClass('selected'); $('.selected').removeClass('selected'); $(this).addClass('selected'); $(this).addClass('selected');} $('ul').on('click', 'li', onListItemClick);

jQuery Event Handlers Live Demo

Chaining Function Calls Call After Call, After Call, …

 In programming, the "chaining" paradigm is as follows:  If a method should return result -> OK, return it  If a method should NOT return a result -> return this  jQuery implements the "chaining" paradigm, so methods can be chained one after another: jQuery: Chaining Function Calls $(' ').remove().addClass('btn-success').addClass('btn-success').html('Click me for success').html('Click me for success').on('click', onSuccessButtonClick).on('click', onSuccessButtonClick).appendTo(document.body);.appendTo(document.body); 35

jQuery Function Calls Chaining Live Demo

jQuery AJAX Creating HTTP Requests with jQuery

38  AJAX stands for Asynchronous JavaScript and XML  Asynchronously load data from a service and render it dynamically  jQuery provides several methods for AJAX  jQuery.ajax([options]) – performs HTTP request with full control (headers, data, method, etc…)  jQuery.get([url]) – performs HTTP GET request  jQuery.post([url]) – performs HTTP POST request  jQuery([selector]).load([url]) – loads the contents from the url inside the selected node jQuery AJAX

Live Demo

40  jQuery – the most popular client-side JS library  Select DOM elements with jQuery  $([selector])  DOM Traversal:  $([selector]).next()parent()  $([selector]).next() / parent()  Altering the DOM:  $([selector]).html(…)append(…)  $([selector]).html(…) / append(…)  jQuery Events  $([selector]).on([event], [callback]); Summary

? ? ? ? ? ? ? ? ? JavaScript Applications

License  This course (slides, examples, demos, videos, homework, etc.) is licensed under the "Creative Commons Attribution- NonCommercial-ShareAlike 4.0 International" licenseCreative Commons Attribution- NonCommercial-ShareAlike 4.0 International 42  Attribution: this work may contain portions from  "JavaScript Applications" course by Telerik Academy under CC-BY-NC-SA licenseJavaScript ApplicationsCC-BY-NC-SA

Free Software University  Software University Foundation – softuni.orgsoftuni.org  Software University – High-Quality Education, Profession and Job for Software Developers  softuni.bg softuni.bg  Software Facebook  facebook.com/SoftwareUniversity facebook.com/SoftwareUniversity  Software YouTube  youtube.com/SoftwareUniversity youtube.com/SoftwareUniversity  Software University Forums – forum.softuni.bgforum.softuni.bg