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
网友评论