Archive七月 2018

ES6: 字符串处理

UTF-16编码:

  • str.codePointAt(index)
  • String.fromCodePoint(codepoint);
  • normalize()

正则表达式

  • 新增u修饰符用来处理UTF-16编码的问题  /&.$/u
  • 新增pattern.flags 属性 // ‘ig’
  • 新增pattern.sticky 属性及’y’修饰符 // 只从lastIndex处匹配,如果和’g’一起存在则’g’被忽略
  • 复制正则表达式  // let pattern = new RegEX(old_pattern, ‘gi’)

字符串处理

  • str.includes(sub_string) // true or false
  • str.startsWith(sub_string)  // true or false
  • str.endsWith(sub_string) // true or false
  • str.repeat(times);  // str * times
  • 模板字面量
    • 支持多行字符串
    • 支持变量  // `hello ${name}`

ES6: 块级作用域

var

  • 没有块级作用域的概念
  • 会被提升到定义函数的顶部
  • 可以重复声明

let

  • 有块级作用域
  • 不会被提升
  • 禁止重复声明

const

  • 有块级作用域
  • 不会被提升
  • 禁止重复声明
  • 其值不可更改
  • 必须进行初始化

Javascript中的表单

var form = document.getElementById(‘myform’);

  • form.acceptCharset 服务器能处理的字符集
  • form.action 接受请求的URL
  • form.elements 表单中的所有控件
  • form.enctype 编码类型
  • form.length 控件数量
  • form.method HTTP请求类型
  • form.name   // document.forms[form.name]
  • form.reset()
  • form.submit()
  • form.target

var text = form.elements[‘sex’];

  • text.disabled
  • text.form
  • text.name
  • text.value
  • text.readOnly
  • text.tabIndex
  • text.type
  • text.select()
  • text.setSelectionRange(start, end)
  • text.value.substring(text.selectionStart, text.selectionEnd)

text的事件:

  • change
  • focus
  • blur

剪贴板

var clipboard = window.clipboardData ; //event.clipboardData;

  • clipboard.getData()
  • clipboard.setData()
  • clipboard.clearData()

剪贴板事件

  • beforecopy
  • copy
  • beforecut
  • cut
  • beforepaste
  • paste

 

Javascript中的事件

事件捕获(capturing)和事件冒泡(bubbling)

添加事件处理程序的两种方法

  • <div onclick=”alert(‘ddd’)”></div>  // onclick=null
  • elem.addEventListener(“click”, e_func, false); //elem.removeEventListener(‘click’, e_func, false); //false 表明在冒泡阶段被触发

事件对象

  • e.bubbles // true or false 是否冒泡
  • e.cancelable // true of false 是否可取消默认行为
  • e.currentTarget // 正在处理事件的元素,事件处理程序中的this指向该元素
  • e.target // 事件发生的目标元素
  • e.defaultPrevented // true or false 默认行为是否被取消
  • e.detail
  • e.eventPhase // 1 捕获阶段 2 处于目标 3冒泡阶段
  • e.preventDefault()
  • e.stopImmediatePropagation() //阻止事件冒泡和所有事件处理程序
  • e.stopPropagation() //阻止事件冒泡
  • e.trusted // true 表示事件由浏览器生成,false表示有javascript触发
  • e.type
  • e.view
  • e.clientX e.clientY 事件发生时鼠标的视图位置
  • e.pageX e.pageY 事件发生时鼠标的页面位置
  • e.screenX e.screenY 事件发生时鼠标的屏幕位置
  • e.ctrlKey e.shiftKey e.altKey e.metaKey 事件发生时修饰键是否被按下
  • e.button // 0 主键 1 滚轮键 2右键 被按下
  • e.wheelDelta
  • e.charCode
  • e.keyCode
  • e.data //textinput 事件时输入的字符
  • e.iputMethod //0-9 输入来源,如键盘、粘贴、拖放等

事件类型

  • UI事件
    • load  (window, img)
    • unload
    • resize (window)
    • scroll (window)
  • 焦点事件
    • blur 失去焦点事触发,不会冒泡
    • focusin
    • focusout
    • focus 不会冒泡
  • 鼠标与滚轮事件
    • click
    • dbclick
    • mousedown 任何鼠标按键被按下时触发
    • mouseup
    • mouseenter 不冒泡
    • mouseover 冒泡
    • mousemove
    • mouseleave 不冒泡
    • mouseout 冒泡
    • mousewheel
    • contextmenu 鼠标右键弹出菜单
  • 键盘事件
    • keydown
    • keypress
    • keyup
    • textinput
  • DOM变动事件
    • DOMSubtreeModified
    • DOMNodeInserted
    • DOMNodeRemoved
    • DOMNodeInsertedIntoDocument
    • DOMNodeRemovedFromDocument
    • DOMAttrModified
    • DOMCharacterDataModified

事件委托和移除

