What is jQuery

Why use it?

• Succinct API

  $('div[name^=andrei]').addClass('presenter')

• Crossbrowser support
• Mature
  • More then 30% of all sites that use javascript use jQuery
  • Rich documentation and Tutorials
  • Ton of plugins
• You can learn it in half an hour!

Statistics for websites using JavaScript technologies

3 easy steps to get started

Get the latest version

Reference it in your code

Start using on 'document ready' event:

$(document).ready(function() {
	...
});

or simply

$(function () {

});

$() function

jQuery can be invoked using $() or jQuery(). jQuery.noConflict() will revert $ to prev value

$('<span id="newSpan">NEW!</span>').appendTo('.createdom.placeholder')

$('#newSpan'), $('.class'), ...

$('#newSpan').hide(), $('#newSpan').css('background-color', 'green')

Chainability

$('div').show().toggleClass('main').html('hello');

$.get('example.url') 
 .done(function() { alert("success"); }) 			
 .fail(function() { alert("error"); }) 				
 .always(function() { alert("complete"); });

$('#intro').css('color', '#cccccc')
	.find('a').addClass('highlighted').end
	.find('span').css('color', 'red').end

Selectors

Basic selectors

$('*') /select everything/

$('div') /by tag name/

$('#id') /by id/

$('.class') /by class/

$('div.class, h1, h2') /multiple combinations/

Hierarchy selectors

$('table td') /descendants/

$('tr > td') /children/

$('label + input') /adjacent siblings/

$('#content ~ div') /general siblings/

Index selectors

$('a:first') /first element/

$('a:last') /last element/

$('a:lt(2)') /index less than/

$('a:eq(2)') /index equeals/

Attribute selectors

$('div[id]') /has id/

$('div[id="main"]') /with id = name/

$('div[name^="main"]') /name starts with main/

$('div[name$="main"]') /name ends with main/

$('div[name*="main"]') /name contains main/

Form selectors

$(':checkbox') /checkboxes/

$(':radio') /radio buttons/

$(':button') /buttons/

$(':text') /text input/

$(':checked') /checked/

$(':selected') /selected/

$(':enabled') /enabled/

$(':disabled') /disabled/

Other magic selectors

$('div:visible') /visible element/

$('div:hidden') /hidden element/

$(':animated') /animated/

See others https://api.jquery.com/category/selectors/

jQuery collections

Selector returns a jQuery collection

You can treat it like an array

$('div.section').length equals to $('div.section').size()
$('div.section')[0]
$('div.section').each(function(i) {
	console.log('Item' + i + ' is ', this)
})

Traversing the DOM

jQuery provides additional methods for traversing the DOM

$('div.section').parent()

$('div.section').next()

$('div.section').prev()

$('div.section').nextAll('div')

$('div.section').parents()

$('div.section').find('h1')

DOM manipulation

Modifying the content

$('.placeholder').html('<p>Hello</p>');

$('.placeholder').replaceWith('<div>Hello</div>');
$('<h2>Hello</h2>').replaceAll('h1');

$('#main').empty();

$('.main').remove();

$('#nav').appendTo('#main');

Handling Attributes

/* get single attribute */
$('img').attr('alt');

/* set single attribute  */
$('img').attr('alt', 'img.description');

/* remove attribute */
$(':text').removeAttr('required');

/* set multiple attributes */
$('img').attr({ width : 10, height: 10 });

Handling CSS

/* get style */
$('div').css('float');

/* set style  */
$('div').css('float', 'left');

/* set multiple styles */
$('div').css({ position : 'relative', float: 'none' });

/* add/remove css class */
$('div').addClass('main');
$('div').removeClass('main');
$('div').toggleClass('main');

Grabbing values

Some methods return results from the first matched element

var height = $('div#intro').height();
var src = $('img.photo').attr('src');
var lastP = $('p:last').html()
var hasFoo = $('p').hasClass('foo');
var email = $('input#email').val();

Handling events

$( "#foo" ).bind( "click", function() {
  alert( "User clicked on 'foo.'" );
});

//Removes the handlers regardless of type.
$( "#foo" ).unbind();

//Removing handlers for click event type
$( "#foo").unbind( "click" );

Handling events

function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

$( "p" ).off();

//Remove all delegated click handlers from all paragraphs:
$( "p" ).off( "click", "**" );

// ... Foo will no longer be called.
$( "body" ).off( "click", "p", foo );

Shortcuts

.change()
.focus()
.focusin()
.select()
.submit()
.click()
.dblclick()
.mouseenter()
.mouseleave()
.mousemove()
.keydown()
.keypress()
.keyup()
etc...

Animation

• jQuery has buil in effects:

  $('h1').hide('slow');
  $('h1').slideDown('fast');
  $('h1').fadeOut(2000);

• You can chain them:

  $('h1').fadeOut(1000).slideDown()

• Or make your own:

  $('#block').animate({
  	width: '+=60px',
  	opacity: 0.4,
  	fontSize: '3em',
  	borderWidth: '10px'
  }, 1500);

Plugins

jQuery is extensible through plugins, which can add new methods to the jQuery object:

• Form: better form manipulation
• UI: drag and drop and widgets
• ... dozens more

jQuery.fn.hideLinks = function() {
	return this.find('a[href]').hide().end();
}
$('p').hideLinks();

Further reading

• http://jquery.com/
• http://docs.jquery.com/
• https://jqueryui.com/