web development introduction to jquery
TRANSCRIPT
![Page 1: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/1.jpg)
JQUERYPowerful
https://www.udemy.com/web-development-introduction-to-jquery/?couponCode=SLIDESHARE
![Page 2: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/2.jpg)
Getting started with JQUERYThe most popular JavaScript library in use todayInstalled on 65% of the top 10 million highest-trafficked sites
on the WebjQuery is free, open-source software licensed under the MIT
LicensejQuery is a JavaScript LibraryIt simplifies JavaScript programming
![Page 3: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/3.jpg)
What JQUERY doesjQuery wraps common JavaScript tasks into a method which
you can then call with simple lines of code.Makes it easier to navigate a documentSelect DOM elementsCreate animationsHandles EventsUse AJAX
![Page 4: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/4.jpg)
Dynamic Web Pages with JqueryCreate powerful dynamic interactions with
web users via jQuery
![Page 5: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/5.jpg)
Where to learn more about jQueryjQuerycom
Having a experience with JavaScript and CSS will help you get started with jQuery quicker
![Page 6: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/6.jpg)
Benefits of using JqueryIt’s small in size and loads quicklyReally powerful features allow you to create interactions fasterSimple straight forwardSelectors are the same as CSSIt’s easy to learn and get started withEasier to add JavaSCript functionality to your website
![Page 7: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/7.jpg)
JQUERYPowerful
![Page 8: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/8.jpg)
Introduction to jQueryThere 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.
![Page 9: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/9.jpg)
Including the library jQuery
Link to <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
![Page 10: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/10.jpg)
Powerful
JQUERY
![Page 11: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/11.jpg)
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.
![Page 12: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/12.jpg)
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.
![Page 13: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/13.jpg)
WHAT IS THE DOM? DOCUMENT OBJECT MODEL
https://en.wikipedia.org/wiki/Document_Object_ModelThe 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).
![Page 14: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/14.jpg)
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.
![Page 15: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/15.jpg)
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
![Page 16: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/16.jpg)
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!
![Page 17: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/17.jpg)
Powerful
JQUERY
![Page 18: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/18.jpg)
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.
![Page 19: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/19.jpg)
JQUERY
jQuery is run when the document is ready.
<script type="text/javascript">$(document).ready(function(){ // jQuery code });</script>
![Page 20: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/20.jpg)
JQUERY
Same as the $(document).ready(function(){ but shorter. You can use either.
<script type="text/javascript">$(function(){ // jQuery code});</script>
![Page 21: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/21.jpg)
JQUERY
S E L E C T O R S
![Page 22: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/22.jpg)
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
![Page 23: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/23.jpg)
HTML AND DOM MANIPULATION
The DOM allows scripts to access and manipulate web documents. text()html()val()Example script1.js
![Page 24: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/24.jpg)
SELECTORS SET
$(“id”).html(‘new’);$(“.class”).html(‘new’);$(“p”).html(‘new’);Setting content to value of newChanging page contentUpdate your HTML with jquery
![Page 25: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/25.jpg)
SELECTORS GET
$(“#id”).html();$(“.class”).html(); - this returns the first class value$(“p”).html(); - this returns the first tag valueYou should be specific with get on the content. Content should be
retrieved from a single element.Get page content
![Page 26: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/26.jpg)
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 contentBut you can also list out selections individually….
![Page 27: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/27.jpg)
UPDATING HTML USING JQUERY
Append Afterprepend BeforeEmptyRemoveAlthough they may initially sound similar there are differences.
![Page 28: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/28.jpg)
JQUERYEvents
![Page 29: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/29.jpg)
jQuery EVENTS event bindingUser initiates a triggerMost commonly used are click events$( 'li' ).click(function( event ) { console.log( 'clicked', $( this ).text() );});
![Page 30: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/30.jpg)
jQuery event.preventDefault()stops the default action of an element from
happening. event.preventDefault();<a></a> hyperlinks…...
![Page 31: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/31.jpg)
jQuery mouse eventshover()dbclick()
![Page 32: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/32.jpg)
jQuery Mouse EventsMousedown()mouseenter()mousemove()mouseleave()mouseover();mouseup();
![Page 33: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/33.jpg)
jQuery Keyboard Eventskeydown() keyup()keypress()Get key information
![Page 34: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/34.jpg)
jQuery Form eventsblur()focus()change()submit()
![Page 35: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/35.jpg)
Traversing
JQUERY
![Page 36: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/36.jpg)
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.
ParentsChildrensiblings
![Page 37: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/37.jpg)
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
![Page 38: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/38.jpg)
JQUERY TRAVERSING FIND
Gets all the descendants of each element
![Page 39: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/39.jpg)
JQUERY TRAVERSING SIBLINGS
next()siblings()nextAll()
![Page 40: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/40.jpg)
JQUERY TRAVERSING FILTERING
first()last()eq()
![Page 41: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/41.jpg)
JQUERYCSS
![Page 42: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/42.jpg)
jQuery working with CSScss(propName,value)Add classes Remove classes
![Page 43: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/43.jpg)
jQueryattributes
![Page 44: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/44.jpg)
JQUERYEFFECTS and ANIMATIONS
![Page 45: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/45.jpg)
jQuery effectsSimple hide() and show()
![Page 46: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/46.jpg)
jQuery effectsFading effectsfadeIn()fadeOut();fadeTo();
![Page 47: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/47.jpg)
jQuery effects
Sliding moving the elementslideDown()slideUp()slideToggle()
![Page 48: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/48.jpg)
jQuery .animate()You can perform animation.animate()
![Page 49: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/49.jpg)
jQuery chaining effects togetherYou can add more than one effect chaining
methods together in jQuery
![Page 50: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/50.jpg)
jQuery AJAXPowerful
![Page 51: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/51.jpg)
What is AJAX asynchronous JavaScript and XMLUsing 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)
![Page 52: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/52.jpg)
AJAXAJAX 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 seamlessjQuery make AJAX easy$.get(), $.post(), load(), $.getJSON(), $.post(), $.ajax()
![Page 53: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/53.jpg)
![Page 54: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/54.jpg)
What is JSONJSON 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
![Page 55: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/55.jpg)
Using LOAD() to get data $(“#output”).load('php.php');Uses Selectors to load the result of the AJAX call inside the selected
element
![Page 56: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/56.jpg)
Using Get to get data $.get('php.php', function (data) {///reads contents of php.php into data });Handles the success response of the AJAX callFree to define the behavior you wantSimple way to make AJAX callsStatic and dynamic documents both work
![Page 57: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/57.jpg)
Using GetJSON to get data $.get('php.php', function (data) {///reads contents of php.php into data });Result type is expected JSON formatShorthand for get retriving JSON data
![Page 58: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/58.jpg)
Using AJAX post $.post('php.php', data, function (data) {///reads contents of php.php into data });Send data to server securely
![Page 59: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/59.jpg)
jQuery $.ajax()More control with settingsUsed when other methods cannot be used
![Page 60: Web Development Introduction to jQuery](https://reader035.vdocuments.site/reader035/viewer/2022062823/587820ff1a28aba12d8b681b/html5/thumbnails/60.jpg)
More about AJAXhttp://api.jquery.com/category/ajax/Same Origin policyhttps://en.wikipedia.org/wiki/Same-origin_policyhttps://en.wikipedia.org/wiki/Cross-origin_resource_sharingGet the coursehttps://www.udemy.com/web-development-introduction-to-jquery/?
couponCode=SLIDESHARE