A large distributed system of proxy servers deployed in multiple data centers via the Internet.
Content may exist on several servers. When a user makes a request to a CDN hostname, DNS will resolve to an optimized server (based on location, availability, cost, and other metrics) and that server will handle the request.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Intro to jQuery</title>
<!-- here? -->
</head>
<body>
<!-- here? -->
</body>
</html>
Keep it simple for now...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Intro to jQuery</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
$(document).ready(function(){
// code here
});
$(document).load(function(){
// code here
});
$(document).ready();
$(document).load();
Ready - executes when HTML-Document is loaded and DOM is ready. Images and/or Media files have not complete downloading
Load - executes when complete page is fully loaded, including all frames, objects, images, and media.
document.ready shortcut
$(function(){
// code runs when DOM is ready!
});
$( '#mainLogo' );
$( '.navItems' );
$( '.newsPost p:first-child' );
$( 'form.logIn input:checkbox' );
$( '.container > header' );
$( '.newPost + .newsPost' );
$ is the variable where jQuery assigns itself by default
jQuery takes a css selector as an argument to select ONE or MORE elements.
Depending on what you're looking for the return value may change.
"Inspect what you expect"
You're given a jQuery DOM Object. It's not your usual HTMLEntity DOM Object.
It's been sprinkled, it's been... jQueryfied.io™
Now you can start using jQuery methods.
$( '#mainLogo' ).html();
$( '.navItems' ).hide();
$( '.newsPost p:first-child' ).fadeIn('slow');
$( 'form.logIn input:checkbox' ).click(console.log);
$( '.container > header' ).css('background-color', '#333');
$( '.newPost + .newsPost' ).css('border-right', '2px solid #333');
$( 'form.logIn input' ).val();
$( '#mainLogo' ).html();
$( '.navItems' ).addClass('active');
$( '.newsPost p:first-child' ).css('background-color', '#333666');
$( 'form.logIn input:checkbox' ).click(showSurprise);
$( '.container > header' ).hide();
$( '.newPost + .newsPost' ).remove();
Now you that you have retrieved your element from jQuery there are a number of methods available to you.
<!-- worldnews.com/ -->
<div id="topNewsPost">
<header>Marty McFly goes back in time and kills Donald Trump.</header>
<p>The World rejoices!</p>
</div>
jQuery likes the getter and setter pattern. This means that if you can use a method to get a value, you can also SET that value by giving it your value.
// main.js
$('#topNewsPost header').text(); // what is returned?
$('#topNewsPost header').text('JSON SEWELL CREATES PIDGIN SCRIPT'); // sets!
<!-- worldnews.com/ -->
<div id="topNewsPost">
<header>JSON SEWELL CREATE PIDGIN SCRIPT</header>
<p>The World rejoices!</p>
</div>
<div id="topNewsPost">
<header>JSON SEWELL CREATE PIDGIN SCRIPT</header>
<p>The World rejoices!</p>
</div>
Having a jQuery element you can chain methods to continue working on that same element*.
$('#topNewsPost header')
.text('JSON SEWELL CREATES PIDGIN SCRIPT')
.css('font-size', '60px')
.fadeOut()
;
You can continue to chain methods unless you use a method which will return a DOM element e.g. .parent(), .siblings(), or any traversal method.
$( '.topNewsPost' ).click(function(event){
this.html('<p>HACKED</p>');
});
$( '.topNewsPost' ).dblclick(function(event){
this.html('<p>DOUBLE HACKED</p>');
});
$( '.topNewsPost' ).mouseover(function(event){
// maybe something even more custom?
});
some syntactic sugar for your events
// equivalent to first example from above
var topNewPostEl = document.querySelectorAll('.topNewPost');
topNewPostEl.addEventlistener('click', function(event) {
this.innerHTML = 'HACKED';
});
As with vanilla Javascript, jQuery accepts a function as an argument commonly referred to as the Event Listener.
The Event Listener should have define a parameter which will be the Event object.
$( '.topNewsPost' ).click(function(event){
console.log(this); // what is shown in the console?
console.log(this.html); // `.html` is a jQuery method, is it defined?
console.log(this.innerHTML); // only have vanilla methods
});
One thing you must remember is that `this` refers to your context.
`this` is NOT a jQuery object which means it will not have jQuery methods available on it.
How would we jQueryfy™ `this`?
$( '.topNewsPost' ).click(function(event){
v----- call jQuery and pass `this` to it
var $this = $(this); // now you can invoke jQuery methods, aw yiss
$this.html('I LOVE PIG LATIN');
});
The convention of starting your variable names with a `$` helps people remember that the value referenced is a jQuery object.
Should you use it? Up to you.
goodies
Some animations can accept functions as arguments which are treated as a callback function.
This function is invoked after the animation completes.
$( '.topNewsPost' ).show(function() {
// do something after you show
});
$( '.topNewsPost' ).hide(function() {
// do something after you hide
});
Tools like SASS make CSS3 Animations very managable
For inspiration check out
Pass jQuery a tag and you'll get a new HTML object created for you.
This object starts its life in memory until you append it to the DOM
var newDiv = $( '<div>' );
manipulate it with jQuery Methods and append!
var newDiv = $( '<div>' );
newDiv
.addClass( 'topNewsPost' )
.css('height', '100px')
.click(function(evt) {
alert('NEWS NEWS NEWS');
})
;
$(document.body).append(newDiv);
previous code
var newDiv = $( '<div>' );
newDiv
.addClass( 'topNewsPost' )
.css('height', '100px')
.click(function(evt) {
alert('NEWS NEWS NEWS');
})
;
different way
var newDiv = $( '<div>', {
class: 'topNewsPost',
css: {
'height': '100px'
},
click: function(evt){
alert('NEWS NEWS NEWS');
}
});
XHR stands for XML HTTP Request
AJAX stands for Asynchronous Javascript and XML
Basically, you can request for data without having the user refresh the page or leave to another page.
It redefined the way we use the internet.
Advantages
Disadvantages
Syntactic Sugar!
An Example of a GET request
// v-- where to request for data
$.get( "ajax/test.html", function( data ) {
// ^-- data coming back from the request
// do stuff with your data!
$( ".result" ).html( data );
alert( "Load was performed." );
});
link: shorthand methods
Syntactic Sugar!
An example of a POST request which sends data along with the request
var dataToSendToServer = {
username: 'KingtakMF420',
newBlogPostHeader: 'TODAY WAS A GUUD DAY',
newBlogPostBody: 'NAH FOREAL DOUGH'
};
// |-- where to request for data
// V v-- send data along with your request TO the server
$.post( "ajax/test.html", dataToSendToServer, function( data ) {
// do stuff with your data!
$( ".result" ).html( data );
alert( "Load was performed." );
});
link: shorthand methods
Handling Errors and attaching Event Listeners for XHR Events
var jqxhr = $.post( "mysite.com/login", function() {
alert( "success" );
})
.done(function() {
alert( "second success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "finished" );
});
// Perform other work here ...
// Set another completion function for the request above
jqxhr.always(function() {
alert( "second finished" );
});