is jQuery
like a Sprite

Mariusz Kuta | webMASTAH.pl

webMASTAH CAMP #1 | 27.02.2014

What the hell
is jQuery

In the 90s

Every website looks so AWESOME!

God bless JavaScript!

jQuery

JavaScript library
Stable since August 2006
Cross-Browser
Fast
Lightweight

How is
jQuery used

What is the difference between JavaScript and jQuery?

stackoverflow.com/questions/20283098 • 11.2013

user3032819: What is the main difference between JavaScript and jQuery. I know the minor difference like jQuery is high performance more reliable.

Which is better in performance wise javascript or jquery?

stackoverflow.com/questions/17621564 • 07.2013

user2577204: I want to create browser editor like ms word for browser.for that what should I used javascript or jquery? Which is better in performance wise javascript or jquery?

Can regular JavaScript be mixed with jQuery?

stackoverflow.com/questions/3677140 • 09.2010

johnny: For example, can I take this script and mix this JavaScript with jQuery's document.ready instead of relying on onload?

How to get first letter from string using jquery?

stackoverflow.com/questions/18887742 • 09.2013

user2310209: I am poor knowledge in jquery. I got string as "109:00AM" from that how to get first letter such as 1. Could you please help me.

Do I need to learn Javascript before learning JQuery?

stackoverflow.com/questions/7943804 • 10.2011

lamwaiman1988: I want to learn html5 in order to write some games. I realized people include some JQuery code inside the game. So I head over and check JQuery and found that JQuery have some relationship with Javascript. Should I learn Javascript before learning JQuery?

What is
jQuery used for

selectors
class manipulation
style manipulation
animations
cute checkboxes + radio buttons
sliders
tabs
modals
and many more more plugins

OMG!
jQuery plugins!

electors

Select by ID

document.getElementById('foo')
document.querySelector('#foo')
$('#foo')
$(document.getElementById('foo'))
$(document.querySelector('#foo'))

Select by ID

Select by ClassName

document.getElementsByClassName('bar')
document.querySelectorAll('.bar')
$('.bar')

Select by ClassName

Alternatives

jQuery custom build
up to 32kB minified and gzipped
SizzleJS
4kB minified and gzipped
ZeptoJS
9.2kB minified and gzipped
Qwery
1.2kB minified and gzipped
VanillaJS
0kB minified and gzipped

Class/style
manipulation

classList

$(el).addClass('foo');

el.classList.add('foo');

$(el).removeClass('foo');

el.classList.remove('foo');

$(el).hasClass('foo');

el.classList.contains('foo');

$(el).toggleClass('foo');

el.classList.toggle('foo');

classList

style

$(el).hide();

el.style.display = 'none';

$(el).show();

el.style.display = '';

$(el).css('color', 'red');

el.style.color = 'red';

style

attr

$(el).attr('href');

el.getAttribute('href');

$(el).attr('rel', 'author');

el.setAttribute('rel', 'author');

$(el).removeAttr('href');

el.removeAttribute('href');

attr

Animations

Transition

$(el).hover(function() {
  $(this).animate({
    color: 'red', 'border-color': 'red'
  }, 400);
}, function() {
  $(this).animate({
    color: 'white', 'border-color': 'white'
  }, 400);
});

.el {
  color: white;
  border-color: white;
  transition: all .4s linear;
}
.el:hover {
  color: red;
  border-color: red;
}

Transform

$(el).animate({ left: '+= 100px' });

.el.animate {
  transform: translateX(100px);
}

Animation

$(el).effect('shake');

+ jQuery UI (~30kB minified and gzipped)

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.shake {
  animation: shake 1s;
}

Checkbox
+ radio button

<input id="checkbox-1" type="checkbox" />
<label for="checkbox-1">Click!</label>

input {
  display: none;
}
input + label {
  padding-left: 1em; position: relative;
}

input + label:before {
  content: '\f0c8'; font-family: FontAwesome;
  position: absolute; left: 0; top: 0;
}
input:checked + label:before {
  content: '\f14a';
}

input[type=radio] + label:before {
  content: '\f111';
}
input[type=radio]:checked + label:before {
  content: '\f058';
}

option 1

option 2

option 3

option 4

option 5

option 1

option 2

option 3

