jQuery Essentials

1. jQuery.essentials(); Made with by @elacheche_bedis

2. - What is it? - Why should I use it? - How to use it?

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.

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. 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. 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. Why should I use // Get data $.get('slides.php', { From : 1 , to : 5 },function(data) { $('.result').html(data); }); jQuery cross-browser ajax request :

11. How to use : Getting started www.jquery.com

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. 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. 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. 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. jQuery.selectors();

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"/>

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"/>

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>

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>

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>

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"/>

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>

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. jQuery.chaining();

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. jQuery.caching();

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. 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. jQuery.attributes();

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. jQuery.properties();

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. jQuery.data();

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. 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. jQuery.css();

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. 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. 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. 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. 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. jQuery.events();

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. 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. 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. jQuery.ajax();

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. 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. $('thanks').sayTo('you'); Made with by @elacheche_bedis

jQuery Essentials

More Related Content

What's hot (20)

Similar to jQuery Essentials (20)

More from Bedis ElAchèche (6)

Recently uploaded (20)

jQuery Essentials