Js and Jquery

Trainning

JS Basic in Browser

JS 里面的概念。

先说 DOM：DOM 全称是 Document Object
Model，也就是文档对象模型。

DOM 就是针对 HTML 和 XML

提供的一个API。什么意思？就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如

你可以把 DOM 看成节点<img

上图是一个 html 文件，也就是网页的结构
- html 标签是一个节点（Node）。
- head、title、body、p 标签都是节点。
- 嵌套其他节点的节点叫做父节点。
- 被嵌套的节点叫做子节点。
- 同一个父节点下的节点叫做兄弟节点。
- 父亲的父亲以及上溯十八代祖宗叫做祖先节点。
- 儿子的儿子以及子子孙孙无穷匮也叫做后代节点。

Dom有什么用？

就是为了操作 HTML 中的元素，比如说我们要通过 JS 把这个网页的标题改了，直接这样就可以了：

 document.title = 'how to make love'; 

这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。

document
当浏览器下载到一个网页，通常是 HTML，这个 HTML 就叫 document（当然，这也是 DOM 树中的一个 node），从上图可以看到，document 通常是整个 DOM 树的根节点。这个 document 包含了标题（document.title）、URL（document.URL）等属性，可以直接在 JS 中访问到。

在 JS 中，可以通过 document 访问其子节点（其实任何节点都可以），如document.body;

document.getElementById('xxx'); 

document.getElementById('xxx').innerHTML = "第一次成功的改变了DOM"

var x = document.querySelector("p");
x.onclick = function(){
    x.innerHTML = "第一次成功的改变了DOM";
}

BOM

是 Browser Object Model，浏览器对象模型。

刚才说过 DOM 是为了操作文档出现的接口，那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。所以 BOM 就是为了解决这些事情出现的接口。

比如我们要让浏览器跳转到另一个页面，只需要

 location.href = "http://www.xxxx.com"; 

这个 location 就是 BOM 里的一个对象。windowwindow 也是 BOM 的一个对象，除去编程意义上的“兜底对象”之外，通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等。例如我要关闭当前窗口：

 window.close(); 

总结一下题主的问题：

DOM 是为了操作文档出现的 API，document 是其的一个对象；
BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

进阶认知

1. Javascript 不能够真正改变 DOM，它仅仅是改变呈现内容，当你刷新的时候就会发现我靠这怎么他妈的什么都还原了。
2. 但是你可以把这些改变传递给服务器，由后端比如 JAVA 来进行后续的操作， JAVA可以改变底层数据。
3. 用户的交互比如弹窗等等根本没必要让服务器也跟着掺和，why? 因为交互只是暂时的，用完了，还要变成默认的，不需要你保存到服务器，只要保证你点击的时候有反馈就行了。
4. 这就是前端。
   a. HTML 表达静态结构（有哪些元素，每个元素代表什么意义，而不是内容）
   b. CSS 呈现美化（元素的颜色，形状，布局）
   c. Javascript 负责动态交互（操作 DOM，使用 Ajax 进行异步刷新，与服务器交互）

Frontend work model

Behavior in Web

jQuery and JavaScript Coding: Examples and Best Practices

VS

Jquery

Learning Resource:
W3CSchool

Start

 $("document").ready(function() {
    // The DOM is ready!
    // The rest of the code goes here
  });

instead of by

 $(function() {
    // The DOM is ready!
    // The rest of the code goes here
  });

Variable

var $myDiv = $("#myDiv");
$myDiv.click(function(){...});

Selector

 // Set's an element's title attribute using it's current text
  $(".container input#elem").attr("title", $(".container input#elem").text());
  // Set's an element's text color to red
  $(".container input#elem").css("color", "red");
  // Makes the element fade out
  $(".container input#elem").fadeOut();

instead of by

// Set's an element's title attribute using it's current text
  $("#elem").attr("title", $("#elem").text());
  // Set's an element's text color to red
  $("#elem").css("color", "red");
  // Makes the element fade out
  $("#elem").fadeOut();

or shorter

  // Stores the live DOM element inside of a variable
  var elem = $("#elem");
  // Chaining
  elem.attr("title", elem.text()).css("color", "red").fadeOut();

Event

  $("#longlist li").on("mouseenter", function() {
    $(this).text("Click me!");
  });
  $("#longlist li").on("click", function() {
    $(this).text("Why did you click me?!");
  });

instead of by

  var listItems = $("#longlist li");
  listItems.on({
    "mouseenter": function() {
      $(this).text("Click me!");
    },
    "click": function() {
      $(this).text("Why did you click me?!");
    }
  })

or Better

var list = $("#longlist");
  list.on("mouseenter", "li", function(){
    $(this).text("Click me!");
  });
  list.on("click", "li", function() {
    $(this).text("Why did you click me?!");
  });

Ajax

function getName(personid) {
    var dynamicData = {};
    dynamicData["id"] = personID;
    $.ajax({
      url: "getName.php",
      type: "get",
      data: dynamicData,
      success: function(data) {
        // Updates the UI based the ajax result
        $(".person-name").text(data.name);  
      }
    });
  }
  getName("2342342");

instead of by

 function getName(personid) {
    var dynamicData = {};
    dynamicData["id"] = personID;
    return $.ajax({
      url: "getName.php",
      type: "get",
      data: dynamicData
    });
  }
  getName("2342342").done(function(data) {
    // Updates the UI based the ajax result
    $(".person-name").text(data.name); 
  });

Httpcode handler

handle specific status codes:

$.ajax({
  statusCode: {
    404: function() {
      alert( "page not found" );
    }
  }
});

or with deferred:

$.ajax({
    url: "update.php",
    type: "POST",
    data: customObj
})
.fail(function( jqXHR, textStatus, errorThrown) {
    if (jqXHR.status == 403) {
        alert( "forbidden" );
    }
});

or:

$.ajax({
    url: "update.php",
    type: "POST",
})
.statusCode({
    401: function() { alert( 'Unauthorized' ); },
    200: function() { alert( 'OK!'); }
});

Submit

Simple Example

Jquery Tips

1. Validate Plugin
2. Tmpl Plugin
3. API wrapAll: http://api.jquery.com/wrapall/

References:

Jquery Best Practice
jQuery Coding Standards & Best Practices