Java菜鸟学习日记32

JS编程思想

弱类型意识

JS中的变量是没有类型的

变量可以赋任何类型的值，类型仅仅是值的性质，与变量无关

基本类型

变量未赋值时，其值为undefined

只有一个number类型表示数字，不区分整数还是小数

动态语言

动态语言针对的不是变量，而是值！尤其是对象

var obj = {name:"changwei",age:3}：对象字面量

JS是动态语言，可以随意创建对象，而不需要有与之对应的类。JS中没有class（ES6中新增加了class，但它实际上与Java中的class是不一样的）

动态语言不仅可以随意创建对象，而且可以随意向对象添加属性、方法等成员。还可以从对象中删除属性及方法。这个特性对于Java来说是不可想象的

函数式编程

函数（方法）可以作为参数传递给另一个函数【函数也是值】

函数名实际上也是一个普通变量

普通变量也可以赋一个函数值

函数实际上是一个对象，这个对象中包含了它的源代码、函数名、以及调用这个源代码的方法

原型

原型存在的原因是因为JS没有class，无法共享方法及静态成员。

原型是一个容器（对象）可以存放被大量对象共享的方法及属性

JS定义了一条寻找属性或方法的规则：

先在对象本身寻找，找到则使用，找不到就去原型中找，找则用，找不到继续找，直到穷尽所有原型为止（原型链）

DOM（Document Object Model：文档对象模型）

实际就是给网页上的标签建立的模型

每一个标签都用一个对象来表示

每一类标签都是一个类

给网页上的标签建模的目的是为了让JS能够以编程的方式控制、生成网页

DOM是控制网页的API

第一类API：获取标签对象

document.getElementBuld("id");

document.getElementsByTagName("tagName");

document.getElementsByName("name");

document.getElementsByClassName("className");

H5时代新增的两个方法

document.querySelectot(CSS筛选器)：返回一个标签

document.querySelectorAll(CSS筛选器)：返回找到的所有标签

第二类API：操作标签的属性

tag.属性名 = 值;

var value = tag.属性名;

tag.setAttribute(属性名，值);

var value - tag.getAttribute(属性名);

第三类API：控制标签的样式

tag.style.color = 'red';

tag.style.fontSize = '12px';

tag.style.font-size = '12px';

tag.style[font-size] = '12px';

样式类

tag.className = "样式类1 样式类2"

tag.classList.add(“样式类1”)：往上加

tag.classList.remove("");：去掉

tag.classList.toggle("");：没有的话就加上去，有的话就去掉

tag.classList.contains("");：判断是否有指定的样式

第四类API：创建、添加、删除标签对象的API

var tag = document.createElement(标签名);

tag.属性名 = 值;

tag.setAttribute(属性名，值);

parentTag.appendChild(tag);：追加到父标签中

tag.insertBefore();

tag.insertAdjecentElement('四种位置',newTag);

tag.insertAdjecentHTMLL('四种位置',html字符串);

tag.insertAdjecentText('四种位置',文本字符串);

tag.remove();

第五类API：标签之间的关系

tag.parentNode：上级标签

tag.children：下级标签

tag.childNodes：下级节点

tag.previousSibling：前面的（兄弟）同级标签

tag.nextSibling：后面的（兄弟）同级标签

第六类API：事件监听

鼠标事件

click：单击

delclick：双击

context：右击

mouseover：在上面

mouseout：不在上面

mouseenter：进入标签范围（标签遮盖，在上面不一定进入范围）

mouseleave：出去标签范围

mousemove：移动

mousewheel：滚轮

衍生出的拖拽事件

drag：拖拽

dragstart：

dragenter：

dragleve：

drop

衍生出的触控事件

touch：触控

touchstart：

touchenter：

touchleve：

键盘事件

keyup：按键弹起

keydown：按下，不放手会连续触发

keypress：

窗口事件

resize：窗口尺寸变化

close：窗口关闭

打印相关事件

动画相关事件

事件对象：当事件发生时浏览器会生成一个事件对象，将事件相关的数据都放入到这个对象中，如那个标签触发了事件，事件发生时，鼠标的坐标位置，键盘按键的状态(ctrl、shift等是否按下，按下了那个键)

监听事件：

tag.on 事件名 = function(){

事件发生时会执行函数

}

只能挂接一个监听函数

tag.addEventListener(‘事件名’，function(){

})

可以为一个事件挂接多个监听函数

tag.removeEventListener(‘事件名’)