Code 301: Class 02 - Reading Name

---

Read: JS Book 293-301, 306-331, & 354-357

• jQuery simple way to achieve variety of common JavaScript tasks, a JavaScript file that lets you find elements using CSS-style selectors and then do something with them using a jQuery method
  • Select elements easier than DOM query
  • Perform tasks like updating DOM
  • Handle Events
• Find elements using css-style selectors: $('li.hot')
  • 'li.hot' selector, that refers to all of the <li> elements with a class of hot
• Update the value of a class attribute: $('li.hot').addClass('complete');
  • . Member Operator, indicates that the method on the right should br used to update the elements on the left
  • .addClass('complete'); Method, this method refers to the class attribute and adds the parameter value complete
• Must link jQuery to your html
  • Example =

  
    </div>
    <script src="js/jquery-1.11.0.js"></script>
    <script src="app.js"></script>
  </body>
  
  

• jQuery Getting and Setting Data
  • For the following examples, assume there are multiple <li> elements in the file:

  
  var content = $('li').html(); //will select the first `<li>` element and assign its content to the new variable `content`
  
  $('li').html('updated'); //will update the contents of all `<li>` elements with the word "updated"
  
  

• Looping through similar elements when a selector returns multiple elements, you can update all of them using one method with no need to loop
• Chaining process of placing several methods in the same selector using dot notation to separate each
  • $('li[id!="one"]').hide().delay(500).fadeIn(1400);
  • This single line hides the selected elements, creates a pause, and fades in the elements
• jQuery’s .ready() method checks that the page is ready for your code to work with

$(document).ready(function(){
  //your script goes here
});

//Shortcut version of same function below
$(function(){
  //your script here
});

• Confirms that the DOM has been created before attempting to run the desired script
• Getting Element Content
  • .html() retrieves only the content of the first element in the matched set
  • .text() retrieves all text from the selected elements and their descendants
• Updating Elements
  • .html() gives every element in the matched set the same new content which may include html
  • .text() gives every element in the matched set the same new text, any markup would be shown as plain text
  • .replaceWith() replaces every element with the new content and returns the replaced elements
  • .remove() removes all of the elements in a matched set
• Changing content
  • Can update the content of an element with a string, variable, or a function
  • When specifying new content: use single quotes to surround the content and double quotes for the attribute values
• Inserting Elements
  • Creating a new element: var $newFragment = $('<li>'); creates a new jQuery object that contains an empty <li> element
    • var $newItem = $('<li class="new">item</li>'); creates a new jQuery object that contains an empty an <li> element with a class attribute and some text
  • Adding the new elements:
    • .before() inserts content before the selected element
    • .after() inserts content after the selected element
    • .prepend() inserts content inside the element after the opening tag
    • .append() inserts content inside the element before the closing tag
  • Getting and setting attribute values:
    • .attr(); method can get or set a specified attributer and its value. To get specify name of attribute in (). To set specify both attribute name and new value
    • .removeAttr() removes attribute by name specified in ()
    • .addClass() adds a new value to the existing value of the class attribute, does not overwrite
    • .removeClass() removes a value from the class attribute, leaving others unchanged
  • Getting and setting CSS properties:
    • var backgroundColor = $('li').css('background-color'); declares a variable and assigns it the value of the background color of the <li> element
    • $('li').css('background-color', '#272727') sets the background color for all <li> elements to the color #2727272

    
    $('li').css({
      'background-color': '#272727',
      'font-family': 'Courier'
    }) //Sets the background color and font family for all `<li>` elements
    
    

    • Working with an element in a selection:
      • .each() performs one or more statements on each of the items in the selection of elements that is returned by a selector
      • this or $(this) keyword to access the current element

      
      $('li').each(function(){
        var ids = this.id;
        $(this).append('<em class="order>' + ids + '</em>');
      }) //selection contains all `<li>` elements, `.each()` applies same code to all elements, function run for each item
      
      

      • Event methods:
        • .on() method used to handle all events

        
        $('li').on('click', function(){
          $(this).addClass('complete');
        }); //selects all `<li>` elements, listens for click event which triggers the function to add a class of "complete"
        
        

• Content Delivery Network (CDN) series of servers spread around the world that serve static files
  • Should place the <script src"js/sample.js"></script> just before the closing </body> tag

Read: 6 Reasons for Pair Programing

• Greater Efficiency research shows that pair programming may take slightly longer, but will produce higher quality code with less debugging and implementation time
• Engaged Collaboration pair programmers tend to be more focused and are able to assist each other with less outside assistance required
• Learning from Fellow Students the less experienced partner gains knowledge and the other learns through teaching
• Social Skills pair programming forces good communication and team work
• Job Interview Readiness simulates a situation that is often experienced during industry interviews
• Work Environment Readiness simulates the work environment

Read: JS Book 332-335, 302-305

• Effects
  • Basic Effects
    • .show() displays selected elements
    • .hide() hides selected elements
    • .toggle() toggles between showing and hiding selected elements
  • Fading Effects
    • .fadeIn() fades in selected elements
    • .fadeOut() fades out selected elements
    • .fadeTo() changes opacity of selected elements
    • .fadeToggle() hides or shows selected element, opposite of current state
  • Sliding Effects
    • .slideUp() hides selected elements with a sliding motion
    • .slideDown() shows a selected element with a sliding motion
    • .slideToggle() hides or shows with a sliding motion, opposite of current state
  • Custom Effects
    • .delay() delays execution of subsequent items in queue
    • .stop() stops animation if currently running
    • .animate() creates custom animation
      • Example: .animate({ styles to change } [, speed] [, easing] [, complete])'
• Finding Elements
  • Pg 302 & 303 list out many of the CSS selectors
  • Pg 304 & 305 list many of the jQuery methods

---

Return to reading-notes Deployed Site

Return to reading-notes Mark Down