曾经了解过的web API

获取当前日期: var date = new Date(); getMonth() 获取月份 getHours() getMinutes()

API : 预先定义好的方法, 能够帮我们实现某些特定的功能; // WebAPI : 一套操作 网页(web) 的 方法(API) : 网页元素 + 浏览器

DOM : 文档对象模型 一套操作网页元素的API ,DOM中, 会把整个网页当做一个的对象

dir : 以对象的形式进行打印

///////////////////////////////////////////////////////

获取元素: document.getElementById() (只能由document调用)

getElementsByTagName() (返回值 : 伪数组) (由document或者element调用)

getElementsByClassName()

getElementsByName()

querySelector(); querySelectorAll();

选择器 : 简单选择器 : 标签 类 id 复杂选择器 : 后代 子代

/////////////////////////// 注册事件的三要素 事件源 : 给谁注册事件 (btn) 事件名称 : 注册什么事件 (on + click) 事件处理函数 : (注意) 函数不会立刻执行, 当事件触发的时候,才会执行

可以直接获取元素对象修改: img.src = "..." 改变添加样式: div.className = '样式名';

不能直接冒然写一个新的类名,要看之前有没有其他类名 如果之前有类名,记得都要加上,不然会出现覆盖问题

不能给数组注册任何点击事件,要先遍历

/////////////////////////////////////////

事件中的this this指向的就是 注册事件的对象

再点击按钮, i已经是最大值 因为事件是绑定在每个li上面的，事件已经绑定完了，for循环到最后一项，我们才点击的事件，所以最后打印出来的是最后一项 ////////////////////

阻止默认跳转: return false;

////////////////////////////////////////

事件学习:

鼠标事件 onmouseover 鼠标经过事件 onmouseout 鼠标离开事件 焦点事件 onfocus : 获取焦点事件 onblur : 失去焦点事件

////////////////////////////////////////

表单属性操作: disabled 禁用
true : 禁用 false : 不禁用

checked 选中 (单选框和多选框/复选框) selected 下拉框选中 true : 选中 false : 不选中

/////////////////////////////////////////

随机: 随机 0-4 var random = parseInt ( Math.random() * 5 );

全选反选

/////////////////////////////////////////

原生自定义属性的写法: div.setAttribute('mg','bb'); console.log(div.getAttribute('mg'));

原生获取索引: for循环,把i值赋值给btns[i].index上 于是这个index就是这个btns的索引

tab栏切换: 思想: 点击哪个导航,,哪个导航就变绿 排他思想: 干掉所有人 复活我自己

////////////////////////////////////

this指向:谁调用this所在的函数,,this就指向谁

1 函数调用 :window 2 方法调用: 对象 3 构造函数 构造函数创建出来的对象p =>var p = new Person(); 4 dom中的this 指向注册事件

innerText 标签内容 只识别文本 innerHTML 标签内容 不只识别文本 还是识别标签

/////////////////////////////////////////

1. element.style 是一个对象 与行内样式style里的属性一一对应
2. 可以获取其属性
3. div.style 获取的是行内样式的
4. div.style 设置的样式属性也都是设置给行内样式的
5. 获取的值 : 字符串 : '100px' 设置的值 : 字符串 带px
6. font-size => fontSize
7. 行内样式的优先级 > 嵌套样式的 style > className

///////////////////////////////////////////////

随机数字 0-255 parseInt( Math.random() * 256)

//////////////////////////////////////

节点操作:

1. childNodes 获取所有的子节点
2. children 获取所有的子元素 (掌握)
3. firstChild : 第一个子节点
4. firstElementChild : 第一个子元素 (掌握)
5. lastChild 最后一个子节点
6. lastElementChild : 最后一个子元素 (掌握)
7. 获取中间的子元素(任意子元素) children[n]

总结 :

1. children 获取所有的子元素
2. firstElementChild 获取第一个子元素
3. lastElementChild 最后一个子元素
4. children[n] 获取中间任意一个

操作举例: ul.firstElementChild.style.background

//////////////////////////////////////////////////

Sibling 兄弟姊妹 next : 下一个 previous: 上一个

找兄弟

1. nextSibling 下一个节点
2. nextElementSibling : 下一个元素 (掌握)
3. previousSibling : 上一个节点
4. previousElementSibling : 上一个元素 (掌握)

//////////////////////////////////////////

事件 : onkeydown : 按下按键 多次触发 onkeyup : 释放按键 触发一次

