1/20/2016 - 5:04 PM

L html css jquery

// a note on training

Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->
// simple
<h2 style="color:blue"> CatPhotoApp</h2>
// separate <style>, css to ELEMENT, auto call by html
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  h2 {color:blue;}
// css CLASS, call by adding .class into html
  .red-text {
    color: red;
<h2 class="red-text">CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

// font-family > import font with url, then call in style with familyName 
<link href="" rel="stylesheet" type="text/css">
  .red-text {
    color: red;
  h2 {
    font-family: Lobster;
<h2 class="red-text">CatPhotoApp</h2>

// font-family degradation
h2 {
    font-family: Lobster, Monospace;   // if Lobster is not available, use Monospace.

// image, img/src, self closing
<img src=>

// image size
.small-image{ width:100px;}
<img class="small-image" src="http...">

// <a> anchor link
<p> View more <a href="">cat photos</a></p>
// alt
<a href="#"><img class="smaller-image thick-green-border" src="" alt="A cute orange cat lying on its back"></a>

// list, ul vs ol
  <li>cat nip</li>
  <li>laser pointers</li>
<p>Top 3 things cats hate:</p>

// margin(distance between own border and other element) vs padding (distance w/ own border)
padding: 20px 40px 40px 20px; clockOrder

// style: element as body/h2 , class as .blackbox, id as #idname

// when conflict in serveral css, the specific applied to element win.
   <h1 class="class1">abc</h1>   // class1 > global one
   <h1 class="class1 class2">abc</h1> // class2 > class1

// !important(in style) > inlineStyle > id > class // but in style definition .pink-text{color:pink!important} makes .pionk-text top level.
<h1 style="color:grey" id="orange-text" class="pink-text blue-text">Hello</h1>

// Color HEX use RGB red=FF0000=F00=rgb(255,0,0)

  // class=text-center/img-responsive/btn btn-block btn-info btn-danger < add to attribute
  // block col-md/xs-*
  // Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. 
  // Most of Bootstrap's classes can be applied to a div element.
    <div class="row">            // < class="row" is must-have, then elements in it share 12 col in total
      <div class="col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>    // < attention, earch one should have one <div>
      <div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div>
      <div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button></div>
// 80, use <span> deco inline elements
who <span class="text-danger">love</span>

// font-awesome. ad <link rel="stylesheet" href="... .css"/> 	
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button>   // "Like" is not necessary 

// redo 86

// object oriented js
    var Car = function() {       // Car is constructor
      this.wheels = 4;
      this.engines = 1;
      this.seats = 1;
    var car = new Car();  
    car.wheels=7     << create instance first
    var car = {"wheels":7,"engines":1,"seats":1}  // car is object
    // object constructor with PARAMETER in func
    var Car = function(a,b,c) {       // Car is constructor
      this.wheels = a;
      this.engines = b;
      this.seats = c;
    var car = new Car(1,2,3);
    // private var in object <<
            var Car = function() {
              // this is a private variable
              var speed = 10;
              // these are public methods
              this.accelerate = function(change) {
                speed += change;
              this.decelerate = function() {
                speed -= 5;
              this.getSpeed = function() {
                return speed;
            var Bike = function() {
            var gear;
            this.getGear = function(){return gear;}
            this.setGear = function(ee){return gear=ee;}
            var myCar = new Car();
            var myBike = new Bike();


  selector w3schools
  below 3 method are same if code before </body>
  $(document).ready(function() {$('button').click(function() {$('p').empty() })})
                  $(function() {$('button').click(function() {$('p').empty() })})
                                $('button').click(function() {$('p').empty() })
  the structure is elementA bind a funcA , funcA call elemB do action/func B (action or function)  
  << funcA is jQuery event 
  << funcB is jQuery effect/htmlCSS
  << elemB can be n/a, ex1>>  alert('abc');  ex2>>ajax call file link     
  << actionB w/o func when call action in html
  event binding (click/hover..) is a condition, sometime you want to run it, should throw that event, such as click(),
  .getJSON() = .ajax()
    $(document).ready(function() {
      $("element|.class|#id").addClass|removeClass("animated-shake");    // addClass+name from .css file.
      $("#target1").css("color", "red");
      $("#target1").prop("disabled","true"); // showButDisable a element
      $("h3").html("<i>jQuery Playground</i>");  // change=replace text content inside a element tag
      $("#target4").remove();                // remove a element
      $("#target2").appendTo("#right-well");         // MOVE #target2 (from div #left-well) to #right-well
      $("#target5").clone().appendTo("#left-well");  // COPY #target2 (from div #left-well) to #right-well
      $("#target1").parent().css("background-color","red");   // parent() is directParent.
      $("#right-well").children().css("color","red");         // children() is allChildren
      $("button:nth-child(2)").addClass("animated bounce");   // select nth element for target class/H.element!--%20Only%20change%20code%20above%20this%20line.%20--%3E%0A%0A%3Cdiv%20class%3D%22container-fluid%22%3E%0A%20%20%3Ch3%20class%3D%22text-primary%20text-center%22%3EjQuery%20Playground%3C%2Fh3%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-6%22%3E%0A%20%20%20%20%20%20%3Ch4%3E%23left-well%3C%2Fh4%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22well%22%20id%3D%22left-well%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target1%22%3E%23target1%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target2%22%3E%23target2%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target3%22%3E%23target3%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-6%22%3E%0A%20%20%20%20%20%20%3Ch4%3E%23right-well%3C%2Fh4%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22well%22%20id%3D%22right-well%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target4%22%3E%23target4%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target5%22%3E%23target5%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target6%22%3E%23target6%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A
      $(".target:even").addClass("animated bounce");          // odd=2nd/4th..   even=1st/3rd/5th
      $("body").addClass("animated fadeOut");                 // all body fadeout
  display: block/inline/none       //
  @media rule //
        @media screen and (max-width:599px) {
        nav li {
          display: inline;     // li is block as default
  position: relative, absolute, static(default),output   // absolute should have relative as higher level, if not, it's position to browser.   // attention +/- px
  float  // clear:left/right used for the element AFTER floating one.
  block+width% + float,output
  to fill all screen, inline-block (no need CLEAR for elem after float ones) > float
        .box2 {
        display: inline-block;
        width: 200px;
        height: 100px;
        margin: 1em;
  inline-block + vertical-align //
  #flexbox,css,output   //