BruceHubbard/addRemoveToggleClass.js

## addRemoveToggleClass.js
//jQuery
$('#foo').addClass('bar');
$('.foo').addClass('bar').removeClass('list').toggleClass('highlight');

//DOM

//classList makes this easy!
document.querySelector("#foo").classList.add('bar');

//holy crap that is a lot of typing for a simple example!
for(var i = 0, foos = document.querySelectorAll('.foo'); i < foos.length; i++) {
  foos[i].classList.add('bar');
  foos[i].classList.remove('list');
  foos[i].classList.toggle('highlight');
}

## borrow_array.js
var lis = document.querySelectorAll('li');

//borrowing Array's methods.  .call on a method is a fancy way to
//set the this property when the method runs

[].forEach.call(lis, function(li) {
  console.log(li);
});

[].map.call(lis, function(li) { return li.id; })
//["foo", "foo2"]

[].reduce.call(lis, function(total, li) {
  return total + li.id; }, "")
//"foofoo2"

## classList.js
var elem = document.getElementById('foo');

elem.classList.add('bar'); //#foo now has .bar
elem.classList.remove('bar'); //.bar is now removed
elem.classList.toggle('bar'); //#foo now has .bar again

## fancy_selector.js.md

      
    Raw
  

              fancy_selector.js.md
            
          
    //JQuery
$('ul #foo');

//DOM
document.querySelector('ul #foo');

//JQuery
$('li.bar')

//DOM
document.querySelectorAll('li.bar')


## findToggle.js
//jQuery

var foos = $('.foo');
...other code...

foos.find('#bar').toggleClass('highlight');
foos.find('.bar').toggleClass('highlight');

//DOM

var foos = document.querySelectorAll('.foo');
..other code...

for(var i = 0; i < foos.length; i++) {
  foos[i].querySelector('#bar').classList.toggle('highlight');
}

//really starting to appreciate jQuery at this point!
for(var i = 0; i < foos.length; i++) {
  for(var j = 0, foobars = foos[i].querySelectorAll('.bar'); j < foobars.length; j++) {
    foobars[j].classList.toggle('highlight');
  }
}


## nodelist_iterator.js
var lis = document.querySelectorAll('li');

console.log(lis.length); // 2

for(var i = 0; i < lis.length; i++) {
  console.log(lis[i]);
}

## querySelector.js
//WOW this looks a LOT like jQuery
var foo = document.querySelector("#foo");
var bar = document.querySelector(".bar"); //returns first match

//querySelector is available on elements in addition to document
bar.querySelector('.foobar');


var bars = document.querySelectorAll("#foo .bar"); //return a NodeList of all .bar's inside #foo's

//also available on elements
bar.querySelectorAll(".foobar"); //returns all .foobar's inside bar

## simple_manip.js
//JQuery
$('#foo').addClass('obama');
$('#foo').removeClass('obama');
$('#foo').toggleClass('obama');

//DOM
//Thank you to the new classList API!
// https://developer.mozilla.org/en-US/docs/DOM/element.classList
document.querySelector('#foo').classList.add('obama');
document.querySelector('#foo').classList.remove('obama');
document.querySelector('#foo').classList.toggle('obama');

## vanilla_jquery.html
<html>
  <body>
    <ul>
      <li id="foo" class="bar">Item 1</li>
      <li id="foo2" class="bar2">Item 2</li>
    </ul>
  </body>
</html>

## vanilla_jquery.js.md

      
    Raw
  

              vanilla_jquery.js.md
            
          
    //Let's start with something simple like pulling a single node
$('ul');

//YEA! This looks just like JQuery!
//querySelector returns the first matched node
document.querySelector('ul');

//OK now let's select several things
$('li')

//There's also querySelectorAll which will return ALL matches
document.querySelectorAll('li')
	//jQuery
	$('#foo').addClass('bar');
	$('.foo').addClass('bar').removeClass('list').toggleClass('highlight');

	//DOM

	//classList makes this easy!
	document.querySelector("#foo").classList.add('bar');

	//holy crap that is a lot of typing for a simple example!
	for(var i = 0, foos = document.querySelectorAll('.foo'); i < foos.length; i++) {
	foos[i].classList.add('bar');
	foos[i].classList.remove('list');
	foos[i].classList.toggle('highlight');
	}
	var lis = document.querySelectorAll('li');

	//borrowing Array's methods. .call on a method is a fancy way to
	//set the this property when the method runs

	[].forEach.call(lis, function(li) {
	console.log(li);
	});

	[].map.call(lis, function(li) { return li.id; })
	//["foo", "foo2"]

	[].reduce.call(lis, function(total, li) {
	return total + li.id; }, "")
	//"foofoo2"
	var elem = document.getElementById('foo');

	elem.classList.add('bar'); //#foo now has .bar
	elem.classList.remove('bar'); //.bar is now removed
	elem.classList.toggle('bar'); //#foo now has .bar again
	//jQuery

	var foos = $('.foo');
	...other code...

	foos.find('#bar').toggleClass('highlight');
	foos.find('.bar').toggleClass('highlight');

	//DOM

	var foos = document.querySelectorAll('.foo');
	..other code...

	for(var i = 0; i < foos.length; i++) {
	foos[i].querySelector('#bar').classList.toggle('highlight');
	}

	//really starting to appreciate jQuery at this point!
	for(var i = 0; i < foos.length; i++) {
	for(var j = 0, foobars = foos[i].querySelectorAll('.bar'); j < foobars.length; j++) {
	foobars[j].classList.toggle('highlight');
	}
	}
	var lis = document.querySelectorAll('li');

	console.log(lis.length); // 2

	for(var i = 0; i < lis.length; i++) {
	console.log(lis[i]);
	}
	//WOW this looks a LOT like jQuery
	var foo = document.querySelector("#foo");
	var bar = document.querySelector(".bar"); //returns first match

	//querySelector is available on elements in addition to document
	bar.querySelector('.foobar');


	var bars = document.querySelectorAll("#foo .bar"); //return a NodeList of all .bar's inside #foo's

	//also available on elements
	bar.querySelectorAll(".foobar"); //returns all .foobar's inside bar
	//JQuery
	$('#foo').addClass('obama');
	$('#foo').removeClass('obama');
	$('#foo').toggleClass('obama');

	//DOM
	//Thank you to the new classList API!
	// https://developer.mozilla.org/en-US/docs/DOM/element.classList
	document.querySelector('#foo').classList.add('obama');
	document.querySelector('#foo').classList.remove('obama');
	document.querySelector('#foo').classList.toggle('obama');
	<html>
	<body>
	<ul>
	<li id="foo" class="bar">Item 1</li>
	<li id="foo2" class="bar2">Item 2</li>
	</ul>
	</body>
	</html>