jQuery is a JavaScript Library built to make traversing and manipulating DOM elements a breeze.

jQuery can dramatically increase your efficiency as a Developer.

It allows you to quickly move from basic selection to crazy advanced DOM manipulation.

• Plugins - Plugins - Plugins!
  • Awesome Javascript: Here's a fantastic JS link. To the point on plugins, go ahead, search for jQuery... Tip of the iceberg buddy.
• Super easy to pick up.
• Quickly grab those pesky lil divs tucked away in your DOM.
• Looks great on the ol' resume.
• Cross-browser Compatibility
  • Chrome
  • Internet Explorer
  • Safari
  • Firefox
  • Opera

• $() -- This is the jQuery selector
• $(document).ready() -- Get your scripts ready to run.
• $.on() -- This way to binding event delegation glory.
• $.ajax() - Want more Internet than your JS script has to offer...? Just AJAX and you're there.

Find a thing

Do something with the thing

Have a solid look through the code included in this repo. It gives a 1000ft overview of basic jQuery functionality.

Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.

var static = $('some-static-parent-element');

var delegatedEventListener = function(){
  $(static).on('click', '.some_dynamic_class', function(event){
    event.preventDefault();
    console.log(event);
    console.log(this);
    doSomethingFunction();
  })
};

Translation - Make this your DEFAULT pattern. Using this pattern for building event listeners allows you on listen to DOM elements which will be dynamically placed on the page after the initial load.

DOM === Document Object Model

Harnessing the power of jQuery will give you unprecedented control over the DOM with the kick ass benefit of writing way less code along the way.

jQuery DOM features include:

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Various utilities

AJAX is my FAVORITE part of Javascript, it's the part that talks to Ruby!

Pro Tip: Being good with jQuery selectors is 3/4 of the battle when writing AJAX.

1. Use jQuery to grab specific attributes from DOM elements and set them to a variable within whatever function is handling the event.
2. Construct the actual AJAX call, passing the variables above as arguments.
3. At this point we leave JS land and go back to Ruby land.
4. Server side route should see that the request is from AJAX,
5. Format data appropriately and return valid data.
6. Now leave the server and come back to JS land.
7. Write a .done method to go along with your request. Use this to consume the response data you received and update the DOM accordingly. You should also write a .fail function always and forever. See the note below the code for a good reason.

// STEP: 1
var url_variable = $('#thing').attr('href');
var action_variable = $('#thing').attr('action');
var data_variable = $('#thing').serialize();

// STEP: 2
var request = $.ajax({
  url: url_variable,
  type: action_variable,
  data: data_variable
})

// STEP: 6
request.done(function(response_data){
  console.log(response_data);
  $('#thing2').append(response_data);
})

request.fail(function(response_data){
  console.log(response_data);
  console.log("Ohhhh Noooo");
})

get '/dogs/new' do
  # STEP: 4
  if request.xhr?
    # STEP: 5
    erb: :'dogs/new', layout: false
  else
    erb :'dogs/new'
  end
end

post '/dogs' do
  @dog = Dog.new(params[:dog])
  if @dog.save
    # STEP: 4
    if request.xhr?
      # STEP: 5
      @dog.to_json
    else
      redirect '/dogs'
    end
  end
end

In the GET route above we are sending a partial back to AJAX. In the POST route we are sending back the @dog object as JSON. Same rules as always applies here. Be VERY aware of what your methods are returning. If you are expecting a partial and get JSON your AJAX will fail. :-(

Chrome defines $() as well. This is not jQuery. Always be sure you have actually loaded jQuery into your project. If you can select an element with $ but cannot run various jQuery methods on it this is most likely the culprit (Laugh now... Its happened to better Devs than you friend ;-)

From this point forward your Chrome Dev Tools should never be closed.

THE jQuery CheatSheet

Great jQUery tutorial

Learn jQuery with StreetFighter

Various jQuery resources

Style Guide

Quick look at Twenty Great jQuery methods

Truthy VS: Falsey

jsfiddle - jquery show and tell with your friends

30 Great CSS Selectors

Another jQuery Cheatsheet (PDF)

jQuery Selectors