js相关知识集合

js相关知识

---

一、初识javascript

javascript：修改网页样式，更改网页特效

1、js特效

特效实现原理概括：响应用户操作，对页面元素进行某种修改

1、鼠标提示框的显示隐藏
   display：none  可以隐藏元素
2、事件：用户的一些操作
   类型：onclick、ommousedown等

2、函数

作用：制作更复杂的效果
原因：直接写事件会导致代码混乱

定义:告诉系统有这个函数，不会立即执行
调用：执行函数内代码

3、获取元素

getElementById 通过id获取元素

4、if判断

对不同的事件进行不同的判断逻辑，实现特效过程及原理分析

5、函数传参

··改变背景颜色
··改变div任意样式
··style与className的关系

6、提取行间事件

提取事件
获取一组元素：

7、循环

用while引入循环的概念
for循环遍历

8、选项卡

按钮的实现
内容的实现（div）

二、深入javascript基础

1、 javascript的组成

ECMAScript:翻译器，翻译
DOM：Document Object Model 文档对象模型
BOM：Browser Object Model 浏览器对象模型

2、变量类型

• 类型：typeof
  * 用法：返回值
  *常见类型：number，string，boolean，undefined，object，function

• 一个变量应该存放一种类型的数据

• 数据类型的转换
  • 显式类型转换
    • parsenInt（），parseFloat（）
  • 隐式类型转换
    • == 、===

3、作用域与闭包

变量作用域（作用范围）：局部变量，全局变量

闭包：子函数可以使用父函数的局部变量

4、运算符

算术：+加、-减、乘、/除、%余
赋值：=、+=、-=、/=、=、%=
关系：>、<、<=、>=、== 、=== 、！= 、 ！==
逻辑：&&与、||或、！非
运算优先级：（）

三、定时器

1、定时器作用

• 开启定时器
  • setInterval：间隔性
  • setTimeout：延时性
• 停止定时器
  • clearInterval
  • clearTimeout

2、数码时钟

• 获取系统时间
  • Data对象
  • getHours、getMinutes、getSeconds
• 显示系统时间
  • 字符串连接
  • 空位补零
• 设置图片路径
  • charAt方法

3、Date对象一些方法

年：getFullYear（）
月：getMonth（）
日：getDate（）
星期：getDay（）

4、 延时提示框

• 方法：移入显示，移出隐藏
• 移出延时隐藏：移入下面的div后，仍然隐藏
• 简化代码：合并两个相同的mouseover和mouseout

5、无缝滚动 —— 基础

• 1、基础

  • 物体运动基础
    • 使div移动
    • offsetLeft的作用
    • 用定时器让物体连续移动

• 2、了解
  * 效果原理：让ul一直向左移动
  * 复制li
  + innerHTML和+=
  + 修改ul的width
  * 判断滚动过界后，重设位置

• 3、扩展

  • 改变滚动方向
    • 修改speed
    • 修改判断条件
  • 鼠标移入暂停
    • 移入关闭定时器
    • 移入重新开启定时器

四、DOM基础

1、什么是DOM

网页中用来表示文档中对象的标准模型，通过JavaScript可以对网页中的所有DOM对象进行操作，是由万维网联盟W3C组织制定的标准编程接口。文档对象模型（Document Object Model，简称DOM）。

2、浏览器兼容情况

不同的浏览器对dom操作有着不同的兼容性，这取决于不同浏览器的内核

浏览器内核

IE浏览器：Trident内核，也称为IE内核
Chrome浏览器：Webkit内核，现在是Blink内核
Firefox浏览器：Gecko内核，俗称Firefox内核
Safari浏览器：Webkit内核
Opera浏览器：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
360浏览器：IE+Chrome双内核
猎豹浏览器：IE+Chrome双内核
百度浏览器：IE内核
QQ浏览器：Trident（兼容模式）+Webkit（高速模式）

常见的兼容性问题

• 1.不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同
  解决方案：css里增加通配符*{margin：0；padding：0}
• 2.IE6双边距问题；在IE6中设置了float，同时又设置margin，就会出现边距问题
  解决方案：设置display：inline；
• 3.当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
  解决方案：超出高度的标签设置overflow：hidden，或者设置line-height的值小于你的设置高度
• 4.图片默认有间距
  解决方案：使用float为img布局

3、DOM节点

• childNodes :子节点
• parentNode：父节点
• offsetParent：获取元素在页面中的实际位置

4、操纵元素属性

• 元素属性操作
  • odiv.style.display = “block”
  • odiv.style[“display”]=“block”
  • Dom方法
• DOM方法操作元素属性
  • 获取：getAttribute（名称）
  • 设置：setAttribute（名称，值）
  • 删除：removeAttribute（名称）

5、DOM元素灵活查找

• 用className选择元素：getElementByClassName
  • 选出所有元素
  • 通过classN条件筛选
  • 封装成函数

五、DOM操作应用

1、基础

创建DOM元素

• createElement（标签） 创建节点
• appendChild（节点） 追加节点

插入元素

• insertBefore（节点，原有节点） 在已有元素前插入

删除DOM元素

• removeChild（节点） 删除一个节点

文档碎片

• 文档碎片可以提高DOM操作性能（理论上）
• 原理：减少对DOM 修改带来的的回流操作。
• document.createDocumentFragment（）

2、高级

(1) 、表格应用

• 获取：tBodies，tHead，tFoot，rows，cells
• 隔行变色：鼠标移入高亮
• 添加、删除一行，实现对DOM方法的使用
• 搜索
  • 基础版本——字符串比较，
  • 忽略大小写——大小写转换，
  • 模糊搜索——search的使用，
  • 多关键词——split，
  • 高亮显示、筛选
• 排序
  • 移动li
  • 元素排序：转换——排序——插入

(2)、表单应用

表单基础知识：
表单：在网页中主要负责数据采集功能
目的：向服务器提交数据
例子：用户注册

表单事件：

• onsubmit 提交时发生
• onreset 重置时发生

表单内容验证

• 阻止用户输入非法字符 阻止事件
• 输入时、失去焦点时验证 onkeyup、onblur
• 提交时检查
• 后台数据检查