$("#el").css("color", "red")

document.getElementById("el").style = "color: red;"

$("input").prop('disabled', true);

var inputElements = document.getElementsByTagName("input");

for(var i=0; i<inputElements.length; i++)
{
  inputElements[i].disabled = true;
}

$(function(){
  // document ready!!
})

var ready = (function(){    

  var readyList,
      DOMContentLoaded,
      class2type = {};
      class2type["[object Boolean]"] = "boolean";
      class2type["[object Number]"] = "number";
      class2type["[object String]"] = "string";
      class2type["[object Function]"] = "function";
      class2type["[object Array]"] = "array";
      class2type["[object Date]"] = "date";
      class2type["[object RegExp]"] = "regexp";
      class2type["[object Object]"] = "object";
      
  var ReadyObj = {
      // Is the DOM ready to be used? Set to true once it occurs.
      isReady: false,
      // A counter to track how many items to wait for before
      // the ready event fires. See #6781
      readyWait: 1,
      // Hold (or release) the ready event
      holdReady: function( hold ) {
          if ( hold ) {
              ReadyObj.readyWait++;
          } else {
              ReadyObj.ready( true );
          }
      },
      // Handle when the DOM is ready
      ready: function( wait ) {
          // Either a released hold or an DOMready/load event and not yet ready
          if ( (wait === true && !--ReadyObj.readyWait) || (wait !== true && !ReadyObj.isReady) ) {
              // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
              if ( !document.body ) {
                  return setTimeout( ReadyObj.ready, 1 );
              }
              
              // Remember that the DOM is ready
              ReadyObj.isReady = true;
              // If a normal DOM Ready event fired, decrement, and wait if need be
              if ( wait !== true && --ReadyObj.readyWait > 0 ) {
                  return;
              }
              // If there are functions bound, to execute
              readyList.resolveWith( document, [ ReadyObj ] );
              
              // Trigger any bound ready events
              //if ( ReadyObj.fn.trigger ) {
              //  ReadyObj( document ).trigger( "ready" ).unbind( "ready" );
              //}
          }
      },
      bindReady: function() {
          if ( readyList ) {
              return;
          }
          readyList = ReadyObj._Deferred();
          
          // Catch cases where $(document).ready() is called after the
          // browser event has already occurred.
          if ( document.readyState === "complete" ) {
              // Handle it asynchronously to allow scripts the opportunity to delay ready
              return setTimeout( ReadyObj.ready, 1 );
          }
          
          // Mozilla, Opera and webkit nightlies currently support this event
          if ( document.addEventListener ) {
              // Use the handy event callback
              document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
              // A fallback to window.onload, that will always work
              window.addEventListener( "load", ReadyObj.ready, false );
              
          // If IE event model is used
          } else if ( document.attachEvent ) {
              // ensure firing before onload,
              // maybe late but safe also for iframes
              document.attachEvent( "onreadystatechange", DOMContentLoaded );
              
              // A fallback to window.onload, that will always work
              window.attachEvent( "onload", ReadyObj.ready );
              
              // If IE and not a frame
              // continually check to see if the document is ready
              var toplevel = false;
              
              try {
                  toplevel = window.frameElement == null;
              } catch(e) {}
              
              if ( document.documentElement.doScroll && toplevel ) {
                  doScrollCheck();
              }
          }
      },
      _Deferred: function() {
          var // callbacks list
              callbacks = [],
              // stored [ context , args ]
              fired,
              // to avoid firing when already doing so
              firing,
              // flag to know if the deferred has been cancelled
              cancelled,
              // the deferred itself
              deferred  = {
              
                  // done( f1, f2, ...)
                  done: function() {
                      if ( !cancelled ) {
                          var args = arguments,
                              i,
                              length,
                              elem,
                              type,
                              _fired;
                          if ( fired ) {
                              _fired = fired;
                              fired = 0;
                          }
                          for ( i = 0, length = args.length; i < length; i++ ) {
                              elem = args[ i ];
                              type = ReadyObj.type( elem );
                              if ( type === "array" ) {
                                  deferred.done.apply( deferred, elem );
                              } else if ( type === "function" ) {
                                  callbacks.push( elem );
                              }
                          }
                          if ( _fired ) {
                              deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] );
                          }
                      }
                      return this;
                  },
                  
                  // resolve with given context and args
                  resolveWith: function( context, args ) {
                      if ( !cancelled && !fired && !firing ) {
                          // make sure args are available (#8421)
                          args = args || [];
                          firing = 1;
                          try {
                              while( callbacks[ 0 ] ) {
                                  callbacks.shift().apply( context, args );//shifts a callback, and applies it to document
                              }
                          }
                          finally {
                              fired = [ context, args ];
                              firing = 0;
                          }
                      }
                      return this;
                  },
                  
                  // resolve with this as context and given arguments
                  resolve: function() {
                      deferred.resolveWith( this, arguments );
                      return this;
                  },
                  
                  // Has this deferred been resolved?
                  isResolved: function() {
                      return !!( firing || fired );
                  },
                  
                  // Cancel
                  cancel: function() {
                      cancelled = 1;
                      callbacks = [];
                      return this;
                  }
              };
              
          return deferred;
      },
      type: function( obj ) {
          return obj == null ?
              String( obj ) :
              class2type[ Object.prototype.toString.call(obj) ] || "object";
      }
  }
  // The DOM ready check for Internet Explorer
  function doScrollCheck() {
      if ( ReadyObj.isReady ) {
          return;
      }
      
      try {
          // If IE is used, use the trick by Diego Perini
          // http://javascript.nwbox.com/IEContentLoaded/
          document.documentElement.doScroll("left");
      } catch(e) {
          setTimeout( doScrollCheck, 1 );
          return;
      }
      
      // and execute any waiting functions
      ReadyObj.ready();
  }
  // Cleanup functions for the document ready method
  if ( document.addEventListener ) {
      DOMContentLoaded = function() {
          document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
          ReadyObj.ready();
      };
      
  } else if ( document.attachEvent ) {
      DOMContentLoaded = function() {
          // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
          if ( document.readyState === "complete" ) {
              document.detachEvent( "onreadystatechange", DOMContentLoaded );
              ReadyObj.ready();
          }
      };
  }
  function ready( fn ) {
      // Attach the listeners
      ReadyObj.bindReady();
      
      var type = ReadyObj.type( fn );
      
      // Add the callback
      readyList.done( fn );//readyList is result of _Deferred()
  }
  return ready;
})();

