JQUERYPowerful

https://www.udemy.com/web-development-introduction-to-jquery/?couponCode=SLIDESHARE

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

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

Dynamic Web Pages with JqueryCreate powerful dynamic interactions with

web users via jQuery

Where to learn more about jQueryjQuerycom

Having a experience with JavaScript and CSS will help you get started with jQuery quicker

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

JQUERYPowerful

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.

Including the library jQuery

Link to <script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Powerful

JQUERY

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.

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.

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).

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.

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

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!

Powerful

JQUERY

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.

JQUERY

jQuery is run when the document is ready.

<script type="text/javascript">$(document).ready(function(){ // jQuery code });</script>

JQUERY

Same as the $(document).ready(function(){ but shorter. You can use either.

<script type="text/javascript">$(function(){ // jQuery code});</script>

JQUERY

S E L E C T O R S

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

HTML AND DOM MANIPULATION

The DOM allows scripts to access and manipulate web documents. text()html()val()Example script1.js

SELECTORS SET

$(“id”).html(‘new’);$(“.class”).html(‘new’);$(“p”).html(‘new’);Setting content to value of newChanging page contentUpdate your HTML with jquery

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

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….

UPDATING HTML USING JQUERY

Append Afterprepend BeforeEmptyRemoveAlthough they may initially sound similar there are differences.

JQUERYEvents

jQuery EVENTS event bindingUser initiates a triggerMost commonly used are click events$( 'li' ).click(function( event ) { console.log( 'clicked', $( this ).text() );});

jQuery event.preventDefault()stops the default action of an element from

happening. event.preventDefault();<a></a> hyperlinks…...

jQuery mouse eventshover()dbclick()

jQuery Mouse EventsMousedown()mouseenter()mousemove()mouseleave()mouseover();mouseup();

jQuery Keyboard Eventskeydown() keyup()keypress()Get key information

jQuery Form eventsblur()focus()change()submit()

Traversing

JQUERY

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

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

JQUERY TRAVERSING FIND

Gets all the descendants of each element

JQUERY TRAVERSING SIBLINGS

next()siblings()nextAll()

JQUERY TRAVERSING FILTERING

first()last()eq()

JQUERYCSS

jQuery working with CSScss(propName,value)Add classes Remove classes

jQueryattributes

JQUERYEFFECTS and ANIMATIONS

jQuery effectsSimple hide() and show()

jQuery effectsFading effectsfadeIn()fadeOut();fadeTo();

jQuery effects

Sliding moving the elementslideDown()slideUp()slideToggle()

jQuery .animate()You can perform animation.animate()

jQuery chaining effects togetherYou can add more than one effect chaining

methods together in jQuery

jQuery AJAXPowerful

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)

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()

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

Using LOAD() to get data $(“#output”).load('php.php');Uses Selectors to load the result of the AJAX call inside the selected

element

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

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

Using AJAX post $.post('php.php', data, function (data) {///reads contents of php.php into data });Send data to server securely

jQuery $.ajax()More control with settingsUsed when other methods cannot be used

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