2020/06/18 review HTML5/ JQuery

最近因为工作需求所以要使用到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

//回传第一个符合条件的元素，如果找不到就会回传nullelement = 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事件

loadunloadfocusblurJS -->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
有点懒得记