Upload
bedis-elacheche
View
1.254
Download
0
Embed Size (px)
Citation preview
- 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 easily select elements and manipulate or add some behaviour on them.
- It's basically more accessible Javascript.
- 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 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
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 :
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?
- 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"></script> </body></html>
Include jQuery using a <script> tag
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
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.
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>
jQuery.selectors();
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"/>
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"/>
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"/>
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"/>
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"/>
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"/>
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"/>
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"/>
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"/>
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"/>
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"/>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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"/>
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"/>
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"/>
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"/>
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"/>
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"/>
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>
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>
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>
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>
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>
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
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>
<a href='#'>Another link
</a>
<a href='#'>Just another link
</a>
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>
<a href='#'>Just another link
</a>
<input type='checkbox' checked/>
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>
</ul>
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>
</ul>
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
$('.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>
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>
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>
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);});