jQuery is a JavaScript Library built to make traversing and manipulating DOM elements a breeze.
jQuery | === | Library |
---|---|---|
JavaScript | === | Language |
Angular | === | Framework |
jQuery will increase your efficiency as a Developer.
It allows you to quickly move from basic BS into 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.
- Awesome Javascript: Here's a fantastic JS link. To the point on plugins, go ahead, search for
- 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
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 dynamic = $('dynamically created element you want');
var delegatedEventListener = function(){
$(static).on('click', 'dynamic', function(event){
event.preventDefault();
console.log(event);
console.log(this);
doSomethingFunction();
})
};
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
Specifically for AJAX, jQuery has its own flavor of AJAX which happens to be the flavor we teach @DBC. Being good with jQuery selectors is 3/4 of the battle when writing your jQuery flavored AJAX. The AJAX pattern itself is fairly simple. The selection and manipulation of DOM elements using jQuery around an AJAX call is the tricky bit.
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.
Learn jQuery with StreetFighter
Quick look at Twenty Great jQuery methods
jsfiddle - jquery show and tell with your friends