jquery essentials

jQuery.essentials();

Made with by @elacheche_bedis

- What is it?

- Why should I use it?

- How to use it?

- What is it?

- How to use it?

What is

- Cross-platform Javascript library.

- Designed to simplify the client-side scripting of HTML.

- Allows you to easily select elements and manipulate or add some behaviour on them.

- It's basically more accessible Javascript.

- What is it?

- How to use it?

Why should I use

- Free

- Open-source

- Large online community to help :

• Forums

• Blogs

• Tutorials

• IRC (#jquery on freenode)

• Books

- Extensively documented and tested

- Normalises many cross-browser quirks so don’t have to worry about them

Why should I use

var XMLHttpFactories = [ function() { return new XMLHttpRequest() }, function() { return new ActiveXObject("Msxml2.XMLHTTP") }, function() { return new ActiveXObject("Msxml3.XMLHTTP") }, function() { return new ActiveXObject("Microsoft.XMLHTTP") }];

function createXMLHTTPObject() { var xmlhttp = false; for (var i = 0; i < XMLHttpFactories.length; i++) { try { xmlhttp = XMLHttpFactories[i](); } catch (e) { continue; } break; } return xmlhttp;}

Javascript cross-browser ajax request :

Why should I use

Javascript cross-browser ajax request :

Why should I use

// Get data$.get('slides.php', {

From : 1 ,to : 5

},function(data) { $('.result').html(data);});

jQuery cross-browser ajax request :

- What is it?

- How to use it?

How to use : Getting started

www.jquery.com

<html> <head> <title>Hello jQuery</title> </head> <body> <script src="jquery-1.11.3.min.js"></script> </body></html>

Include jQuery using a <script> tag

<html> <head> <title>Hello jQuery</title> </head> <body> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> </body></html>

Alternatively, you can load it from a CDN*

* Content Delivery Network

<html> <head> <title>Hello jQuery</title> </head> <body> <script src="jquery-1.11.3.min.js"></script> <script type="text/javascript">

