中软大前端0409-JS函数

发表于 | 分类于

函数

系统函数

isNaN(参数)：判断参数是否不是一个数字；

自定义函数

语法

function name(参数){}

声明函数的关键字:function

return:函数的返回值，在函数中，执行到return，函数结束执行。return后的代码不执行。

函数的调用

函数只有被调用才会执行代码

函数名(参数组);

BOM模型

浏览器对象模型
包括对象：

window:整个BOM的核心

常用方法

prompt();
alert();
confirm(); 确定—取消，返回值为布尔型数值
close();
open(“1.html”,”_selt“,”窗口特征”,true);新打开一个页面
true:会在浏览器的历史记录中记录当前页和新打开的页面
srtInterval(函数,1000);间隔一定时间(毫秒)调用函数;函数会返回一个intervalId
clearInterval();清除调用函数

事件

onXXXX监听某个事件是否发生
onload:页面或图像完成加载
onclick:单击某个对象时
onmouseover:鼠标移到某个元素上
onmouseout:鼠标从某个元素上移开

history:历史对象

方法
history.back() 后退

document:文档对象

location:位置对象,页面访问的地址

(URL),把浏览器重定向到新的页面

location.hostname:返回WEB主机的域名
location.pathname:当前页面的路径和文件名

location.port:返回web主机的端口
location.protocol:协议

location.href:返回当前的(URL)可跳转页面

方法
location.reload():重新加载，刷新页面

16px * 16px
type ,引用资源的MIME类型
rel ,关系
MIME参考手册
iconfont 图标库


target="_self":跳转链接时，不重新打开一个窗口，覆盖原有页面
target="_blank":跳转链接时，重新打开一个窗口，保留原有页面（默认）

DOM模型

方法

  • getElementById()：返回带有指定ID的元素。
  • getElementsByTagName();返回包含有指定标签名的对象集合,访问方式类似数组
  • getElementsByName();返回包含指定name属性值的对象集合,访问方式类似数组
  • getElementsByClassName();

addEventListener()方法

给元素添加事件监听

语法：

element.addEventListener(event, function, useCapture);
第一个参数是事件的类型；
第二个参数是事件触发后调用的函数；
第三个参数是个布尔值用于描述事件是冒泡还会捕获，参数可选

  • 调用外部函数，第二个参数，直接填写函数名 ，不需要 函数名()

    1
    2
    3
    4
    5
    6
    7
    <button id="btn">按钮</button>
    <script type="text/javascript">
    	document.getElementById("btn").addEventListener("click",show);
    	function show(){
    		alert("点击了按钮！");
    	}
    </script>

  • 直接写函数（匿名函数）

    1
    2
    3
    4
    5
    6
    7
    <button id="btn">按钮</button>
    <script type="text/javascript">
    	document.getElementById("btn").addEventListener("click",function (){
    		alert("点击了按钮！");
    	});
    	
    </script>

removeEventListener()移除事件的监听

事件的传递方式：冒泡和捕获

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

  • 在冒泡中，内部元素的事件会先被触发，然后再触发外部元素(从最具体的元素开始，然后逐级向上，直至文档)
  • 在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件(从最不具体的元素，到最具体的元素)

DOM事件

DOM0级事件

在JS代码中直接处理事件。同一个对象的同一个事件只能处理一次（会覆盖）
var btn1=document.getElementById("btn1");
btn1.onclick = function (){ alert("Hello DOM 0级事件处理程序")}

DOM2级事件处理

同一个对象的同一个事件可以有多个处理程序
addEventListener(事件类型, 函数, 布尔值);

节点

元素节点，文本节点，属性节点，父节点，子节点

换行符 “
“ 节点类型为文本节点。(代码中的空行也会被解读成文本节点)

获取body元素：document.body

创建节点

创建元素节点：createElement()
创建文本节点：createTextNode()
创建子节点：节点.appendChild()

删除子节点

node.removeChild(childNode);
只能根据父节点删除子节点，要删除某个节点必须先找到它的父节点
childNode.parentNode.removeChild(childNode);

替换节点

node.replaceChild(newNode,oldNode);
创建新节点，替换旧节点;也必须找到父节点

DOM查询

  • document.querySlectorAll(“选择器”);
    选择器