unify "jQuery Basics" and "Using jQuery Core" into a single chapter. Resolves #86

Author: ajpiano

Rules

@@ -86,7 +86,6 @@ preprocess do
   @chapterOrder = [
     "getting-started",
     "javascript-101",
-    "jquery-basics",
     "using-jquery-core",
     "events",
     "effects",

content/jquery-basics/dex.md

@@ -0,0 +1,29 @@
+---
+chapter : using-jquery-core
+level   : beginner
+section : 4
+title   : Attributes
+---
+An element's attributes can contain useful information for your application, so
+it's important to be able to get and set them.
+
+The `$.fn.attr` method acts as both a getter and a setter. As with the
+`$.fn.css` method, `$.fn.attr` as a setter can accept either a key and a value,
+or an object containing one or more key/value pairs.
+
+<javascript caption="Setting attributes">
+$('a').attr('href', 'allMyHrefsAreTheSameNow.html');
+$('a').attr({
+  'title' : 'all titles are the same too!',
+  'href' : 'somethingNew.html'
+});
+</javascript>
+
+This time, we broke the object up into multiple lines. Remember, whitespace
+doesn't matter in JavaScript, so you should feel free to use it liberally to
+make your code more legible! You can use a minification tool later to strip out
+unnecessary whitespace for production.
+
+<javascript caption="Getting attributes">
+$('a').attr('href');  // returns the href for the first a element in the document
+</javascript>

content/using-jquery-core/attributes.md

@@ -1,5 +1,6 @@
 ---
-chapter : jquery-core
+chapter : using-jquery-core
+level: beginner
 section : 6
 title   : Avoiding Conflicts with Other Libraries
 attribution:  jQuery Fundamentals

content/using-jquery-core/avoid-conflicts-other-libraries.md

@@ -0,0 +1,75 @@
+---
+chapter : using-jquery-core
+level: beginner
+section : 3
+title   : CSS, Styling, & Dimensions
+---
+## CSS, Styling, & Dimensions
+
+jQuery includes a handy way to get and set CSS properties of elements.
+
+<div class="note" markdown="1">
+CSS properties that normally include a hyphen
+need to be camel cased in JavaScript.  For example, the CSS property font-size
+is expressed as fontSize when used as a property name in JavaScript.  This does
+not apply, however, when passing the name of a CSS property to the `$.fn.css`
+method as a string — in that case, either the camel cased or hyphenated form
+will work.
+</div>
+
+<javascript caption="Getting CSS properties">
+$('h1').css('fontSize'); // returns a string such as "19px"
+$('h1').css('font-size'); // also works
+</javascript>
+
+<javascript caption="Setting CSS properties">
+$('h1').css('fontSize', '100px'); // setting an individual property
+$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // setting multiple properties
+</javascript>
+
+Note the style of the argument we use on the second line — it is an object that
+contains multiple properties. This is a common way to pass multiple arguments
+to a function, and many jQuery setter methods accept objects to set mulitple
+values at once.
+
+**Note:** while we do not recommend using `$.fn.css` as a setter in production-ready code (see below), when passing in an object to set CSS, CSS properties will be camelCased, instead of using a hypen.
+
+### Using CSS Classes for Styling
+
+As a getter, the `$.fn.css` method is valuable; however, it should generally be
+avoided as a setter in production-ready code, because you don't want
+presentational information in your JavaScript. Instead, write CSS rules for
+classes that describe the various visual states, and then simply change the
+class on the element you want to affect.
+
+<javascript caption="Working with classes">
+var $h1 = $('h1');
+
+$h1.addClass('big');
+$h1.removeClass('big');
+$h1.toggleClass('big');
+
+if ($h1.hasClass('big')) { ... }
+</javascript>
+
+Classes can also be useful for storing state information about an element, such as indicating that an element is selected.
+
+### Dimensions
+
+jQuery offers a variety of methods for obtaining and modifying dimension and position information about an element.
+
+The code in “Basic dimensions methods”, is just a very brief overview of the
+dimensions functionality in jQuery; for complete details about jQuery dimension
+methods, visit the [Dimensions documentation on api.jquery.com](http://api.jquery.com/category/dimensions/).
+
+<javascript caption="Basic dimensions methods">
+$('h1').width('50px');   // sets the width of all H1 elements
+$('h1').width();         // gets the width of the first H1
+
+$('h1').height('50px');  // sets the height of all H1 elements
+$('h1').height();        // gets the height of the first H1
+
+$('h1').position();      // returns an object containing position
+                         // information for the first H1 relative to
+                         // its "offset (positioned) parent"
+</javascript>

content/using-jquery-core/css-styling-dimensions.md

@@ -3,6 +3,7 @@ chapter : jquery-core
 section : 4
 title   : Data Methods
 attribution:  jQuery Fundamentals
+level: intermediate
 ---
 As your work with jQuery progresses, you'll find that there's often data about
 an element that you want to store with the element.  In plain JavaScript, you

content/using-jquery-core/data-methods.md

@@ -0,0 +1,67 @@
+---
+chapter : jquery-basics
+level: beginner
+section : 1
+title   : $(document).ready()
+---
+You cannot safely manipulate a page until the document is “ready.” 
+jQuery detects this state of readiness for you; code included inside 
+`$(document).ready()` will only run once the page DOM (Document Object Model) is ready for JavaScript code to execute 
+whereas `$(window).load(function () {})` will run once the entire page (images or iframe) not just the DOM is ready.
+
+<javascript caption="A $(document).ready() block">
+$(document).ready(function() {
+  console.log('ready!');
+});
+</javascript>
+
+There is a shorthand for `$(document).ready()` that you will sometimes see; however, 
+I recommend against using it if you are writing code that people who aren't experienced 
+with jQuery may see.
+
+<javascript caption="Shorthand for $(document).ready()">
+
+    $(function() {
+      console.log('ready!');
+    });
+    
+</javascript>
+
+You can also pass a named function to `$(document).ready()` instead of passing an anonymous function.
+
+<javascript caption="Passing a named function instead of an anonymous function">
+
+    function readyFn( jQuery ) {
+      // code to run when the document is ready
+    }
+
+    $(document).ready(readyFn);
+    
+    // OR 
+    
+    $(window).load(readyFn);
+    
+</javascript>
+
+Lets take a look at how both the events act. The below example tries to load some website url in an iframe and checks for both the events. 
+<javascript>  
+
+    <html>
+      <head>
+      	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+    		<script>
+    			$(document).ready(function () {
+    				console.log('document loaded');
+    			});
+    			
+    			$(window).load(function () {
+    				console.log('window loaded');
+    			});	
+    		</script>
+    	</head>
+    	<body>
+    		<iframe src='http://techcrunch.com'></iframe>
+    	</body>
+    </html>
+  
+</javascript>

content/using-jquery-core/document-ready.md

@@ -1,8 +1,9 @@
 ---
-chapter : jquery-core
+chapter : using-jquery-core
 section : 1
 title   : $ vs $()
 attribution:  jQuery Fundamentals
+level: beginner
 ---
 Until now, we’ve been dealing entirely with methods that are called on a jQuery
 object. For example:

content/using-jquery-core/dollar-object-vs-function.md

@@ -0,0 +1,54 @@
+---
+chapter : jquery-basics
+section : 7
+title   : Exercises
+attribution:  jQuery Fundamentals
+---
+## Exercises
+
+### Selecting
+
+Open the file `/exercises/index.html` in your browser. 
+Use the file `/exercises/js/sandbox.js` or work in Firebug to accomplish the following:
+
+1.	Select all of the div elements that have a class of "module".
+
+2.	Come up with three selectors that you could use to get the third item in the #myList unordered list. Which is the best to use? Why?
+
+3.	Select the label for the search input using an attribute selector.
+
+4.	Figure out how many elements on the page are hidden (hint: .length).
+
+5.	Figure out how many image elements on the page have an alt attribute.
+
+6.	Select all of the odd table rows in the table body.
+
+### Traversing
+
+Open the file `/exercises/index.html` in your browser. Use the file `/exercises/js/sandbox.js` or work in Firebug to accomplish the following:
+
+1.	Select all of the image elements on the page; log each image's alt attribute.
+
+2.	Select the search input text box, then traverse up to the form and add a class to the form.
+
+3.	Select the list item inside `#myList` that has a class of "current" and remove that class from it; add a class of "current" to the next list item.
+
+4.	Select the select element inside `#specials`; traverse your way to the submit button.
+
+5.	Select the first list item in the #slideshow element; add the class "current" to it, and then add a class of "disabled" to its sibling elements.
+
+### Manipulating
+
+Open the file `/exercises/index.html` in your browser. Use the file `/exercises/js/sandbox.js` or work in Firebug to accomplish the following:
+
+1.	Add five new list items to the end of the unordered list `#myList`. Hint:
+
+    for (var i = 0; i<5; i++) { ... }
+
+2.	Remove the odd list items
+
+3. 	Add another h2 and another paragraph to the last div.module
+
+4.	Add another option to the select element; give the option the value "Wednesday"
+
+5.	Add a new div.module to the page after the last one; put a copy of one of the existing images inside of it.

content/using-jquery-core/exercises.md

@@ -1,7 +1,8 @@
 ---
-chapter : jquery-core
+chapter : using-jquery-core
 section : 5
 title   : Feature & Browser Detection
+level: intermediate
 attribution:  jQuery Fundamentals
 ---
 ## Feature & Browser Detection