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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to jQuery Essentials

Similar to jQuery Essentials (20)

More from Bedis ElAchèche

More from Bedis ElAchèche (6)

Recently uploaded

Recently uploaded (20)

jQuery Essentials