JQUERY

Learn jQuery Fundamentals -

Get started quickly with jQuery
jQuery Course
Step by step learning covering the core parts of jQuery to get you coding quickly. Source code and
everything you need to get started is included.

Course covers

● explore how to write jQuery basics

● how to select elements to apply manipulations too
● learn about applying style and classes
● adding effects to elements like hide and show
● make you web page come to life with animations and effects slide, fade and animation
● create interaction with your page using event listeners like mouse events and keyboard events
● use AJAX to connect to JSON data to easily populate content into your page
● all this and much more
Getting started with JQUERY
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

What JQUERY does
jQuery wraps common JavaScript tasks into a method which you can then call with simple lines of
code.

2006 introduced - JavaScript file that added more to what you could do

DOM manipulation made easy - helps us manipulate the DOM

● jQuery comes with own methods

● Makes it easier to navigate a document selecting elements.
● Manipulate and create DOM elements
● Create animations and effects
● Handles Events
● Use AJAX
Dynamic Web Pages with Jquery
Create powerful dynamic interactions with web users via jQuery
Where to learn more about jQuery
jQuery.com

Having a experience with JavaScript and CSS will help you get started with jQuery quicker
Benefits of using jQuery
It’s small in size and loads quickly

Really powerful features allow you to create interactions faster

Simple straight forward. It’s easy to learn and get started with

Easy to use - similar to CSS for selection.

Cross browser support

Fixes broken DOM

Its popular

Easier to add JavaScript functionality to your website

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.
Including the library jQuery
Link to CDN content delivery network - take a little longer to use not noticeable, but much easier to
get started with.

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

Or download and link to it locally <script src="jquery.min.js"></script>

Minified - whitespace is gone, all names of variables and properties as single character. Not human
readable.

Type jQuery into console to ensure you have it working

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_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).
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.
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
Selectors
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 new

Changing page content

Update your HTML with jquery

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

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

Updating HTML using jQuery
Append

After

prepend

Before

Empty

Remove

Although they may initially sound similar there are differences.

JQUERY
Events
jQuery EVENTS event binding
User initiates a trigger

Most 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 events
hover()

dbclick()
jQuery Mouse Events
Mousedown()

mouseenter()

mousemove()

mouseleave()

mouseover();

mouseup();
jQuery Keyboard Events
keydown() keyup()

keypress()

Get key information

jQuery Form events
blur()

focus()

change()

submit()
JQUERY
Traversing
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
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()
JQUERY
CSS
jQuery working with CSS
css(propName,value)

Add classes

Remove classes
 JQUERY
EFFECTS and ANIMATIONS
jQuery effects
Simple hide() and show()
jQuery effects
Fading effects

fadeIn()

fadeOut();

fadeTo();
jQuery effects

Sliding moving the element

slideDown()

slideUp()

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

.animate()
jQuery chaining effects together
You can add more than one effect chaining methods together in jQuery
jQuery AJAX
Powerful
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)
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()

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 call

Free to define the behavior you want

Simple way to make AJAX calls

Static 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 format

Shorthand for get retrieving 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 settings

Used when other methods cannot be used

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
Thank you

Thank you for taking the course, and reading this PDF. If you have any
questions of suggestions please connect with me on Udemy.

https://www.udemy.com/user/lars51/

Laurence Svekis