reading-notes

Reading Notes for Codefellows!

---

Project maintained by AlanYHung Hosted on GitHub Pages — Theme by mattgraham

Code 301

Reading 02

(All My Notes are attributed/sourced from the Resources directly preceding them.)

JavaScript & JQuery

JQuery (pp. 293-335)

• JQuery is a JavaScript file you include in your web pages that lets you find and use elements through CSS-style selectors which you can manipulate with JQuery methods.
• Offers a simple way to quickly and consistently achieve variety of common JavaScript tasks across all major browsers without needing fallback code.
• Why use JQuery?
  1. Makes coding simpler
  2. Simple Selectors
  3. Common tasks in less code
  4. Cross-Browser Compatibility
• List of jQuery selectors and methods (pp. 302-305)
• A Matched Set / jQuery Selection - when you select one or more elements, a JQuery object is returned.
• Some jQuery methods both retrieve information from, and update the contents of, elements. Does not apply to all elements.
• jQuery Objects store references to elements
• Method .ready() checks that the page is loaded and ready to work with your code.
• Getting Element Content (p. 314)
  1. .html() - retrieves only the html inside the first element
  2. .text() - retrieves the text from the element.
• Updating Elements (p. 316)
  1. .html()
  2. .text()
  3. .replaceWith() - replaces every element in a matches set with new content
  4. .remove() - removes all elements in a matched set
• Inserting Elements (p. 318)
  1. .before()
  2. .after()
  3. .prepend()
  4. .append()
• Getting and Setting Attribute Values (p. 320)
  1. .attr()
  2. .removeAttr()
  3. .addClass()
  4. .removeClass()
• .css() lets you retrieve and set values of CSS properties
• .each() allows you to recreate the functionality of a loop on the selection of elements
• .on() is used to handle all events
  • Has 2 methods optional methods that let you filter the initial jQuery selection to a subset element and pass extra information to event handler using object literal notation.
• jQuery has effect methods to help with transition and movements of elements (p. 332)
  1. Basic Effects
     • .show()
     • .hide()
     • .toggle()
  2. Fading Effects
     • .fadeIn()
     • .fadeOut()
     • .fadeTo()
     • .fadeToggle()
  3. Sliding Effects
     • .slideUp()
     • .slideDown()
     • .slideToggle()
  4. Custom Effects
     • .delay()
     • .stop()
     • .animate() - allows you to make custom effects and animations

• JQuery (pp. 354-357)

• You can load jquery from a CDN (Content Delivery Network)
• Where to place your Scripts
  1. Head - not ideal as it makes your pages slower to load
  2. Body - not ideal will make whatever is after slower to load
  3. before </body> ideal location as the entire page will have loaded already before loading your script files

6 Reasons for Pair Programming

1. Greater Efficiency
2. Engaged Collaboration
3. Learning from fellow students
4. Social skills
5. Job interview readiness
6. Work environment readiness

<– Back