ready(function(){
  // document ready!!
})

HTML

<div>
    <h3 id="header">SAMUEL L. IPSUM</h3>
    <a href="http://slipsum.com/">http://slipsum.com/</a>
    <p>
      Now that there is the Tec-9, a crappy spray gun from South Miami. 
      This gun is advertised as the most popular gun in American crime. 
      Do you believe that shit?
    </p> 
    <p>
      It actually says that in the little book
      that comes with it: the most popular gun in American crime. Like 
      they're actually proud of that shit. 
    </p>
</div>

<script>
  $("h1, a, p").addClass("red-border")
</script>

HTML

<div class="container">
    <h3 id="header">SAMUEL L. IPSUM</h3>
    <a href="http://slipsum.com/">http://slipsum.com/</a>
    <p>
      Now that there is the Tec-9, a crappy spray gun from South Miami. 
      This gun is advertised as the most popular gun in American crime. 
      Do you believe that shit?
    </p> 
    <p>
      It actually says that in the little book
      that comes with it: the most popular gun in American crime. Like 
      they're actually proud of that shit. 
    </p>
</div>

<script>
  $("#header").addClass("red-border")
</script>

HTML

<div class="container">
    <h3 id="header">SAMUEL L. IPSUM</h3>
    <a href="http://slipsum.com/">http://slipsum.com/</a>
    <p>
      Now that there is the Tec-9, a crappy spray gun from South Miami. 
      This gun is advertised as the most popular gun in American crime. 
      Do you believe that shit?
    </p> 
    <p>
      It actually says that in the little book
      that comes with it: the most popular gun in American crime. Like 
      they're actually proud of that shit. 
    </p>
