Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
jQuery.essentials();
Made with by @elacheche_bedis
- What is it?
- Why should I use it?
- How to use it?
- What is it?
- Why should I use it?
- How to use it?
What is
- Cross-platform Javascript library.
- Designed to simplify the client-side scripting of
HTML.
- Allows you to eas...
- What is it?
- Why should I use it?
- How to use it?
Why should I use
- Free
- Open-source
- Large online community to help :
• Forums
• Blogs
• Tutorials
• IRC (#jquery on fr...
Why should I use
var XMLHttpFactories = [
function() { return new XMLHttpRequest() },
function() { return new ActiveXObjec...
Why should I use
function sendRequest(url, callback, postData) {
var req = createXMLHTTPObject();
if (!req) return;
var me...
Why should I use
// Get data
$.get('slides.php', {
From : 1 ,
to : 5
},function(data) {  
$('.result').html(data);
});
jQu...
- What is it?
- Why should I use it?
- How to use it?
How to use : Getting started
www.jquery.com
How to use : Getting started
<html>
<head>
<title>Hello jQuery</title>
</head>
<body>
<script src="jquery-1.11.3.min.js"><...
How to use : Getting started
<html>
<head>
<title>Hello jQuery</title>
</head>
<body>
<script src="http://code.jquery.com/...
How to use : Getting started
<html>
<head>
<title>Hello jQuery</title>
</head>
<body>
<script src="jquery-1.11.3.min.js"><...
How to use : Getting started
<script type="text/javascript">
jQuery(document).ready(function(){
//your code should go here...
jQuery.selectors();
How to use : Selectors
//Basic selectors
// ID
$('#presentation')
// class
$('.slide')  
// element
$('div')
//wildcard
$(...
How to use : Selectors
//Basic selectors
// ID
$('#presentation')
// class
$('.slide')  
// element
$('div')
//wildcard
$(...
How to use : Selectors
//Basic selectors
// ID
$('#presentation')
// class
$('.slide')  
// element
$('div')
//wildcard
$(...
How to use : Selectors
//Basic selectors
// ID
$('#presentation')
// class
$('.slide')  
// element
$('div')
//wildcard
$(...
How to use : Selectors
//Basic selectors
// ID
$('#presentation')
// class
$('.slide')  
// element
$('div')
//wildcard
$(...
How to use : Selectors
//Basic selectors
// ID
$('#presentation')
// class
$('.slide')  
// element
$('div')
//wildcard
$(...
How to use : Selectors
// Parent/child selectors
    
// returns children of the parent a
$('ul li')
    
// returns eleme...
How to use : Selectors
// Parent/child selectors
    
// returns children of the parent a
$('ul li')
    
// returns eleme...
How to use : Selectors
// Parent/child selectors
    
// returns children of the parent a
$('ul li')
    
// returns eleme...
How to use : Selectors
// Parent/child selectors
    
// returns children of the parent a
$('ul li')
    
// returns eleme...
How to use : Selectors
// Parent/child selectors
    
// returns children of the parent a
$('ul li')
    
// returns eleme...
How to use : Filters
//first element in a result set
$('ul li:first')
    
//first child of the parent
$('ul li:first-chil...
How to use : Filters
//first element in a result set
$('ul li:first')
    
//first child of the parent
$('ul li:first-chil...
How to use : Filters
//first element in a result set
$('ul li:first')
    
//first child of the parent
$('ul li:first-chil...
How to use : Filters
//first element in a result set
$('ul li:first')
    
//first child of the parent
$('ul li:first-chil...
How to use : Filters
//first element in a result set
$('ul li:first')
    
//first child of the parent
$('ul li:first-chil...
How to use : Filters
//first element in a result set
$('ul li:first')
    
//first child of the parent
$('ul li:first-chil...
How to use : Filters
//first element in a result set
$('ul li:first')
    
//first child of the parent
$('ul li:first-chil...
How to use : Filters
// nth-child filters
    
// nth child in a result set
$('ul li:nth-child(2)')
 
// all odd numbered ...
How to use : Filters
// nth-child filters
    
// nth child in a result set
$('ul li:nth-child(2)')
 
// all odd numbered ...
How to use : Filters
// nth-child filters
    
// nth child in a result set
$('ul li:nth-child(2)')
 
// all odd numbered ...
How to use : Filters
// nth-child filters
    
// nth child in a result set
$('ul li:nth-child(2)')
 
// all odd numbered ...
How to use : Filters
// nth-child filters
    
// nth child in a result set
$('ul li:nth-child(2)')
 
// all odd numbered ...
How to use : Filters
// returns elements that are equal to
// the index supplied
$('ul li:eq(1)')
    
// returns elements...
How to use : Filters
// returns elements that are equal to
// the index supplied
$('ul li:eq(1)')
    
// returns elements...
How to use : Filters
// returns elements that are equal to
// the index supplied
$('ul li:eq(1)')
    
// returns elements...
How to use : Filters
// returns elements that are equal to
// the index supplied
$('ul li:eq(1)')
    
// returns elements...
How to use : Filters
// returns elements that are equal to
// the index supplied
$('ul li:eq(1)')
    
// returns elements...
How to use : Filters
// returns elements that are equal to
// the index supplied
$('ul li:eq(1)')
    
// returns elements...
How to use : Filters
//form filters
    
//returns elements that are enabled
$('input:enabled')
    
//returns elements th...
How to use : Filters
//form filters
    
//returns elements that are enabled
$('input:enabled')
    
//returns elements th...
How to use : Filters
//form filters
    
//returns elements that are enabled
$('input:enabled')
    
//returns elements th...
How to use : Filters
//form filters
    
//returns elements that are enabled
$('input:enabled')
    
//returns elements th...
How to use : Filters
//form filters
    
//returns elements that are enabled
$('input:enabled')
    
//returns elements th...
How to use : Filters
//form filters
    
//returns elements that are enabled
$('input:enabled')
    
//returns elements th...
How to use : Filters
//content filters
    
// :has(x) all elements with a
// descendant that matches x
$('div:has(p)')
  ...
How to use : Filters
//content filters
    
// :has(x) all elements with a
// descendant that matches x
$('div:has(p)')
  ...
How to use : Filters
//content filters
    
// :has(x) all elements with a
// descendant that matches x
$('div:has(p)')
  ...
How to use : Filters
//content filters
    
// :has(x) all elements with a
// descendant that matches x
$('div:has(p)')
  ...
How to use : Filters
//content filters
    
// :has(x) all elements with a
// descendant that matches x
$('div:has(p)')
  ...
How to use : Collections
// this returns a jQuery collection
// your selection wrapped inside a 
// jQuery object that can...
jQuery.chaining();
How to use : Chaining
 $('ul')
    .find('.slide')
    .addClass('active');
 $('ul')
    .find('.slide')
    .removeClass(...
jQuery.caching();
How to use : Caching
// uncached selections
$('.slide').fadeIn();
$('.slide').css('color','blue');
$('.slide').on('click',...
How to use : Caching
// uncached selections
$('.slide').fadeIn();
$('.slide').css('color','blue');
$('.slide').on('click',...
jQuery.attributes();
How to use : Attributes
// gets the value of an attribute
// for the first element in a set only
var link = $('a').attr('h...
jQuery.properties();
How to use : Properties
var elem = $('input[type=checkbox]');
console.log(elem.prop('checked'));
//true
console.log(elem.i...
jQuery.data();
How to use : Data
var last = $('.slide:last');
// Set some data
last.data('description', 'Summarizes content');
// You can...
How to use : Data
var last = $('.slide:last');
// Set some data
last.data('description', 'Summarizes content');
// You can...
jQuery.css();
How to use : CSS
// Gets a CSS property
var bgColor = $('.slide').css('backgroundColor');
console.log(bgColor); //gray
// ...
How to use : CSS
$('.slide:first').addClass('visible');
$('.slide:first').removeClass('pending');
$('.slide').toggleClass(...
How to use : CSS
$('.slide:first').addClass('visible');
$('.slide:first').removeClass('pending');
$('.slide').toggleClass(...
How to use : CSS
$('.slide:first').addClass('visible');
$('.slide:first').removeClass('pending');
$('.slide').toggleClass(...
How to use : CSS
$('.slide:first').addClass('visible');
$('.slide:first').removeClass('pending');
$('.slide').toggleClass(...
jQuery.events();
How to use : Events
Registering behaviours which are applied when a user interacts with the browser :
// Binding a click e...
How to use : Events
Other jQuery events methods:
- $(elem).load(function(e){ ... });
- $(elem).unload(function(e){ ... });...
How to use : Ajax
Supports both short and long-hand methods for making Ajax requests
Cross-browser XHR without the headach...
jQuery.ajax();
How to use : Ajax
// Retrieve the latest version of a web page
$.ajax({  
url: "slides.html",
type: 'GET', // (POST | PUT ...
How to use : Ajax
// Get data
$.get('slides.html', function(data) {  
$('.result').html(data);
});
// Post data
$.post('sl...
$('thanks').sayTo('you');
Made with by @elacheche_bedis
Upcoming SlideShare
Loading in …5
×

jQuery Essentials

1,925 views

Published on

Things you should know about jQuery JavaScript library. A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.

Published in: Technology

jQuery Essentials

  1. 1. jQuery.essentials(); Made with by @elacheche_bedis
  2. 2. - What is it? - Why should I use it? - How to use it?
  3. 3. - What is it? - Why should I use it? - How to use it?
  4. 4. 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.
  5. 5. - What is it? - Why should I use it? - How to use it?
  6. 6. 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
  7. 7. 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 :
  8. 8. Why should I use function sendRequest(url, callback, postData) { var req = createXMLHTTPObject(); if (!req) return; var method = (postData) ? "POST" : "GET"; req.open(method, url, true); req.setRequestHeader('UserPAgent', 'XMLHTTP/1.0'); if (postData) { req.setRequestHeader('ContentPtype', 'application/xPwwwPformPurlencoded'); } req.onreadystatechange = function() { if (req.readyState != 4) return; if (req.status != 200 && req.status != 304) { return; } callback(req); } if (req.readyState == 4) return; req.send(postData); } Javascript cross-browser ajax request :
  9. 9. Why should I use // Get data $.get('slides.php', { From : 1 , to : 5 },function(data) {   $('.result').html(data); }); jQuery cross-browser ajax request :
  10. 10. - What is it? - Why should I use it? - How to use it?
  11. 11. How to use : Getting started www.jquery.com
  12. 12. How to use : Getting started <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
  13. 13. How to use : Getting started <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
  14. 14. How to use : Getting started <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.
  15. 15. How to use : Getting started <script type="text/javascript"> jQuery(document).ready(function(){ //your code should go here }); </script> $ is an alias to jQuery Code can either use $ or just jQuery : <script type="text/javascript"> $(document).ready(function(){ //your code should go here }); </script>
  16. 16. jQuery.selectors();
  17. 17. How to use : Selectors //Basic selectors // ID $('#presentation') // class $('.slide')   // element $('div') //wildcard $('*') //attribute $('input[name="prezName"]') <div class="welcome"></div> <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> <input type="text" name="prezName"/>
  18. 18. How to use : Selectors //Basic selectors // ID $('#presentation') // class $('.slide')   // element $('div') //wildcard $('*') //attribute $('input[name="prezName"]') <div class="welcome"></div> <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> <input type="text" name="prezName"/>
  19. 19. How to use : Selectors //Basic selectors // ID $('#presentation') // class $('.slide')   // element $('div') //wildcard $('*') //attribute $('input[name="prezName"]') <div class="welcome"></div> <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> <input type="text" name="prezName"/>
  20. 20. How to use : Selectors //Basic selectors // ID $('#presentation') // class $('.slide')   // element $('div') //wildcard $('*') //attribute $('input[name="prezName"]') <div class="welcome"></div> <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> <input type="text" name="prezName"/>
  21. 21. How to use : Selectors //Basic selectors // ID $('#presentation') // class $('.slide')   // element $('div') //wildcard $('*') //attribute $('input[name="prezName"]') <div class="welcome"></div> <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> <input type="text" name="prezName"/>
  22. 22. How to use : Selectors //Basic selectors // ID $('#presentation') // class $('.slide')   // element $('div') //wildcard $('*') //attribute $('input[name="prezName"]') <div class="welcome"></div> <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> <input type="text" name="prezName"/>
  23. 23. How to use : Selectors // 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') <div class="welcome"><ul></ul></div> <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> <ul></ul> <input type="text" name="prezName"/>
  24. 24. How to use : Selectors // 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') <div class="welcome"><ul></ul></div> <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> <ul></ul> <input type="text" name="prezName"/>
  25. 25. How to use : Selectors // 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') <div class="welcome"><ul></ul></div> <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> <ul></ul> <input type="text" name="prezName"/>
  26. 26. How to use : Selectors // 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') <div class="welcome"><ul></ul></div> <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> <ul></ul> <input type="text" name="prezName"/>
  27. 27. How to use : Selectors // 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') <div class="welcome"><ul></ul></div> <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> <ul></ul> <input type="text" name="prezName"/>
  28. 28. 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') <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>
  29. 29. 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') <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>
  30. 30. 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') <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>
  31. 31. 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') <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>
  32. 32. 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') <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>
  33. 33. 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') <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>
  34. 34. 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') <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>
  35. 35. How to use : Filters // 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)') <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>
  36. 36. How to use : Filters // 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)') <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>
  37. 37. How to use : Filters // 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)') <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>
  38. 38. How to use : Filters // 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)') <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>
  39. 39. How to use : Filters // 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)') <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>
  40. 40. How to use : Filters // 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 type="text/css"> .gone{ display:none} </style> <ul id="presentation">     <li class="slide">Getting started</li>     <li class="slide gone">Selectors</li>     <li class="slide">Filters</li>     <li class="slide"></li>     <li class="slide">Ajax</li> </ul>
  41. 41. How to use : Filters // 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 type="text/css"> .gone{ display:none} </style> <ul id="presentation">     <li class="slide">Getting started</li>     <li class="slide gone">Selectors</li>     <li class="slide">Filters</li>     <li class="slide"></li>     <li class="slide">Ajax</li> </ul>
  42. 42. How to use : Filters // 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 type="text/css"> .gone{ display:none} </style> <ul id="presentation">     <li class="slide">Getting started</li>     <li class="slide gone">Selectors</li>     <li class="slide">Filters</li>     <li class="slide"></li>     <li class="slide">Ajax</li> </ul>
  43. 43. How to use : Filters // 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 type="text/css"> .gone{ display:none} </style> <ul id="presentation">     <li class="slide">Getting started</li>     <li class="slide gone">Selectors</li>     <li class="slide">Filters</li>     <li class="slide"></li>     <li class="slide">Ajax</li> </ul>
  44. 44. How to use : Filters // 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 type="text/css"> .gone{ display:none} </style> <ul id="presentation">     <li class="slide">Getting started</li>     <li class="slide gone">Selectors</li>     <li class="slide">Filters</li>     <li class="slide"></li>     <li class="slide">Ajax</li> </ul>
  45. 45. How to use : Filters // 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 type="text/css"> .gone{ display:none} </style> <ul id="presentation">     <li class="slide">Getting started</li>     <li class="slide gone">Selectors</li>     <li class="slide">Filters</li>     <li class="slide"></li>     <li class="slide">Ajax</li> </ul>
  46. 46. How to use : Filters //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') <div class="welcome"></div> <input type="text" name="prezName"/> <input disabled=”disabled” type="text" name="prezDescription"/> <input type="checkbox" checked="checked"/> <select name="currentSlide">     <option>Selectors</option>     <option selected="selected"> Filters </option> </select> <input type="checkbox"/>
  47. 47. How to use : Filters //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') <div class="welcome"></div> <input type="text" name="prezName"/> <input disabled=”disabled” type="text" name="prezDescription"/> <input type="checkbox" checked="checked"/> <select name="currentSlide">     <option>Selectors</option>     <option selected="selected"> Filters </option> </select> <input type="checkbox"/>
  48. 48. How to use : Filters //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') <div class="welcome"></div> <input type="text" name="prezName"/> <input disabled=”disabled” type="text" name="prezDescription"/> <input type="checkbox" checked="checked"/> <select name="currentSlide">     <option>Selectors</option>     <option selected="selected"> Filters </option> </select> <input type="checkbox"/>
  49. 49. How to use : Filters //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') <div class="welcome"></div> <input type="text" name="prezName"/> <input disabled=”disabled” type="text" name="prezDescription"/> <input type="checkbox" checked="checked"/> <select name="currentSlide">     <option>Selectors</option>     <option selected="selected"> Filters </option> </select> <input type="checkbox"/>
  50. 50. How to use : Filters //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') <div class="welcome"></div> <input type="text" name="prezName"/> <input disabled=”disabled” type="text" name="prezDescription"/> <input type="checkbox" checked="checked"/> <select name="currentSlide">     <option>Selectors</option>     <option selected="selected"> Filters </option> </select> <input type="checkbox"/>
  51. 51. How to use : Filters //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') <div class="welcome"></div> <input type="text" name="prezName"/> <input disabled=”disabled” type="text" name="prezDescription"/> <input type="checkbox" checked="checked"/> <select name="currentSlide">     <option>Selectors</option>     <option selected="selected"> Filters </option> </select> <input type="checkbox"/>
  52. 52. How to use : Filters //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 class="welcome"> <p></p> </div> <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>
  53. 53. How to use : Filters //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 class="welcome"> <p></p> </div> <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>
  54. 54. How to use : Filters //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 class="welcome"> <p></p> </div> <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>
  55. 55. How to use : Filters //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 class="welcome"> <p></p> </div> <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>
  56. 56. How to use : Filters //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 class="welcome"> <p></p> </div> <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>
  57. 57. 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 class="welcome"> <p></p> </div> <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> Understanding what $() returns
  58. 58. jQuery.chaining();
  59. 59. 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
  60. 60. jQuery.caching();
  61. 61. How to use : Caching // uncached selections $('.slide').fadeIn(); $('.slide').css('color','blue'); $('.slide').on('click',function(){     console.log('hello jQuery'); }); // cache the selection var slides = $('.slide'); // use as needed slides.fadeIn(); slides.css('color','blue'); slides.on('click', function(){     console.log('hello jQuery'); }); How to avoid re-querying the DOM unless absolutely necessary
  62. 62. 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
  63. 63. jQuery.attributes();
  64. 64. How to use : Attributes // gets the value of an attribute // for the first element in a set only var 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> <a href='#'> Another link </a> <a href='#'> Just another link </a> Getting and settings DOM attributes of elements
  65. 65. jQuery.properties();
  66. 66. How to use : Properties var elem = $('input[type=checkbox]'); console.log(elem.prop('checked')); //true console.log(elem.is(':checked')); //true // change property elem.prop('checked',''); //or elem.removeProp('checked'); <a href='#'> Another link </a> <a href='#'> Just another link </a> <input type='checkbox' checked/> Getting and settings DOM properties of elements
  67. 67. jQuery.data();
  68. 68. How to use : Data var last = $('.slide:last'); // Set some data last.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> </ul>
  69. 69. How to use : Data var last = $('.slide:last'); // Set some data last.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> </ul>
  70. 70. jQuery.css();
  71. 71. How to use : CSS // Gets a CSS property var 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
  72. 72. 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>
  73. 73. How to use : CSS $('.slide:first').addClass('visible'); $('.slide:first').removeClass('pending'); $('.slide').toggleClass('visible'); Supports some other utility methods : <li class="slide pending visible"> CSS </li> <li class="slide pending"> AJAX </li>
  74. 74. How to use : CSS $('.slide:first').addClass('visible'); $('.slide:first').removeClass('pending'); $('.slide').toggleClass('visible'); Supports some other utility methods : <li class="slide visible"> CSS </li> <li class="slide pending"> AJAX </li>
  75. 75. How to use : CSS $('.slide:first').addClass('visible'); $('.slide:first').removeClass('pending'); $('.slide').toggleClass('visible'); Supports some other utility methods : <li class="slide"> CSS </li> <li class="slide pending visible"> AJAX </li>
  76. 76. jQuery.events();
  77. 77. 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();
  78. 78. 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){ ... });
  79. 79. How to use : Ajax Supports both short and long-hand methods for making Ajax requests Cross-browser XHR without the headaches! Performing asynchronous HTTP requests
  80. 80. jQuery.ajax();
  81. 81. 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 } });
  82. 82. 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); });
  83. 83. $('thanks').sayTo('you'); Made with by @elacheche_bedis

×