Second pass - less double spacing, console log outputs directly after…

… the code that generates it
jquery · Nov 22, 2012 · aa6355d · aa6355d
1 parent 4a71fa8
commit aa6355d
Show file tree

Hide file tree

Showing 23 changed files with 169 additions and 620 deletions.
diff --git a/page/ajax/jquery-ajax-methods.md b/page/ajax/jquery-ajax-methods.md
@@ -36,9 +36,7 @@ $.ajax({
   // the data to send
   // (will be converted to a query string)
   data : {
-
     id : 123
-
   },
 
   // whether this is a POST or GET request
@@ -50,27 +48,20 @@ $.ajax({
   // code to run if the request succeeds;
   // the response is passed to the function
   success : function( json ) {
-
-      $("<h1/>").text( json.title ).appendTo("body");
-
-      $("<div class=\"content\"/>").html( json.html ).appendTo("body");
-
+    $("<h1/>").text( json.title ).appendTo("body");
+    $("<div class=\"content\"/>").html( json.html ).appendTo("body");
   },
 
   // code to run if the request fails;
   // the raw request and status codes are
   // passed to the function
   error : function( xhr, status ) {
-
-      alert("Sorry, there was a problem!");
-
+    alert("Sorry, there was a problem!");
   },
 
   // code to run regardless of success or failure
   complete : function( xhr, status ) {
-
     alert("The request is complete!");
-
   }
 
 });
@@ -234,13 +225,9 @@ type in their name.  </div>
 // Using jQuery's Ajax convenience methods
 // get plain text or html
 $.get( "/users.php", {
-
-    userId : 1234
-
-  }, function( resp ) {
-
-  console.log( resp );
-
+  userId : 1234
+}, function( resp ) {
+  console.log( resp ); // server response
 });
 
 // add a script to the page, then run a function defined in it
@@ -253,10 +240,9 @@ $.getScript( "/static/js/myScript.js", function() {
 // get JSON-formatted data from the server
 $.getJSON( "/details.php", function( resp ) {
 
-  $.each( resp, function( k, v ) {
-
-    console.log( k + " : " + v );
-
+  // log each key in the response data
+  $.each( resp, function( key, value ) {
+    console.log( key + " : " + value );
   });
 
 });
@@ -278,8 +264,6 @@ $("#newContent").load("/foo.html");
 ```
 // Using $.fn.load to populate an element based on a selector
 $("#newContent").load( "/foo.html #myDiv h1:first:", function( html ) {
-
   alert("Content updated!"");
-
 });
 ```
diff --git a/page/ajax/key-concepts.md b/page/ajax/key-concepts.md
@@ -86,7 +86,7 @@ $.get( "foo.php", function( r ) {
 
 });
 
-console.log( response ); // undefined!
+console.log( response ); // undefined
 ```
 
 Instead, we need to pass a callback function to our request; this callback will
@@ -95,9 +95,7 @@ returned, if any.
 
 ```
 $.get( "foo.php", function( response ) {
-
-  console.log( response );
-
+  console.log( response ); // server response
 });
 ```
 

diff --git a/page/ajax/working-with-jsonp.md b/page/ajax/working-with-jsonp.md
@@ -27,17 +27,13 @@ $.ajax({
 
   // tell YQL what we want and that we want JSON
   data : {
-
     q : "select title,abstract,url from search.news where query=\"cat\"",
     format : "json"
-
   },
 
   // work with the response
   success : function( response ) {
-
-    console.log( response );
-
+    console.log( response ); // server response
   }
 
 });

diff --git a/page/code-organization/concepts.md b/page/code-organization/concepts.md
@@ -51,43 +51,27 @@ options, and easing the path to reuse and refactoring.
 ```
 // An object literal
 var myFeature = {
-
-  myProperty : "hello",
-
-  myMethod : function() {
-
+  myProperty: "hello",
+  myMethod: function() {
     console.log( myFeature.myProperty );
-
   },
-
-  init : function( settings ) {
-
+  init: function( settings ) {
     myFeature.settings = settings;
-
   },
-
   readSettings : function() {
-
     console.log( myFeature.settings );
-
   }
-
 };
 
-// "hello"
-myFeature.myProperty;
+myFeature.myProperty === "hello"; // true
 
-// logs "hello"
-myFeature.myMethod();
+myFeature.myMethod(); // "hello"
 
 myFeature.init({
-
-  foo : "bar"
-
+  foo: "bar"
 });
 
-// logs { foo : "bar" }
-myFeature.readSettings(); 
+myFeature.readSettings(); // { foo: "bar" }
 ```
 
 The object literal above is simply an object assigned to a variable. The object
@@ -245,33 +229,26 @@ var feature = (function() {
 
   // private variables and functions
   var privateThing = "secret";
-
   var publicThing = "not secret";
-
   var changePrivateThing = function() {
-
     privateThing = "super secret";
-
   };
 
   var sayPrivateThing = function() {
-
     console.log( privateThing );
-
     changePrivateThing();
-
   };
 
   // public API
   return {
-    publicThing : publicThing,
-    sayPrivateThing : sayPrivateThing
-  }
+    publicThing: publicThing,
+    sayPrivateThing: sayPrivateThing
+  };
 
 })();
 
-// "not secret"
-feature.publicThing; 
+feature.publicThing; // "not secret"
+
 
 // logs "secret" and changes the value
 // of privateThing
@@ -302,67 +279,36 @@ $( document ).ready(function() {
   var feature = (function() {
 
     var $items = $("#myFeature li");
-
     var $container = $("<div class='container'></div>");
-
     var $currentItem = null;
-
     var urlBase = "/foo.php?item=";
-
     var createContainer = function() {
-
       var $i = $( this );
-
       var $c = $container.clone().appendTo( $i );
-
       $i.data( "container", $c );
-
     },
-
     buildUrl = function() {
-
       return urlBase + $currentItem.attr("id");
-
     },
-
     showItem = function() {
-
       var $currentItem = $( this );
-
       getContent( showContent );
-
     },
-
     showItemByIndex = function( idx ) {
-
       $.proxy( showItem, $items.get( idx ) );
-
     },
-
     getContent = function( callback ) {
-
       $currentItem.data("container").load( buildUrl(), callback );
-
     },
-
     showContent = function() {
-
       $currentItem.data("container").show();
-
       hideContent();
-
     },
-
     hideContent = function() {
-
       $currentItem.siblings().each(function() {
-
-          $( this ).data("container").hide();
-
+        $( this ).data("container").hide();
       });
-
     };
-
     $items.each( createContainer ).click( showItem );
 
     return {
@@ -372,6 +318,5 @@ $( document ).ready(function() {
   })();
 
   feature.showItemByIndex( 0 );
-
 });
 ```
diff --git a/page/effects/custom-effects.md b/page/effects/custom-effects.md
@@ -12,17 +12,14 @@ value, or to a value relative to the current value.
 ```
 // Custom effects with `$.fn.animate`">
 $("div.funtimes").animate({
-
     left : "+=50",
     opacity : 0.25
-
   },
   // duration:
   300,
+  // callback:
   function() {
-
-    console.log("done!"); // callback
-
+    console.log("done!");
   }
 });
 ```
@@ -47,13 +44,9 @@ As of jQuery 1.4, it is possible to do per-property easing when using the
 ```
 // Per-property easing">
 $("div.funtimes").animate({
-
-    left : [ "+=50", "swing" ],
-    opacity : [ 0.25, "linear" ]
-
-  },
-  300
-);
+  left: [ "+=50", "swing" ],
+  opacity: [ 0.25, "linear" ]
+}, 300 );
 ```
 
 For more details on easing options, see

diff --git a/page/effects/intro-to-effects.md b/page/effects/intro-to-effects.md
@@ -137,7 +137,7 @@ testing whether your selection returned any elements; if not, you can just run t
 var $someElement = $("#nonexistent");
 
 var cb = function() {
-  console.log("done!"");
+  console.log("done!");
 };
 
 if ( $someElement.length ) {
@@ -159,8 +159,8 @@ end-users control over page animations by rigging a button they can click to sto
 ```
 // Create a button to stop all animations on the page:
 $("input").attr({
-  type : "button",
-  value : "Stop All Animations"
+  type: "button",
+  value: "Stop All Animations"
 }).on( "click", function() {
   $("body *").filter(":animated").stop();
 }).appendTo( document.body );

diff --git a/page/events/event-delegation.md b/page/events/event-delegation.md
@@ -37,11 +37,8 @@ We can attach a direct bind click event to each `<li>` using the `.on()` method,
 ```
 // attach a directly bound event
 $("#list a").on( "click", function( event ) {
-
   event.preventDefault();
-
   console.log( $( this ).text() );
-
 });
 ```
 
@@ -69,11 +66,8 @@ Since we know how events bubble we can created a delegated event that listens fo
 ```
 // attach a delegated event
 $("#list").on( "click", "a", function( event ) {
-
   event.preventDefault();
-
   console.log( $( this ).text() );
-
 });
 ```
 Notice for the second parameter to the `.on()` method we are telling it which selector to listen for.  Now when a *click* event is triggered on our `<ul>`, our delegated event will check to see if the triggering element matches our selector (`"a"`).  If it does, our anonymous function will execute. We have now attached a single *click* event listener to our `<ul>` instead of an unknown number of directly bound events on our `<a>`"s.