《JavaScript面向对象编程指南(第2版)》读书笔记(二)
- 《JavaScript面向对象编程指南(第2版)》读书笔记(一)
- 《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
拖动事件
触屏事件
这里有一个用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
感谢您的阅读。
《JavaScript面向对象编程指南(第2版)》读书笔记(二)的更多相关文章
- 《CSS世界》笔记二:盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...
- CSS揭秘读书笔记 (一)
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- 《你必须知道的.NET》读书笔记二:小OO有大原则
此篇已收录至<你必须知道的.Net>读书笔记目录贴,点击访问该目录可以获取更多内容. 一.单一职责原则 (1)核心思想:一个类最好只做一件事,只有一个引起它变化的原因 (2)常用模式:Fa ...
- spring揭秘 读书笔记 二 BeanFactory的对象注册与依赖绑定
本文是王福强所著<<spring揭秘>>一书的读书笔记 我们前面就说过,Spring的IoC容器时一个IoC Service Provider,而且IoC Service Pr ...
- ES6读书笔记(二)
前言 前段时间整理了ES6的读书笔记:<ES6读书笔记(一)>,现在为第二篇,本篇内容包括: 一.数组扩展 二.对象扩展 三.函数扩展 四.Set和Map数据结构 五.Reflect 本文 ...
- 《精通CSS》读书笔记(一)
最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...
- spring揭秘 读书笔记 二 BeanFactory的对象注冊与依赖绑定
本文是王福强所著<<spring揭秘>>一书的读书笔记 我们前面就说过,Spring的IoC容器时一个IoC Service Provider,并且IoC Service Pr ...
- 【记】《.net之美》之读书笔记(二) C#中的泛型
前言 上一篇读书笔记,很多小伙伴说这本书很不错,所以趁着国庆假期,继续我的读书之旅,来跟随书中作者一起温习并掌握第二章的内容吧. 一.理解泛型 1.为什么要使用泛型?-----通过使用泛型,可以极大地 ...
- Mastering Web Application Development with AngularJS 读书笔记(二)
第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...
- how tomcat works 读书笔记(二)----------一个简单的servlet容器
app1 (建议读者在看本章之前,先看how tomcat works 读书笔记(一)----------一个简单的web服务器 http://blog.csdn.net/dlf123321/arti ...
随机推荐
- JavaEE开发基于Eclipse的环境搭建以及Maven Web App的创建
本篇博客就完整的来聊一下如何在Eclipse中创建的Maven Project.本篇博客是JavaEE开发的开篇,也是基础.本篇博客的内容干货还是比较多的,而且比较实用,并且都是采用目前最新版本的工具 ...
- js鼠标滑轮侧边广告(仅IE可用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- PyQt通过resize改变窗体大小时ListWidget显示异常
前几天开始的pygame音乐播放器Doco,做的差不多了,上午做到了歌词显示和搜索页面.遇到bug,即通过resize改变ui大小时ListWidget显示异常 #目的: 增加一部分窗口用来显示歌词和 ...
- Luogu2723丑数Humble Numbers【归并排序】
Luogu2723丑数Humble Numbers 题目背景 对于一给定的素数集合 S = {p1, p2, ..., pK},考虑一个正整数集合,该集合中任一元素的质因数全部属于S.这个正整数集合包 ...
- SystemClock官方简介
public final class SystemClock extends Object java.lang.Object ↳ android.os.SystemClock Class Ove ...
- iOS 从url中获取文件名以及后缀
//这里有一个模拟器沙盒路径(完整路径) NSString* index=@"/Users/junzoo/Library/Application Support/iPhone Simulat ...
- sublime前端开发工具常用技巧
ctrl+N//新建文件夹ctrl+shift+p//打开命令行!,ctrl+E//快速生成html模板ctrl+E//自动补齐ctrl+P(#@)//goto 任何地方,其中#查找元素,@查找样式c ...
- 《Python自然语言处理》第一章-练习17
问题描述: 使用text9.index()查找词sunset的索引值.你需要将这个词作为一个参数插入到圆括号之间.通过尝试和出错的过程中,找到完整的句子中包含这个词的切片. 解题思路: 用两个集合,一 ...
- js中计算两个日期之差
js中计算两个日期之差 var aBgnDate, aEndDate; var oBgnDate, oEndDate; var nYl ...