JavaScript 精华一页纸

JS 自身操作部分

1、数据类型 | 变量定义


动态语言,不需要指定参数的数据类型,也就是说可以任意赋值

数字 | 布尔 | 字符串 | 数组 | 对象

未定义的变量 undefined

undefined 和 null 的区别:undefined 值为 null,类型为 undefined,表明未定义;null值为null,类型为 object,表明为空。

字符串和Java类似;数字类型都是 64位,不区分具体类型。

类型转换

数字 - > 字符串

toString | String()

字符串 -> 数字

parseInt/parseFloat -- 和Java 略有区别的是,如果数字和字母混合,则会截取一段转换

进制转换

toString(2/8/16) - 精度

类型检测- typeOf 类似 instanceof

如果判断一个对象是什么类型 一般 可以使用 constructor 属性来判断

eval -- 计算并执行 string 里面的语句;尽量避免使用,防止恶意代码;

escape -- 对特殊字符进行编码

2、对象


三种定义方式,最常用的还是{}方式

var obj = {id:1,name:"aa",fun:function(){}};

可以动态的给对象增加新的属性和函数;如果需要给已经存在的对象增加函数(比如系统类库添加方法)

-- 任何类都有prototype属性,所以添加类方法,只需要给 prototype 增加方法即可

补充阅读:原型链

对象 this - 在不同位置,代表不同意思,一般是指调用 该函数时的对象

函数对象

和Java一样值传递,可以修改 外部的对象参数值

函数并不检查隐式参数的任何情况,可以使用 arguments 实现很多功能;调用时,如果参数个数少于函数定义,则其他的都是undefined

function定义对象

Function(para1,para2){

this.para1 = para1;

this.func = function(){

}

}

function myFunction(a,b){ }

call vs apply - 有点像java的反射调用

myFunction.call(obj,a,b); -- 这里 函数也当成了一个对象,通过对象来调用函数,如果是对象的方法,传入对象,如果是全局,可以传入null

myFunction.apply(obj,[a,b]);

数字对象

isNaN - 是否数字 | toFixed() 精度

String对象

indexOf()/charAt/toLowerCase/toUpperCase/length

日期对象类似于 Java.util.Date

new Date(参数可选 日期|毫秒|年月日等等)

setFullYear / setDate

数组对象

concat 合并两个 | filter 过滤 | join 把数组转换成字符串 | [last]indexOf 索引 | map 处理数组的每个元素返回新数组 | push/pop 向尾部增加或者取出 | reverse 反转| shift 返回第一个并删除 | slice 选取一部分数组 | some 是否有符合条件的数据 | sort 排序 | splice 添加 | unshift 向数组头部插入元素 | valueOf 返回数组对象值

-- 这些函数的提供,非常符合函数化特征,在 scala里面也大量使用了类似的功能。

正则表达式

new RegExp | /表达式/gim

提供 test exec(返回匹配的字符串) 来进行匹配判断;另外,字符串替换,match 都采用了正则表达式对象

Math 对象

PI/round/floor/ceil/ranodm/min/max

对象与json的互转

json.parse

json.stringify

3、逻辑控制