$(document).ready(function(){ // your code should go here });

</script> </body></html>

In most cases, your code should run when the document has finished loading.

//your code should go here});

</script>

$ is an alias to jQuery

Code can either use $ or just jQuery :

//your code should go here});

</script>

jQuery.selectors();

How to use : Selectors

//Basic selectors

// ID$('#presentation')

// class$('.slide')

// element$('div')

//wildcard$('*')

//attribute$('input[name="prezName"]')

<ul id="presentation"> <li class="slide">Getting started</li> <li class="slide">Selectors</li> <li class="slide">Filters</li> <li class="slide"></li> <li class="slide">Ajax</li></ul>

//Basic selectors

// class$('.slide')

// element$('div')

//wildcard$('*')

//Basic selectors

// class$('.slide')

// element$('div')

//wildcard$('*')

//Basic selectors

// class$('.slide')

// element$('div')

//wildcard$('*')

//Basic selectors

// class$('.slide')

// element$('div')

//wildcard$('*')

//Basic selectors

// class$('.slide')

// element$('div')

//wildcard$('*')

// Parent/child selectors // returns children of the parent a$('ul li') // returns elements that are a child// element of a$('body > ul') // returns the elements that are// adjacent to the selector$('ul + input') // returns ul elements that are a// sibling of p$('div ~ ul')

How to use : Filters

//first element in a result set$('ul li:first') //first child of the parent$('ul li:first-child') //last element in a result set$('ul li:last') //last child of the parent$('ul li:last-child')

//all odd elements in a result set$('ul li:odd') //all even elements in a result set$('ul li:even')

<li class="slide">Getting started</li>

<li class="slide">Selectors</li>

<li class="slide">Filters</li>

// nth-child filters // nth child in a result set$('ul li:nth-child(2)') // all odd numbered results$('ul li:nth-child(odd)') // all even numbered results$('ul li:nth-child(even)') // all elements based on a formula. // here it’s every 2nd child$('ul li:nth-child(2n)')

// returns elements that are equal to // the index supplied$('ul li:eq(1)') // returns elements that are greather // than the index supplied$('ul li:gt(2)')

// returns elements in a set less // than the index supplied$('ul li:lt(2)')

// returns elements that are hidden$('li:hidden') // returns elements that are visible$('li:visible')

</style>

<li class="slide gone">Selectors</li>

</style>

//form filters //returns elements that are enabled$('input:enabled') //returns elements that are disabled$('input:disabled') //returns checked items $(':checked') // returns elements that don't match // the condition supplied $('input:not(:checked)')

//returns selected items$('select option:selected')

<select name="currentSlide"> <option>Selectors</option> <option selected="selected"> Filters </option></select>

//content filters // :has(x) all elements with a // descendant that matches x$('div:has(p)') //:contains(x) the element contains x$('li:contains("Ajax")') //returns elements that are empty$(':empty') //returns the parent of li $('li:parent')

</div>

How to use : Collections

// this returns a jQuery collection// your selection wrapped inside a // jQuery object that can be further// manipulated$('ul li') // we can treat it a little like an array$('ul li').length //4 // we can iterate over it..$('ul li').each(function(i, x){ console.log(i, $(this).text()); });

// and we can also call methods on it$('ul li').hide();

</div>

Understanding what $() returns

jQuery.chaining();

How to use : Chaining

$('ul') .find('.slide') .addClass('active');

$('ul') .find('.slide') .removeClass('pending');

$('ul') .find('.slide') .addClass('active') .removeClass('pending');

Chaining method calls to write shorter, less repetitive code When you call a method on a jQuery object another jQuery object is usually returned

jQuery.caching();

How to use : Caching

// uncached selections

$('.slide').fadeIn();$('.slide').css('color','blue');$('.slide').on('click',function(){ console.log('hello jQuery');});

// cache the selectionvar slides = $('.slide');

// use as neededslides.fadeIn();slides.css('color','blue');slides.on('click', function(){ console.log('hello jQuery');});

How to avoid re-querying the DOM unless absolutely necessary

How to use : Caching

// uncached selections

$('.slide').fadeIn();$('.slide').css('color','blue');$('.slide').on('click',function(){ console.log('hello jQuery');});

// this also supports chaining!

var slides = $('.slide');slides .fadeIn() .css('color','blue') .on('click', function(){ console.log('hello jQuery'); });

How to avoid re-querying the DOM unless absolutely necessary

jQuery.attributes();

How to use : Attributes

// gets the value of an attribute// for the first element in a set onlyvar link = $('a').attr('href');console.log(link); // www.google.com

// sets the value of an attribute$('a').attr('href','www.jquery.com');

// we can also set multiple// attributes at the same time$('a').attr({ title: 'jQuery!', href: 'http://google.com'});

<a href='www.google.com'>Click me !

<a href='#'>Another link

<a href='#'>Just another link

Getting and settings DOM attributes of elements

jQuery.properties();

How to use : Properties

var elem = $('input[type=checkbox]');

console.log(elem.prop('checked')); //true

console.log(elem.is(':checked')); //true

// change propertyelem.prop('checked','');

//orelem.removeProp('checked');

<a href='#'>Another link

<a href='#'>Just another link

Getting and settings DOM properties of elements

jQuery.data();

How to use : Data

var last = $('.slide:last');// Set some datalast.data('description', 'Summarizes content');

// You can then access this data // as follows:console.log(last.data('description')); // Summarizes content

Storing and retrieving arbitrary data using specific DOM elements– Can be used to store data in key/value pairs– Data is stored against any DOM elements

<ul><li class='slide'>CSS</li><li class='slide'>AJAX</li><li class='slide'>Summary</li>

How to use : Data

var last = $('.slide:last');// Set some datalast.data('description', 'Summarizes content');

// You can then access this data // as follows:console.log(last.data('description')); // Summarizes content

Storing and retrieving arbitrary data using specific DOM elements– Can be used to store data in key/value pairs– Data is stored against any DOM elements

<ul><li class='slide'>CSS</li><li class='slide'>AJAX</li><li class='slide' data-description='Summarizes content'>Summary</li>

jQuery.css();

How to use : CSS

// Gets a CSS propertyvar bgColor = $('.slide').css('backgroundColor');console.log(bgColor); //gray

// Sets a CSS property$('.slide').css('backgroundColor','blue');

// Sets multiple CSS properties$('.slide').css({ 'width':'1600', 'height':'900', 'color':'blue', 'backgroundColor':'gray'});

Methods for getting and setting CSS-related properties of elements

How to use : CSS

$('.slide:first').addClass('visible');

$('.slide:first').removeClass('pending');

$('.slide').toggleClass('visible');

Supports some other utility methods :

<li class="slide pending">CSS

</li><li class="slide pending">

AJAX</li>

How to use : CSS

<li class="slide pending visible">CSS

AJAX</li>

How to use : CSS

<li class="slide visible">CSS

AJAX</li>

How to use : CSS

<li class="slide">CSS

</li><li class="slide pending visible">

AJAX</li>

jQuery.events();

How to use : Events

Registering behaviours which are applied when a user interacts with the browser :

// Binding a click event to elements // with the class 'slide'$('.slide').on('click', function(){ $(this).css('color','red'); });

// Remove just the click event handler$('.slide').off('click','**');

// Remove all event handlers from slides$('.slide').off();

How to use : Events

Other jQuery events methods:

- $(elem).load(function(e){ ... });- $(elem).unload(function(e){ ... });

- $(elem).click(function(e){ ... });- $(elem).dblclick(function(e){ ... });- $(elem).hover(function(e){ ... });

- $(elem).blur(function(e){ ... });- $(elem).focus(function(e){ ... });- $(elem).change(function(e){ ... });

- $(elem).keydown(function(e){ ... });- $(elem).keyup(function(e){ ... });

- $(elem).resize(function(e){ ... });- $(elem).scroll(function(e){ ... });- $(elem).submit(function(e){ ... });

How to use : Ajax

Supports both short and long-hand methods for making Ajax requestsCross-browser XHR without the headaches!

Performing asynchronous HTTP requests

jQuery.ajax();

How to use : Ajax

// Retrieve the latest version of a web page$.ajax({ url: "slides.html", type: 'GET', // (POST | PUT | DELETE | ..) dataType: 'html', // (xml | json | script | ..)

cache: false,data : { from : 1 , to : 5 },beforeSend: function(xhr){

// Pre-request callback},

// What to do if this is successful:success: function(html) {

$("#results").append(html); },

// What to do if this fails: error: function() {

//something went wrong }});

How to use : Ajax

// Get data$.get('slides.html', function(data) { $('.result').html(data);});// Post data$.post('slides.php', { name: 'AJAX'}, function(data) { $('.result').html(data);});// Get JSON data$.getJSON('slides.json', function(data) { console.log(data);});// Load a JavaScript file$.getScript('slides.js', function(data) { console.log(data);});

$('thanks').sayTo('you');

Made with by @elacheche_bedis

jquery essentials

Technology