Study JavaScript(Day10)

最新推荐文章于 2025-06-27 18:59:39 发布

原创最新推荐文章于 2025-06-27 18:59:39 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文涵盖JavaScript定时器控制、DOM操作、事件绑定与取消、事件对象应用及事件冒泡原理，深入解析JS动态网页编程关键技能。

一、停止定时器

var timeId = setInterval(方法名,时间间隔);

clearInterval(timeId);

二、setTimeout(方法名,时间间隔);

setTimeout()

三、DOM

文档对象模型，学习DOM主要用于对页面中的元素进行增删改查操作

四、查找元素

- 通过id查找

var x = document.getElementById("id");

- 通过标签名查找

var imgs = document.getElementsByTagName("img");

- 通过class查找元素

var divs = document.getElementsByClassName("c1");

- 通过name属性值查找

var arr = document.getElementsByName("gender");

五、创建元素

var div = document.createElement("div");

- 添加元素到最后 document.body.appendChild(div);

- 插入元素父元素.insertBefore(新元素,弟弟元素);

- 删除元素父元素.removeChild(被删除的元素对象);

六、JS

1. 用于给页面添加动态效果和动态内容

2. 三种引入方式：

- 标签属性事件中添加

- 在head标签里面添加script标签

- 在单独js文件中

3. 数据类型：

数值类型number 字符串类型string 布尔值类型boolean 未定义类型undefined 对象类型object

4. 运算符：

大体相同 ==和=== 除法 typeof 66+6 number6

5. 语句：

大体相同 if和while括号里面的内容会自动转成布尔值类型 for var

不支持增强for循环

6. 函数方法：

- function 方法名(参数列表){方法体};

- var 方法名 = function(参数列表){方法体};

- var 方法名 = new Function("参数1","参数2","方法体")

7. 字符串相关：

- 创建 var str = "" ; str = new String();

- 转数值 parseInt() parseFloat() Number()

- 获取字符串出现的位置 str.indexOf("a"); str.lastIndexOf("a");

- 转大小写 toUpperCase() toLowerCase();

- 截取 substring(start,end?)

- 替换字符串 replace（old,new）

- 拆分 var arr = str.split(",");

8. 四舍五入：

num.toFixed(保留小数点位数)

9. 数组相关：

- 创建 var arr = [20,18]; var arr = new Array("",18);

- 添加 arr.push();

- 长度 arr.length=3;

- 反转 arr.reverse();

- 排序 arr.sort(); arr.sort(new Function("a","b","return a-b;"));

10. 日期：

- 创建 var d = new Date();

- 通过字符串创建时间对象 var d = new Date("2018/10/11 20:18:22");

- d.setTime(); d.getTime();

- d.getFullYear/Month/Date/Day/Hours/Minutes/Seconds()

- d.toLocaleDateString() d.toLocaleTimeString();

11. 正则：

. \d \w \s ^ $

- var reg = /规则/模式; var reg = new RegExp(规则,模式?);

- reg.exec(str) reg.test(str)

- str.match(reg) str.replace(reg,new)

七、JavaScript中的事件处理

- 事件包括：鼠标事件、键盘事件、状态改变事件

- 鼠标事件：点击事件：onclick 鼠标移入:onmouseover 鼠标移出：onmouseout 鼠标按下：onmousedown 鼠标松开： onmouseup 鼠标移动：onmousemove

- 键盘事件：键盘按下:onkeydown 键盘松开: onkeyup

- 状态改变事件： onchange(value值改变事件) onload(页面加载完成事件)

onfocus（获取焦点事件） onblur(失去焦点事件) onsubmit（表单提交事件） onresize(窗口尺寸改变事件)

八、事件的绑定

1. 在元素内添加事件方法中的this代表的是window对象

<input id="btn" type="button" value="点我试试"

onclick="alert('试试就试试')">

2. 通过js代码添加事件（动态绑定）动态绑定时方法中的this代表事件源

/* 给按钮动态绑定点击事件 */

btn2.onclick = function(){

alert("动态绑定成功！");

}

九、事件的取消

- 在事件中执行 return false;则可以取消掉当前的事件

十、Event事件对象

- event对象中保存着和事件相关的信息

- 在鼠标事件中通过event可以得到鼠标的坐标 event.clientX/Y

- 在键盘事件中通过event可以得到键盘每个键的编码 event.keyCode

- 在事件中可以通过event对象得到事件源

//获取事件源

//alert(event.target.nodeName);

//获取事件源存在兼容性问题

//alert(event.srcElement.nodeName);

//通过以下写法解决兼容性问题以下写法只要有一个成功即可

var obj = event.target||event.srcElement;

alert(obj);

十一、事件冒泡（事件传递）

如果一个区域内有多个元素的事件响应，则响应顺序是从最底下的元素往上级元素传递，这个传递过程类似气泡从下到上，所以称为事件冒泡。

- 应用场景：如果页面中的多个元素需要添加事件，只需要在多个元素共同的祖先元素上添加事件，则多个元素都具备点击事件，通过event获取事件源来区分到底点的是哪一个

function myfn(){

var obj = event.target||event.srcElement;

if(obj.nodeName=="DIV"){

alert("点击了div")

}else if(obj.nodeName=="P"){

alert("点击了P");

}else{

alert("点击了按钮");

}

</script>

</head>

<body>

<p>

</p>

</div>