// appendChild 添加元素 // 在子元素的后面添加一个新元素 // 结构 : 父元素.appendChild(新元素)

// 总结 //1. 通过appendChild 把新元素添加到最后了 //2. 如果在网页中已经存在的标签,, appendChild() 相当于剪切

////////////////////////////////////////////////////////

添加新元素, 在参考元素之前: // appendChild() 添加到最后 // insertBefore() 添加到某个元素之前 如果有需求插入到下一个元素之后(没有insertAfter): ul.insertBefore(p,l2.nextElementSibling); 插入第一个元素之前: ul.insertBefore(p,ul.children[0]);

////////////////////////////////////////////////////////

克隆节点:

语法结构 : 节点.cloneNode(deep); deep 是否是深拷贝 (拷贝 复制 克隆) 布尔值 true : 深拷贝 false : 浅拷贝

浅拷贝 : 只拷贝一层 (内容子节点 都不拷贝) 深拷贝 : 不仅拷贝自己元素,还拷贝其内容(子节点) 不写参数 : 默认浅拷贝 var newFather = father.cloneNode(true);

//////////////////////////////////////////////////////////

创建节点 :

网页加载完成后会执行 新开一个文档流 BOM的内容 window.onload = function () {...}

1. document.write (不用)
2. innerHTML (偶尔用)
3. document.createElement (重点) 例子: var h1 = document.createElement('h1'); div.appendChild(h1); 将创造的h1加在div里面

//////////////////////////////////////////////////////////////

删除节点: 父元素.removeChild(子元素)

总结 :

1. querySelectorAll() 获取的所有元素 =>静态计算 => 删除 ok
2. getElementsByTagName() 获取的所有元素 => 动态计算 删除一个,,下标重新布局 => 删除 不ok 解决办法 : i--
3. children ; =>动态计算 => i--
4. 以后 删除元素 : querySelectorAll() 其他操作 : 都可以使用

//////////////////////////////////////////////////////////////

替换节点 replaceChild 结构 : 父元素.replaceChild(新元素, 老元素);

/////////////////////////////////////////////////////////////////

总结： // 1. 节点属性 // childNodes 所有的子节点 // nodeType 节点类型 // nodeName 节点名称 // nodeValue 节点值

  // 2. 节点查找
  //2.1 找孩子
  // - children 所有的子元素
  // - firstElementChild 第一个子元素
  // - lastElementChild 最后一个子元素
  // - children[n] 任意一个

  //2.2 找兄弟
  // - nextElementSibling  下一个兄弟元素
  // - previousElementSibling 上一个兄弟元素

  //2.3 找父亲
  // - parentNode
  // - parentNode.parentNode 

  // 3. 添加节点
  // - appendChild 添加节点(最后)
  // - insertBefore(新元素 , 参考元素)  添加到某个参考元素之前


  // 4. 克隆节点
  // - cloneNode(deep)
  // deep 是否深拷贝
  // true : 深拷贝 拷贝标签+内容
  // false : 浅拷贝 拷贝标签, 不拷贝内容 默认

  //5. 创建节点
  // - document.write()
  // - innerHTML 
  // - document.createElement();  

  //6. 删除节点
  // 父元素.removeChild(子元素);

  //7. 替换节点
  // 父元素.replaceChild(新元素, 老元素);

/////////////////////////////////////

双击 ondblclick

总结 : 创建节点三步走

1. 创建节点
2. 设置节点
3. 添加节点

//////////////////////////////////////////

BOM => window

DOM => document

window.onload = function(){...} 窗体加载完成后执行 窗体加载 : html页面内容 图片加载 文件加载等等

window.open() 打开一个窗口 参数1 : 需要载入的url地址 参数2 : 新窗口名称 或者 target属性 参数3 : 窗口的属性 指定窗口的大小 返回值: 新窗口的名称 关闭当前窗口: window.close();

// 1. 设置延时器 setTimeout(参数1,参数2) 参数1 : 函数 , 延时一段时间将会执行的函数 参数2 : 延时的时间 毫秒为单位 1000毫秒 = 1s 返回值 : 延时器的id timerId

// 2. 清除延时器 clearTimeout(timerId);

// 1. 设置 定时器 setInterval (参数1, 参数2) 参数1 : 函数 , 每间隔一定时间就会执行 参数2 : 间隔的时间 毫秒 1000 = 1s 返回值 : 定时器的id timerId

// 2. 清除定时器 clearInterval(timerId)

