《JavaScript面向对象编程指南（第2版）》读书笔记（二）

目录


一、基本类型
	1.1 字符串
	1.2 对象
	1.3 原型
	1.4 常用数学方法
二、DOM操作
	2.1 节点编号、名称以及值
	2.2 父节点、子节点和相邻节点
	2.3 添加和删除节点
	2.4 属性相关
	2.5 DOM合集
	2.6 DOM遍历
三、其他
	3.1 事件
	3.2 浏览器检测
	3.3 三种弹窗方式
	3.4 根据浏览器历史控制前进后退
	3.5 重载页面的六种方式
	3.6 修改当前页面URL但是不刷新页面
	3.7 URI编码
	3.8 窗口相关

一、基本类型

1.1 字符串

判断是否包含某个字符串

indexOf方法中，找到相关字符串会返回第一次出现的下标。没有找到就会返回-1，利用这个特性可以判断字符串是否存在。


console.log('Fine'.indexOf('in') !== -1)  // true

把字符串按照一定规则分离成数组

下面是以空格为分割标志。


console.log('I seek you'.split(' '))  // ["I", "seek", "you"]

复制指定位置的字符串

传入的两个参数分别是开始的位置和结束的标记。看清楚，第二个参数本身的小标所表示的内容不会被复制，第二个参数是用来标记，这里是结束位置。


console.log('I seek you'.slice(2,6))  // seek
console.log('I seek you'.substring(2,6))  // seek

拼接字符串


console.log('I seek you'.concat(' too.'))  // I seek you too.

查看字符串中的字符


console.log('I seek you'[0])  // I
console.log('I seek you'.charAt(0))  // I

1.2 对象

判断属性是自己的还是继承来的

使用in不能判断属性是自己的还是继承来的，使用hasOwnProperty可以。


var xiaoming = {
  name: 'xiaoming'
}
使用in不能判断属性是自己的还是继承来的
---------------------------------
'name' in xiaoming  // true
'toString' in xiaoming  // true
---------------------------------
xiaoming.hasOwnProperty('name')  // true
xiaoming.hasOwnProperty('toString')  // false

判断对象是否可枚举


xiaoming.propertyIsEnumerable()  // false

判断对象是另一个对象的原型


var People = function (name) {
	this.name = name
}
var xiaoming = new People('xiaoming')


Human.prototype = monkey
monkey.isPrototypeOf(man)

1.3 原型

  • __proto__是实例对象的属性
  • prototype是构造函数的属性
  • constructor指向构造函数

IE中不存在__proto__，推荐使用ES5的Object.getPropertyOf()访问。


typeof [].__proto__  // "object"
Object.getPrototypeOf([])  // [constructor: function, toString: function, toLocaleString: function, join: function, pop: function…]
[].constructor.prototype

原型继承


var People = function (name,age) {
  this.name = name
  this.age = age
}
xiaoming = People.prototype
xiaoming.constructor = xiaoming

1.4 常用数学方法


Math.PI  // 3.141592653589793
Math.SQRT2  // 1.4142135623730951
Math.sqrt(2)  // 1.4142135623730951
Math.E  // 2.718281828459045
Math.pow(2,3)  // 8
Math.random() * (10-2)+2  // 7.564475903879611 | 2-8之间的平均数
Math.LN2  // 0.6931471805599453
Math.floor(2.6)  // 2 | 指定值的最小整数
Math.ceil(2.6)  // 3 | 指定值最大整数
Math.round(2.6)  // 3 | 去最靠近指定值的整数
Math.max()  // 3
Math.min()  // 2
Math.sin(90)  // 0.8939966636005579
Math.cos(90)  // -0.4480736161291702

二、DOM操作

2.1 节点编号、名称以及值

nodeType有12种，具体请见MDN


<div class="you">HELLO YOU</div>

var you = document.getElementsByClassName('you')[0]
you.nodeType  // 1
you.nodeName  // BIV
you.nodeValue  // null
you.textContent  // HELLO YOU
you.innerText  // "HELLO YOU"

2.2 父节点、子节点和相邻节点

检查是否具有某个子节点


document.documentElement.hasChildNodes('body')  // true

查看所有子节点


document.documentElement.childNodes  // [head, text, body]

查看第一个子节点


