《JavaScript面向对象编程指南(第2版)》读书笔记(二)
2017-05-04 22:23
357 查看
《JavaScript面向对象编程指南(第2版)》读书笔记(一)
《JavaScript面向对象编程指南(第2版)》读书笔记(二)
indexOf方法中,找到相关字符串会返回第一次出现的下标。没有找到就会返回-1,利用这个特性可以判断字符串是否存在。
把字符串按照一定规则分离成数组
下面是以空格为分割标志。
复制指定位置的字符串
传入的两个参数分别是开始的位置和结束的标记。看清楚,第二个参数本身的小标所表示的内容不会被复制,第二个参数是用来标记,这里是结束位置。
拼接字符串
查看字符串中的字符
使用in不能判断属性是自己的还是继承来的,使用hasOwnProperty可以。
判断对象是否可枚举
判断对象是另一个对象的原型
prototype是构造函数的属性
constructor指向构造函数
IE中不存在__proto__,推荐使用ES5的Object.getPropertyOf()访问。
原型继承
查看所有子节点
查看第一个子节点
访问父节点
访问相邻节点
新建节点
添加节点
删除节点
克隆节点
true为深拷贝,会拷贝节点的内容。flase只拷贝空标签。
检查是否具有某个属性
获取具体属性
选择器
querySelector使用的是CSS选择器,返回单个节点。返回所有匹配的结果用querySelectorAll。
批量添加样式
阻止默认事件
拖动事件
MDN在线示例
触屏事件
这里有一个用canva实现的画图页面,触屏画图,实现过程可以直接看源码。。另外触屏事件的分析,请见伯乐在线。
判断是否是高分辨率屏幕
感谢您的阅读。
《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
感谢您的阅读。
相关文章推荐
- 《Python核心编程(第2版)》读书笔记(4)之浅拷贝、深拷贝(关键词:Python/浅拷贝/深拷贝)
- 《计算机科学导论(第2版)》读书笔记(0)目录(关键词:计算机科学)
- 《CSS Web设计高级教程(第2版)》读书笔记(前两章)
- 《计算机科学导论(第2版)》读书笔记(1)第一章绪论(关键词:计算机科学)
- 《Python核心编程(第2版)》读书笔记(1)之__init__(关键词:Python/面向对象/__init__)
- 《计算机科学导论(第2版)》读书笔记(2)第2章数字系统(关键词:计算机科学/数字系统)
- 《JUnit实战(第2版)》读书笔记
- 《Python核心编程(第2版)》读书笔记(2)之赋值(关键词:Python/赋值/引用/传递)
- 《Python核心编程(第2版)》读书笔记(6)之用列表模拟堆栈(关键词:Python/列表/堆栈/stack.py)
- 《Python核心编程(第2版)》读书笔记(7)之把列表用作队列(关键词:Python/列表/队列/queue.py)
- 《Python核心编程(第2版)》读书笔记(8)之析构(关键词:Python/析构/析构函数)
- 《Python核心编程(第2版)》读书笔记(3)之下划线标识符(关键词:Python/变量名/下划线/私有变量)
- 《JavaScript面向对象编程指南(第2版)》读书笔记(一)
- 《ES6 标准入门(第3版)》读书笔记(随时更新)
- JavaScript面向对象编程指南(第2版)》读书笔记
- 《JavaScript高级程序设计(第3版)》读书笔记(一)
- perl简洁编程,《Perl语言入门(第五版)》读书笔记
- 《JavaScript高级程序设计(第三版)》读书笔记
- 《数据结构教程(第四版)》读书笔记-第一章 绪论
- 《C++ primer(第四版)》读书笔记8-第9章 顺序容器