一、弱类型意识
js变量是没有类型的
var a = 1; //a 就是一个变量 不要提什么类型
变量可以赋任何类型的值 类型仅仅是值的性质 与变量无关
Js的基本类型
变量未赋值时,其值为undefined
只有一个number类型表示数字 不区分整数还是小数
二、动态语言
动态语言针对的不是变量 而是值 尤其是对象
Var obj={name:”changwei”,age:3}; //对象字面量
= 后面的值是什么类型?
别提什么弱类型,因为弱类型是针对变量的
此处问的是值是什么类型!
Js是动态语言, 可以随意创建对象
而不需要有与之对应的类
Js中没有class(ES6中新加了class 但它实际上与Java中的class不一样)
动态语言不仅可以随意创建对象 而且可以随意向对象中
还可以从对象中删除属性及方法、添加属性、方法等成员
这个特性对Java来说是不可想象的
三、函数式编程
函数(方法)可以作为参数传递给另一个函数 [函数也是值]
函数实际上也是一个普通变量
普通变量也可以附一个函数作为值
函数实际上是一个对象,这个对象中包含了它的源代码
函数名 以及调用这个源代码的方法
function add(a,b){
return a+b;
}
add 是变量吗? 是
函数是个对象吗? 是 函数是一个特殊的对象
原型
原型存在的原因是因为js中没有class 无法共享方法及静态成员
原型是一个容器(对象) 可以存放被大量对象共享的方法及属性
Js定义了一条寻找属性/方法规则:
先在对象本身上找 找到就是用 找不到就去原型中找
原型找不到 就去原型的原型中找
..............
直到穷尽所有原型为止(原型链);
DOM
Document Object Model 文档对象模型
使劲就是给网页上的标签建立的,模型
每一个都用一个对像来表示
每一类标签都是一个类
给网页上标签建模的目的是为了让js能够
以编程的方式控制 生成网页
DOM 是控制网页的api
第一类api :获取标签对象
document.getElementById(“id”)
document.getElementsByTagName(“tagName”)
document.getElementsByName(“name”)
document.getElementsByClassName(“className”)
H5时代新增的2个方法
document.querySelector(css筛选器) 返回一个标签
document.querySelectorAll(CSS筛选器) 返回要找到所有标签
第二类API: 操作标签的属性
tag.属性名=值
var value = tag .属性名
tag.setAttribute(属性名,值)
var value = tag.getAttribute(属性名)
第三类: 控制标签的样式
tag.style.color=”red”;
tag.style.fontSize=’12px’
Tag.style.font-size ((不可用))
tag.style[‘font-size’]=’12px’
样式类
Tag.className=”样式类1,样式类2”;
Tag.classList.add(“样式类1”) 往上加
Tag.classList.remove(“”) 去掉
Tag.classList.togggle(“”) 没有就加上 有的话就去掉
Tag.classList.contains(“”) 判断是否有指定的样式类
第四类:创建 添加 删除标签对象的API
Var tag = document.createElement(“标签名”)
tag.属性名=值;
Tag.setAttribute(属性名 值)
parentTag.appendChild(tag) 追加到父类的标签中
tag.insertBefore();
tag.insertAdjecentElemrnt(“四种位置”,newTag);
tag.insertAdjecentHTML(‘四种位置’,文本字符串);
tag.remove();
第五类:标签之间的关系:
tag.parentNode 上级标签
tag.childdren 下级标签
tag.childNodes 下级节点
tag.previousSibling 前面的兄弟标签
tag.nextSibling 后面的兄弟标签
第六类:事件监听
鼠标事件 click(单击) dbclick(双击) context(右击)
Mouseover(在上面) mouseout(不在上面)
mouseenter(进入) mouseleave(离开)
Mousemove(移动) mousewheel(滚动)
衍生出的拖拽事件Drag dragstart dragenter dragleave drop
衍生出的触控事件Touchstart touchend touchleave
键盘事件
Keyup(按键弹起) keydown(按下,不放手会连续触发) keypress
窗口事件: resize close
打印事件
动画事件
事件对象:当事件发生时,浏览器会生成一个事件对象 将事件相关的数据都放入这个对象中 如哪个标签触发了事件 事件发生时 鼠标的位置 键盘按键的状态(Ctrl/shift等是否按下 按下那个键?)
监听事件:
tag.on 事件名= function(){
事件发生时会执行函数
}
// 只能挂接一个监听函数
tag.addEventiListener(‘事件名’,function(){
})
//可以为一个事件挂接多个监听函数
tag.remoceEventiListener(‘事件名’)