////////////////////////////////////////////////////////

异步:会在另外一个线程中，“真实”地执行着。整个过程，不会阻碍调用者的工作。 同步:调用者必须等到方法调用返回后，才能继续后续的行为

/////////////////////////////////////////////////////////

location.href 控制地址栏的url地址

页面重新加载 location.reload();

//////////////////////////////////////////////////////////////

console.log(screen.width);//屏幕的宽度 console.log(screen.height);//屏幕的高度 console.log(screen.availWidth);//浏览器可占用的宽度 console.log(screen.availHeight);//浏览器可占用的高度

offset: 获取元素自身真实的大小和位置

1.offsetWidth offsetHeight 获取元素自身真实的宽度和高度 (内容+border+padding)

2 offsetParent : 最近的定位元素(父元素)

1. 如果父级元素没有定位 => body
2. 如果父级元素有 定位的 => 定位的

3 offsetLeft(获取 自身左侧到offsetParent左侧的距离) 和 offsetTop

总结 :

1. 获取元素自身真实的宽度和高度
2. 数据类型 : number 方便计算
3. offsetWidth 只能获取 (只读) 不能设置

/////////////////////////////////////////////////////////////

style系列:

1. style系列获取的: 行内样式的 (不要style系列获取)

2. style系列用途: 主要用来设置

3. style设置的类型 : 字符串 (带px)

4. 获取元素的宽高 => offset系列

5. 设置元素的宽高 => style系列

//////////////////////////////////////////////////

动画: 动画三步走: 1 获取当前位置 2 累加小碎步 3 重新赋值

轮播图

&& 如果前面为false(假) , 后面就不用看了 如果前面为true(真) , 后面的要看

///////////////////////////////////////////////////////

键盘事件: document.onkeyup = function ( e ) {...} 获取按键码:e.keyCode

///////////////////////////////////////////////////////////////

位置信息:

1. clientX 和 clientY : 相对于 浏览器可视区 左上角的位置 (常用)
2. pageX 和 pageY : 相当于 网页内容 左上角的位置
3. screenX 和 screenY : 相当于 '屏幕'左上角的位置

/////////////////////////////////////////////////////////////////

事件学习: onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标释放 (松开)

///////////////////////////////////////////////////////////

注册事件:

1. on + 事件名称 document.onclick = function () {...}

移除事件 document.onclick = null; 缺点:不能同时注册两个类型一样的事件

2. addEventListener 注册事件 document.addEventListener('click',fn)

移除事件 移除事件的时候,要在注册事件的地方改 : 不能再使用匿名的 document.removeEventListener('click',fn);

2. 注册事件 低版本不支持 ie678 不支持 btn.addEventListener(点击名称,fn)

兼容性处理注册事件 主要处理 ie678 document.attachEvent('onclick',fn) 参数1 : 事件名称 带on 参数2 : 事件处理函数

////////////////////////////////////////////////

事件流:事件传播过程

// 事件流的三个阶段

1. 捕获阶段 (true)
2. 目标阶段
3. 冒泡阶段 (false) addEventListener('click',function(){....},false/true)

事件冒泡:当我们触发了子元素的某个事件后，父元素对应的事件也会触发 从下往上传播,阻止冒泡 : 事件对象 e e.stopPropagation()

顺序 :

1. 先执行捕获阶段的 father sun 从上往下
2. 再执行冒泡阶段的 son 从下往上

////////////////////////////////////////////////////

三大家族:

1. offset家族
2. scroll家族
3. client 家族

2 scroll家族: scrollWidth/scrollHeight:
内容的大小 超出的文字 也算内容大小

scrollLeft/scrollTop: 概念 : 被滚动条卷去的部分
被滚动条隐藏的部分 出现滚动条的时候

滚动事件:一旦滚动,事件就会触发 div.onscroll = function () {..}

网页被浏览器卷去的部分:

1. 低版本的浏览器 html 和 body 的scrollTop

2. 现代浏览器使用的 : window.pageYOffset (重要) 被浏览器 卷去的高度 (scrollTop) 注意点2 : 写了兼容性的处理 (window.pageYOffset)

3. client 家族 :可视区内容的大小 (内容+padding) clientWidth 和 clientHeight
   clientLeft 和 clientTop => 获取的是边框

///////////////////////////////////////////////////////////////////

// 获取浏览器可视区大小 //1. 低版本的 : html 和 body //2. 现代版本 : window.innerWidth