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捕获)
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件

III、事件对象
属性
bubbles 是否冒泡类型 | currentTarget -- 触发事件的元素 | target -- 触发事件的元素 | type - 事件类型

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

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

target 和 currentTarget的区别?
如果只是 DOM level 0 很简单,监听对象很明确,就是 绑定属性的这个元素。两者相同
但如果 使用 addEventListener 时,就会存在 父子容器的情况,如果是 子容器的点击事件;父容器在监听 - 冒泡;或者反过来,捕获,父容器事件,子容器在点击
target 对应 真实点击事件的 元素对象
currentTarget 对应 监听事件的 元素对象

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

<a href="javascript:void(0)">单击此处什么也不会发生</a>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>

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

原文博客  http://www.likeway.net/?p=20

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值