最近因為工作需求所以要使用到HTML5的所有東西
雖然每一個東西都大概有碰過，但真的沒再用就會忘記(淚流
想說要統整一下讓自己比較好參照，但是Evernote不支援Markdown
語法寫起來都像天書

Javascript筆記

Node物件
Document物件
Element物件
https://developer.mozilla.org/zh-TW/docs/Web/API/HTMLElement

-建立元素

在JS中用document來新增
example

var element = document.createElement(tagName[, options]);
var fragment = document.createDocumentFragment();

JQuery
JQ的新增有點複雜
建立一個新的element可以用$('<tag></tag>')
如果新增的物件本來就存在，會變成剪下貼上的概念
.append() 插入子階層
.prepend() 插入父階層
.after()插入下一個同階層.before()` 插入上一個同階層
example
example

var $btn = $('#btn');

/* document.write($btn.val()); */

$btn.click(function(){
 //document.write(this.value);
 var li = '<li>one</li>'; //HTML
 var li1 = document.createElement('li'); //DOM
 li1.textContent = 'two';
 var $li2 = $("<li></li>").text("three"); //Jquery

 $("#ul").append(li, li1, $('ul li'), $li2);  
 
});

-取得元素
取得元素的方法分為一次取得一個跟一次取得多個，回傳的結果就分別為Element跟NodeList

NodeList 物件是節點的集合
NodeList物件
但不知道為什麼實作getElementsByClassName()，會回傳一個HTMLCollection物件
HTMLCollection

//回傳第一個符合條件的元素，如果找不到就會回傳null
element = document.querySelector(selectors);
element = ducument.getElementById(id);

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
getElementsByClassName()
getElementsByName()
getElementsByTagName()
elementList = parentNode.querySelectorAll(selectors);

jQuery 物件 ($) 會將匹配到的元素以 陣列 (array) 型態返回一個 jQuery 物件，也就是說你可以像下面這樣取得被匹配到元素的個數：

// 我們想知道選取到幾個 <a>?
$('a').length; // 直接用 JavaScript array 的 length 屬性取得
$('a').size(); // 或用 jQuery object 的 size 方法

jQuery 物件 ($) 會將匹配到的元素以 陣列 (array) 型態返回一個 jQuery 物件，也就是說你可以像下面這樣取得被匹配到元素的個數：

// 我們想知道選取到幾個 <a>?
$('a').length; // 直接用 JavaScript array 的 length 屬性取得
$('a').size(); // 或用 jQuery object 的 size 方法

JavaScript DOM 物件 --> jQuery 物件
反過來，如果你想將 DOM 轉為 jQuery 物件，只要將 DOM 傳入 $():

$(domElements);
例如：

var $jqueryObject = $(document.getElementById('id'));

比較一下

-屬性/ 樣式(CSS)

完全不想記JS的屬性跟樣式，希望我一輩子都可以不要再碰到
像是什麼class硬要打className
(然後還是看到就想說還是記一下好了= =

Element物件屬於HTMLElement型別，代表一個元素

Element.value
Element.length
Element.type
Element.className
Element.id
Element.innerHTML -->元素不含自己本身的標籤加內容
Element.outerHTML -->元素含自己本身的標籤加內容
Element.textContent -->元素不含自己本身的內容
Element.tagName --> read only

修改CSS
HTMLElement.style.display

如果可以就把所有抓到的元素都變成JQ物件就好
Jquery方法大全
所有跟HTML屬性有關的
The .attr() method
所有跟css屬性有關的
The .css() method
value
The .val() method
text
The .text() method
class類
.addClass(className)/ .removeClass(className)

範例爆醜笑爛

-Jquery .Clone()
複製節點，如果用.extend()是針對JavaScript的物件上進行複製，JavaScript物件複製後，仍然指向相同的HTML物件。而針對畫面上Element的複製則必須使用.clone()。

範例，直接複製整個select選單

       var target = $(".ownselect")[0];
       $('#MainContent_sPa644_DropDownList2_C option')
         .clone()
         .appendTo(target);
       var target1 = $(".ownselect")[1];
       $('#MainContent_sPa644_DropDownList3_C option')
         .clone()
         .appendTo(target1);
       var target2 = $(".ownselect")[2];
       $('#MainContent_sPa644_DropDownList4_C option')
         .clone()
         .appendTo(target2);

-Jquery .appendto()
跟.append()相反，把某一個物件加到引數的物件中

-HTML

JS .innerHTML()
返回所有元素內的HTML內容

JQ .html()

範例，把table的所有內容都抓出來

var HTML = document.getElementById('uppertable');
document.write(HTML.innerHTML)
document.write($(HTML).html());

-找其他親屬

Node.childNodes
Node.childNodes 回傳的可能會有這幾種：

• HTML 元素節點 (element nodes)
• 文字節點 (text nodes)，包含空白
• 註解節點 (comment nodes)
  Node.hasChildNodes() 可以判斷有沒有小孩(子節點)

Node.firstChild
子節點包含空白!!

Node.lastChild
Node.parentNode
Node.previousSibling
Node.nextSibling

-Event

window事件

• load
• unload
• focus
• blur

• JS -->addEventListener(Event, EventHandler, true/false(捕獲或冒泡))

為了解決IE舊版跟一般瀏覽器的不一樣，要找出目標物件要用這個方法
function getEventTarget(e)
       {
         e = e || window.event;
         return e.target || e.srcElement;
       }

物件處理器中可以包含事件的物件，正常會是e，包含事件的名稱/ 元素等等

object.addEventListener(event, function(e){
    let target = getEventTarget(e); -->取得觸發事件的元素
    //this -->觸發事件的目標 = event.currentTarget

})

event.preventDefault() 取消預設行為
event.stopPropagation() 取消事件冒泡

• JQ
  有點懶得記