判断 | 循环 和 java类似(for in 循环java 也支持

运算符 | 表达式 都和 java类似

补充阅读:for in 循环如果使用在数组中,而数组扩展了prototype原型方法,循环迭代时,有可能迭代到原型方法

4、异常处理


try{

}catch(err){

-- 因为没有类型定义,所以只有一个 catch

}

throw

5、提升 (变量和函数)


前面的代码 可以使用后面声明的变量|函数;不建议使用,违反正常阅读习惯

6、严格模式


7、自调用函数和闭包


(function(){

var para = aa;

return {

para:para,

func:function

}

})();

首先 是自调用,保证了代码的执行;其次通过闭包封装;并返回了一个对象,这样对模块进行了封装;实现了类似class的功能。

HTML DOM 操作

8、元素操作 - document


获取元素 getElementById/ getElementByTagName / getElementByClassName

父子|兄弟关系 firstChild/lastChild/nextSibling/parentNode /childNodes

属性 getAttribute/ attributes

可以直接指定属性操作 element.src = xxx

新增元素 createElement/ createTextNode/ createAttribute / appendChild / insertBefore

删除/更新元素 replaceChild / removeChild/ setAtrribute

元素属性 nodeName | nodeValue | nodeType

文本节点有 value没有name | 普通节点有name 没有value | 1元素|2属性|3文本|8注释|9文档

这里有一点和 XML 解析是类似的,就是每个元素节点之间都有 空白文本子节点,就是元素之间的空白?????

9、样式操作


element.style.xxx = value;

element.className =

10、事件


I、事件类型

a、文档加载相关(系统框架事件)

onload | onunload | onbort | onerror | onpageshow | onresize | onscroll

b、鼠标事件

onclick | ondbclick | onmouseover | onmouseout | onmousedown | onmouseup | onmouseenter| onmouseleave

c、键盘事件

onkeydown | onkeypress | onkeyup

d、表单事件

onchange | onfocus | onblur | onfocusin | onfocusout | oninput | onreset | onsearch | onselect | onsubmit

e、剪贴板 & 打印 & 拖动 & 动画 & 多媒体 & 过渡 & 其他等等

II、事件模型

a、DOM level 0 的属性绑定事件

b、DOM level 2的事件注册派发模型

addEventListener / attachEventListener / removeEventListener

window.addEventListener("resize", function(){

document.getElementById("demo").innerHTML = sometext;

}, 冒泡or捕获)

事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中,用户点击

元素, 哪个元素的 "click" 事件先被触发呢

在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:

元素的点击事件先触发,然后会触发

元素的点击事件。

在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:

元素的点击事件先触发 ,然后再触发

元素的点击事件

III、事件对象

属性

bubbles 是否冒泡类型 | currentTarget -- 触发事件的元素 | target -- 触发事件的元素 | type - 事件类型

方法

preventDefault -- 通知浏览器不执行动作(阻止事件冒泡) | stopPropagation -- 不再派发事件

如果是键盘/鼠标事件对象,还能获取 坐标、位置、键盘字母等等

clientX/Y

screenX/Y

target 和 currentTarget的区别?

如果只是 DOM level 0 很简单,监听对象很明确,就是 绑定属性的这个元素。两者相同

但如果 使用 addEventListener 时,就会存在 父子容器的情况,如果是 子容器的点击事件;父容器在监听 - 冒泡;或者反过来,捕获,父容器事件,子容器在点击

target 对应 真实点击事件的 元素对象

currentTarget 对应 监听事件的 元素对象

javascript:void(0) 代表的是什么意思呢?

void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。一般可以用在链接转菜单|导航时,点击不跳转只有其他效果

href="#" 与 href="javascript:void(0)"的区别

# 包含了一个位置信息,默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

浏览器相关

11、window 对象


window对象 是默认的,所有对象和方法都在 window对象中

Window 对象拥有的属性

screen 屏幕对象 | location 访问的url | history 浏览历史 | navigator 浏览器 | document 文档对象

方法

setTimout / setInterval / clearTimeout / clearInterval / setScroll / ...

事件

onlaod or ready

一般 把函数引用 和 HTML的联结 都放在 window.onload 事件中,否则操作的dom 元素可能还未存在

都是加载完毕。ready 只包括html文档,但图片等可能还未加载完;onload是所有的都加载完

12、弹出框


alert | confirm | prompt

13、cookie


document.cookie

不同浏览器不能共享 cookie; 判断浏览器是否支持 cookie -- navigator.cookieEnable

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,204评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,091评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,548评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,657评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,689评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,554评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,302评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,216评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,661评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,851评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,977评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,697评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,306评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,898评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,019评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,138评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,927评论 2 355

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,631评论 18 399
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock阅读 3,372评论 2 36
  • 为纪念美国现代舞舞蹈家玛莎·葛兰姆诞辰,Google Doodle推出了一款极其炫酷的LOGO,整个LOGO使用C...
    bestvist阅读 971评论 0 0
  • 1.float box-sizing:border-box; 为元素设定的宽度和高度决定了元素的边框盒。就是说,为...
    Marks阅读 201评论 0 0