option 4

option 5

Sliders

<ul class="carousel">
  <li><a href="#"><img src="img1.jpg" alt="" /></a></li>
  <li><a href="#"><img src="img2.jpg" alt="" /></a></li>
  <li><a href="#"><img src="img3.jpg" alt="" /></a></li>
</ul>

.carousel {
  display: inline-block; overflow: hidden; position: relative;
}

.carousel > li {
  position: absolute; top: 0; left: 0;
  animation: carousel 9s linear 0s infinite;
}

.carousel > li:first-child { position: relative; }
.carousel > li:nth-of-type(2) { animation-delay: -6s; }
.carousel > li:nth-of-type(3) { animation-delay: -3s; }

@keyframes carousel {
  0%, 20%, 100% { transform: translateX(0); z-index: 5; }
  33.33%, 53.33% { transform: translateX(-100%); z-index: 0; }
  66.67%, 86.67% { transform: translateX(100%); z-index: 0; }
}

Tabs

<div class="tabs">
  <input type="radio" name="tab" id="tab1" checked />
  <input type="radio" name="tab" id="tab2" />
  <div class="labels">
    <label for="tab1">Tab 1</label>
    <label for="tab2">Tab 2</label>
  </div>
  <div class="container">
    <div>Content 1</div>
    <div>Content 2</div>
  </div>
</div>

.tabs > input { display: none; }

.tabs .container > div { height: 0; overflow: hidden; }

.tabs > input:nth-of-type(1):checked ~ .container div:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ .container div:nth-of-type(2) {
  height: 100%;
}

.tabs > input:nth-of-type(1):checked ~ .labels label:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ .labels label:nth-of-type(2) {
  background: #fff; color: #2c3e50;
}

Tab 1 Tab 2 Tab 3

Much simple

Very CSS

Modals

<a href="#tickets" class="button">Zgłoś swój udział!</a>

<div class="modal" id="tickets">
  <div class="modal-content">
    <!-- content -->
  </div>
</div>

.modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0; visibility: hidden; z-index: 111;
}
.modal:target {
  opacity: 1;
  visibility: visible;
}

CAMP website

Problems

Browser support

querySelector 3.5 1 10 8
classList 3.6 8 11.50 10
transition 16 (4) 26 (1) 12.10 (11.6) 10
transform 16 (3.5) (1) 12.10 (10.5) 10 (9)
animation 16 (5) (1) 12.10 (12) 10
:checked 1 1 9 9
:target 1 1 9.5 9
:nth-of-type() 3.5 1 9.5 9
"+" & "~" 1 1 9 7

is jQuery
like a Sprite

What the hell
is jQuery

In the 90s

jQuery

How is
jQuery used

What is the difference between JavaScript and jQuery?

Which is better in performance wise javascript or jquery?

Can regular JavaScript be mixed with jQuery?

How to get first letter from string using jquery?

Do I need to learn Javascript before learning JQuery?

What is
jQuery used for

OMG!
jQuery plugins!

electors

Select by ID

Select by ID

Select by ClassName

Select by ClassName

Select by ClassName

Alternatives

Class/style
manipulation

classList

classList

style

style

attr

attr

Animations

Transition

Transform

Animation

Checkbox
+ radio button

Sliders

Tabs

Modals

Problems

Browser support

So...

Links

Thank you

is jQuerylike a Sprite

What the hellis jQuery

In the 90s

jQuery

How isjQuery used

What is the difference between JavaScript and jQuery?

Which is better in performance wise javascript or jquery?

Can regular JavaScript be mixed with jQuery?

How to get first letter from string using jquery?

Do I need to learn Javascript before learning JQuery?

What isjQuery used for

OMG!jQuery plugins!

electors

Select by ID

Select by ID

Select by ClassName

Select by ClassName

Select by ClassName

Alternatives

Class/stylemanipulation

classList

classList

style

style

attr

attr

Animations

Transition

Transform

Animation

Checkbox + radio button

Sliders

Tabs

Modals

Problems

Browser support

So...

Links

Thank you

is jQuery
like a Sprite

What the hell
is jQuery

How is
jQuery used

What is
jQuery used for

OMG!
jQuery plugins!

Class/style
manipulation

Checkbox
+ radio button