jQuery fundamentals

[biglovisa]

Submit links to your work/ask questions about jQuery fundamentals here.

[acareaga]

Here are a few notes from each section of Bocoup’s jQuery tutorial:

JavaScript Fundamentals

• Everything in JavaScript is an object, except the primitives: strings, booleans, numbers, undefined, and null.
• “this” refers to the object inside the function that was called
• .call and .apply let you pass arguments to a function
• Array literal notation ( var myArray = [ 'a', 'b', 'c' ]; ) better than invoking “new Array”
• Most values in JS are truthy, only 5 values are falsey: undefined, null, NaN, 0, and ‘’
• Ternary operator is a cleaner way to write an if/else statement: var propertyName = ( dim === 'width' ) ? 'clientWidth' : 'clientHeight';
• Naming: “_foo” names with an underscore are typically private, “Dogs” names with an uppercase are usually constructors, and “$.ajax” names with a dollar sign are usually jQuery objects
• The double space surrounding a semicolon when setting properties (firstName : ‘Aaron’) seems weird to me.

jQuery Basics

• Interesting to look at the source code: https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js
• Test the contents of a selection by using: if ( $( '#nonexistent' ).length ) { // }
• $() creates a new element in memory. But it wont display until placed it’s on the page
• Getters retrieve info and are typicallly limited to the first element of a selection
• Setters operate on all elements in a selection

Traversing & Manipulating the DOM

• .end() allows you to get back to the original selection but should be refactored out
• .clone() copies an element but the copy must be placed. It is important to change or remove the copied element’s id attribute
• .remove(), .detach(), and .replaceWith() allow you to remove elements from the document

Events & Event Delegation

• Common event methods include: .click(), .keydown(), .keypress(), .keyup(), .mouseover(), .mouseout(), .mouseenter(), .mouseleave(), .scroll(), .focus(), .blur(), and .resize().
• These can all be used with .on( ‘focus blur’, console.log(“Hello”)). You can also bind multiple events at once with .on()
• .trigger() will trigger bound event handlers
• .off() will remove any event handlers that were bound to an event
• Namespacing events allows you to target specific handlers
• Event object properties include: type, which, target, pageX, and pageY
• Event bubbling allows you to use event delegation. This provides performance gains and consistency with handlers executing as planned.

Animating with jQuery

• Common effects include: .show(), .hide(), .fadeIn(), .fadeOut(), .slideDown(), .slideUp(), and .slideToggle()
• Use callback functions at the end of animation methods to specific what should happen next
• .animat() allows the use of custom CSS effects
• .stop() and .delay() are helpful when managing animations

AJAX & Deferreds

• Pass $.ajax() an option URL to apply same configuration across several routes
• Use JSON.stringify() and JSON.parse() to create and parse a JSON string outside of jQuery
• .then() and .always() allow you to attach callbacks on requests
• Specifiy ‘jsonp’ at the dataType to get around blocked XHR requests when calling API’s
• $.Defferred() allows you to manage asynchronous operations

[adamki]

jQuery

• checking the length of selected elements is a nice trick to check if you truly selected anything. .is() also proves be nice for 'testing'
• getters(with exception of text) will act on a single(first) elem. setters will implicitely iterate through all elements. Setters also take an anon Func.
• jQuery setters do not explicit return vals. This allows for method chaining. Pretty cool.
• JSONP lets you hit external APIs by padding a script.

Traversal and Manipulation

• traversal relies heavily on the family heirachy of HTML elements.
• .end() is pretty clever. Wouldn't this be the same as making an initial selection and using it when needed?
  • oh... yea, the chapter literally said that in the next paragraph
  • on a similar note, jQuery provides .addBack() which I find even more confusing. Just use a var.
• when comparing css manipulation methods, I prefer the explicit-ness of .css()

Events & Event Delegation

• Events can be set to trigger actions based on user actions.
• following JS patterns, the event is often an anon function, but can also be a named function
• jQuery allows you to interact with the event obj... AKA e
• also allows you to preventDefault DOM behaviour

Animations/Effects

• Would love more explanation of building animations with CSS3 vs jQuery. CSS3 is very powerful and allows for a ton of custom effects. Any insight on pros/cons?
• would love insight why one would use the get and post methods since they dont provide a success/failure block. The methods are still Asynchronous and can still err out? correct?
• jqXRH objects provide promise funtions done, then, fail, always

[amcrawford]

jQuery Fundamentals

• "$" acts as jQuery call
• $() always returns a truthy object - can put checks within your call to assert that it returned anything
• In jQuery, "elem" acts like "this" in accessing the DOM
• Can chain methods together!

Traversing & Manipulating

• Really important when working with big HTML files - jQuery offers a lot of ways to manipulate your page easily from a js file
• Can traverse html selections with: siblings, parent, etc
• val() alters the value of selected methods -attr() lets you sub values

Events

• jQuery offers a ton of interactive options for activating your methods: click, scroll, mouseover, etc
• You can also unbind events from HTML with .off()
• You can also prevent default actions (like html link clicks) to overwrite with AJAX or other actions instead

Effects

• You can use jQuery commands to create almost any effect on the screen!
• .stop() and .delay() can help to manage them

[rossedfort]

jQuery Basics

• jQuery(‘li’) === $(‘li’)
• $(document).ready() ensures the correct state of the page
• Elements can be retrieved by class, id, and by their html node name
• Selections always return truthy, need to check contents of response in order to determine success.
• $() will create a new element when passed a html snippet
• Chaining methods = 👍

Traversing & Manipulating

• filter with .filter() .has() and .not()
• finding elements relative to selection with .first() .siblings() .next() .parent() .children() etc.
• .end() reverts to original selection
• Once an element is found with traversal methods you can manipulate it
• .addClass() and .removeClass() but .toggleClass() is often better
• .css() to change css classes
• changing form values with .val()
• use .attr() to change other attributes
• .append() is called on a list whereas .appendTo() is called on a list item
• .insertAfter() and .after()
• .detach(), .remove(), and .replaceWith() are used for removing elements from the document

Events & Delegation

• .on(‘click’, function() {do stuff}) can be used, but jQuery provides shorthand methods such as .click, .keydown, .keypress, etc.
• Binding multiple events works best with .on()

Animating Pages with jQuery

• can preset speeds for animations with jQuery.fx.speeds.nameOfSpeed = x where x is time in milliseconds.
• then you can use $('.myClass').hide(nameOfSpeed)
• custom effects with .animate()
• .stop() and .delay() can manage animations

[matt-stj]

https://gist.github.com/matt-stj/b95bf61e588851e65d9b

[joshuajhun]

https://gist.github.com/joshuajhun/e28afd11da6ef3627cee