为提升性能,利用事件冒泡来减少事件处理程序;在DOM元素被innerHTML移除后,需要手动的移除事件处理程序

事件模拟

  • var e = document.createEvent(‘MouseEvents’);
  • e.initMouseEvent(….);
  • elem.dispatchEvent(e);

DOM中的选择符API及元素遍历

选择符API

  • document.querySelector(css_selector)
    var checked_radio = document.querySelector(‘.checked’);
  • var node_list = document.querySelector(css_selector);
  • elem.matchesSelector(css_selector) // true or false

HTML 5中的类名操作

classList是DOMTokenList的实例,因而具有以下方法:

  • elem.classList.add(value); 如果已经有了就不添加了
  • elem.classList.contain(value) //true or false
  • elem.classList.remove(value)
  • elem.classList.toggle(value); 如果有就删除,如果没有就添加

 元素遍历

Element新增5个属性:

  • childElementCount: 子元素的个数(不包括Text和Comment类型)
  • firstElementChild
  • lastElementChild
  • previousElementSibling
  • nextElementSibling

Javascript中的DOM节点类型

Node类型

  • node.nodeType:
    • Node.ELEMENT_NODE(1);
    • Node.ATTRIBUTE_NODE(2);
    • Node.TEXT_NODE(3);
    • Node.CDATA_SECTION_NODE(4);
    • Node.ENTITY_PREFERENCE_NODE(5);
    • Node.ENTITY_NODE(6);
    • Node.PROCESSING_INSTRUCTION_NODE(7);
    • Node.COMMENT_NODE(8);
    • Node.DOCUMENT_NODE(9);
    • Node.DOCUMENT_TYPE_NODE(10);
    • Node.DOCUMENT_FRAGMENT_NODE(11);
    • Node.NOTATION_NODE(12);
  • node.nodeName: 标签名
  • node.childNodes[0]  node.childNodes.item(0);
  • node.childNodes.length;
  • node.parentNode;
  • node.nextSibling;
  • node.previousSibling;
  • node.firstChild;
  • node.lastChild;
  • node.appendChild(newNode);
  • node.insertBefore(newNode);
  • node.replaceChild(newNode, oldNode);
  • node.removeChild(node);
  • node.cloneNode(true//深复制)

HTMLDocument类型

  • document.nodeType = 9
  • document.nodeName = “#document”
  • document.nodeValue = null
  • document.parentNode = null
  • document.ownerDocument = null
  • document.firstChild === document.childNodes[0] === document.documentElement 都指向<html>元素
  • document.body指向<body>元素
  • document.head
  • document.charset
  • document.URL;
  • document.title;
  • document.domain;
  • document.getElementById();
  • document.getElementByClassName();
  • document.getElementsByTagName();
  • document.getElementsByName();
  • document.images;
  • document.anchors;
  • document.links;
  • document.forms;
  • document.createElement(‘div’)
  • document.activeElement: 指向获得焦点的元素
  • document.readyState // loading or complete

Element类型

var elem = document.getElementById(‘elem_id’);

  • elem.nodeType = 1
  • elem.nodeName 为元素的标签名
  • elem.nodeValue = null
  • elem.parentNode 为document或者Element
  • elem.nodeName === elem.tagName
  • elem.getAttribute(“id”)
  • elem.setAttribute(“id”, “new_id”)
  • elem.attributes.getNamedItem(‘id’)
  • elem.attributes.removeNamedItem(‘id’)
  • elem.attributes.setNamedItem(new_attr)
  • elem.getElementsByTagName()
  • elem.dataset // data- 前缀自定义的属性及属性值
  • elem.innerHTML // 元素的内容(所有子节点HTML)
  • elem.scrollIntoView() //将元素滚动至可见视图中
  • elem.style.width
  • elem.style

Text类型

<div>hello world</dev>

var text_node = div.firstChild;

var text_node = document.createTextNode(text);

  • text_node.nodeValue = text_node.data = ‘hello world’
  • text_node.appendData(‘string’);
  • text_node.deleteData(offset, count);
  • text_node.insertData(offset, text);
  • text_node.replaceData(offset, count, new_text);
  • text_node.splitText(offset);
  • text_node.substringData(offset);
  • text_node.length = text_node.data.length = text_node.nodeValue.length;
  • text_node.parentNode.normalize() // 将两个子文本节点合并

Comment类型

<div id=’mydiv’><!– comment –></div>

var mydiv = document.getElementById(‘mydiv’);

var comment = mydiv.firstChild;

var comment = document.createComment(‘comment’);

  • comment类型和Text类型继承自同一个基类,拥有除splitText之外Text的所有属性和方法

Attr类型

elem.attributes中的节点

var attr = document.createAttribute(attr_name);

  • attr.nodeType = 11
  • attr.nodeName 属性名
  • attr.nodeValue 属性值
  • attr.parentNode = null
  • elem.setAttributeNode(attr);