document.documentElement.firstChild  // <head>...</head>

访问父节点


document.documentElement.childNodes[0].parentNode

访问相邻节点


document.documentElement.children[0].previousSibling  // null
document.documentElement.children[0].nextSibling  // #text

2.3 添加和删除节点


<div class="you">HELLO YOU</div>

var you = document.getElementsByClassName('you')[0]

新建节点


var pTag = document.createElement('p')
var pVal = document.createTextNode('HELLO YOU')
pTag.appendChild(pVal)  // <p>HELLO YOU</p>

添加节点


document.body.insertBefore(pTag,you)
document.body.replaceChild(you,pTag)

删除节点


document.body.removeChild(you)

克隆节点

true为深拷贝，会拷贝节点的内容。flase只拷贝空标签。


var newNodeFalse = document.body.cloneNode(true)
var newNodeFalse = document.body.cloneNode(false)
console.log(newNodeFalse)  // <body>...</body>
console.log(newNodeFalse)  // <body></body>

2.4 属性相关


<div class="you">HELLO YOU</div>

var you = document.getElementsByClassName('you')[0]

检查是否具有某个属性


you.hasAttributes('class')  // true

获取具体属性


you.getAttribute('class')  // "you"
you.attributes[0].nodeValue  // "you"
you.attributes['class'].nodeValue  // "you"

选择器

querySelector使用的是CSS选择器，返回单个节点。返回所有匹配的结果用querySelectorAll。


document.querySelector('.you')
document.querySelectorAll('.you')  // [div.you]

批量添加样式


you.style.cssText = "color:red;font-size:200px;"

2.5 DOM合集


document.images
document.applets
document.links
document.anchors
document.forms
document.cookie
document.title
document.referrer
document.domain

2.6 DOM遍历


function walkDOM(n){
  do {
    console.log(n)
    if(n.hasChildNodes()){
      walkDOM(n.firstChild)
    }
  }
  while (n=n.nextSibling)
}
walkDOM(document.body)

三、其他

3.1 事件

阻止冒泡


event.stopPropagation()
window.event.cancelBubble = true  //IE

阻止默认事件


event.preventDefault()
return false  // IE

拖动事件

MDN在线示例

触屏事件

这里有一个用canva实现的画图页面，触屏画图，实现过程可以直接看源码。。另外触屏事件的分析，请见伯乐在线。


touchstart
touchmove
touchend
touchleave
touchcancel

3.2 浏览器检测

用户代理可以被模拟，所以根据浏览器的不同特征来检测当前浏览器类型更加可靠。


if(window.addEventlistener) {
	// code...
}
else if(){
	// code...
}

3.3 三种弹窗方式

三种弹窗分别是提示框（alert），确认框（confirm）和交互框（prompt）。可以把确认和交互赋值给变量，变量会存储相应结果。


alert('Welcome To JS!')
var isLike = confirm('Do you like JS?')
var whyLike = prompt('Why do you like it.')
console.log(isLike)  // true
console.log(whyLike)  // Maybe...

3.4 根据浏览器历史控制前进后退

根据缓存的浏览器历史，可以控制前进、后退和跳转到指定历史记录。


window.history.forward()  // 前进
window.history.back()  // 后退
window.history.go(1)  // 跳转

3.5 重载页面的六种方式


location.reload()
location.assign('/')
location.replace('/')
window.location.href = '/'
location = location
window.location.reload()

3.6 修改当前页面URL但是不刷新页面


history.pushState({a:1},'','hello')

3.7 URI编码


function decodeURI(url,params){
  var url = url || 'http://www.cnblogs.com/bergwhite/'
  var params = params || {name: 'berg', age: 22}
  var query = []
  for (param in params) {
    query.push(param+'='+params[param])
  }
  return url+=query.join('&')
}
decodeURI() // "http://www.cnblogs.com/bergwhite/name=berg&age=22"
decodeURI('http://www.you.com/',{a:1,b:2})  //  "http://www.you.com/a=1&b=2"

3.8 窗口相关

新窗口打开内容


window.open('http://www.baidu.com','zzzzzzzzzzzz','width=800px,height=300px,resizable=yes')

判断是否是高分辨率屏幕


window.devicePixelRatio  // 1

感谢您的阅读。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/bergwhite/p/6810237.html