</div>

<script>
  $(".container").addClass("red-border")
</script>

HTML

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

<script>
  $("table tr:first td:first").addClass("red-content")
</script>

HTML

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

<script>
  $("table tr:last td:last").addClass("red-content")
</script>

HTML

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

<script>
  $( "div:contains('John')" ).addClass("red-border")
</script>

// Get the html content of vg.no
$.ajax({
  url: "http://vg.no/"
}).done(function(res){
  console.log(res);
});

// Get the html content of vg.no
var url = "http://vg.no";
var xhr;

if(typeof XMLHttpRequest !== 'undefined'){
  xhr = new XMLHttpRequest();      
} 
else {
  var versions = [
    "MSXML2.XmlHttp.5.0", 
    "MSXML2.XmlHttp.4.0",
    "MSXML2.XmlHttp.3.0", 
    "MSXML2.XmlHttp.2.0",
    "Microsoft.XmlHttp"
  ];
  
  for(var i = 0, len = versions.length; i < len; i++) {
    try {
      xhr = new ActiveXObject(versions[i]);
      break;
    }catch(e){}
  }
}

xhr.onreadystatechange = function() {
  if(xhr.readyState < 4) {
    return;
  }
  
  if(xhr.status !== 200) {
    console.log("Not OK!", xhr.status);
  }
  
  // all is well  
  if(xhr.readyState === 4) {
    console.log(xhr.response);
  }     
}

xhr.open('GET', url, true);
xhr.send('');

/**
 *  Shorthand functions
 */ 
 
// $.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
$.get("example.php", function() {
  alert( "success" );
})




// $.getJSON( url [, data ] [, success( data, textStatus, jqXHR ) ] )
$.getJSON( "ajax/test.json", function( data ) {
  alert( "success" );
});




// $.getScript( url [, success(script, textStatus, jqXHR) ] )
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
  alert( "success" );
});



// $.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
$.post( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

/**
 *  Equivalent ajax call
 */ 
 
// $.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

// $.getJSON( url [, data ] [, success( data, textStatus, jqXHR ) ] )
$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

// $.getScript( url [, success(script, textStatus, jqXHR) ] )
$.ajax({
  url: url,
  dataType: "script",
  success: success
});

// $.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

HTML

<div class="container">
  <div id="animation-square"></div>
</div>
<style>
  .container {
    position: relative;
    width: 100%;
    min-height: 100px;
  }
  #animation-square {
    height: 20px;
    width:20px;
    background: red;
    
    transition: all 1s ease;
  }
  #animation-square.big {
    height: 150px;
    width:150px;
    background: blue;
    -webkit-transform: rotate(90deg);
  }
  
</style>
<script>
  (function(){
  
    var $animationSquare = $("#animation-square");
    $animationSquare.click(function(){
      $animationSquare.toggleClass("big");
    })
    
  })();
</script>

HTML

<div class="container">
  <div id="jq-square"></div>
</div>
<style>
  .container {
    position: relative;
    width: 100%;
    min-height: 100px;
  }
  #jq-square {
    height: 20px;
    width:20px;
    background: red;
  }
  
</style>
<script>
  (function(){
  
    var $animationSquare = $("#jq-square");
    $animationSquare.click(function(){
    
      var targetSize = $animationSquare.outerHeight() > 20 ? 20 : 150;
      
      var state = {
        width: targetSize + "px",
        height: targetSize + "px",
        color: targetSize == 20 ? "red" : "blue"
      };
      
      $animationSquare.animate(state)
    })
    
  })();
</script>