前端—02：JavaScript

1.JS的输出：

• alert( )    直接弹框
• document.write( )    向页面输出
• console.log( )    向控制台输出
• innerHTML    向页面输出

 

2.获取页面元素:  document.getElementById("id的名称");

 

3.JS声明函数:

var 函数的名称 = function(参数){    

}

function 函数的名称(参数){

}

 

4.JS的开发步骤

• 确定事件
• 通常事件都会触发一个函数
• 函数里面通常都会去操作页面元素,做一些交互动作（弹框、验证、修改页面内容、跳转、动态添加内容）

 

5.JS中的常用事件

• onclick ：点击事件
• ondblclick:  双击事件
• onsubmit:  提交
• onload ：文档加载完成的事件
• onfocus ：获得焦点事件
• onblur ：失去焦点事件
• onkeyup ：按键抬起事件
• onmouseenter:  鼠标移入
• onmouseout:  鼠标移出
• onchange:   下拉列表内容改变

 

6.定时器

• setInterval("test()",3000)   每隔多少毫秒执行一次函数
• setTimeout("test()",3000)  多少毫秒之后执行一次函数

timerID 上面定时器调用之后

• clearInterval()
• clearTimeout()

 

7.切换图片：img.src = "图片路径"

 

8.显示广告：  img.style.display = "block"

隐藏广告：   img.style.display ="none"

 

9.引入一个外部js文件

<script src="js文件的路径"  type="text/javascript"/>

 

10.HTML中的DOM操作

一些常用的 HTML DOM 方法：
  getElementById(id) - 获取带有指定 id 的节点（元素） 
  appendChild(node) - 插入新的子节点（元素） 
  removeChild(node) - 删除子节点（元素） 

一些常用的 HTML DOM 属性：
  innerHTML - 节点（元素）的文本值 
  parentNode - 节点（元素）的父节点 
  childNodes - 节点（元素）的子节点 
  attributes - 节点（元素）的属性节点 


查找节点：
getElementById() 返回带有指定 ID 的元素。 
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 

增加节点：
createAttribute() 创建属性节点。 
createElement() 创建元素节点。 
createTextNode() 创建文本节点。 
insertBefore() 在指定的子节点前面插入新的子节点。 
appendChild() 把新的子节点添加到指定节点。 

删除节点：
removeChild() 删除子节点。 
replaceChild() 替换子节点。 

修改节点：
setAttribute()  修改属性
setAttributeNode()  修改属性节点

 

---