JavaScript

最新推荐文章于 2024-11-12 11:19:19 发布

丨時來運轉丨

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量111

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/HAfraid/article/details/129804499

版权

根据id获取dom对象，如果id重

复，那么以第一个为准0327

事件

事件 (Event) 是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中

Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过

某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个Web

页面加载完成，或者是用户滚动窗口或改变窗口大小。通过使用 JavaScript ，你可以监听特定事件

的发生，并规定让某些事件发生以对这些事件做出响应。

1.1 作用

（1）验证用户输入的数据。

（2）增加页面的动感效果。

（3）增强用户的体验度

1.2 事件类型

JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。

几个常用的事件：

onclick 、onblur 、onfocus 、onload 、onchange、onmouseover、onmouseout、onkeyup、onkeydown

onload：当页面或图像加载完后立即触发
onblur：元素失去焦点
onfocus：元素获得焦点
onclick：鼠标点击某个对象
onchange：用户改变域的内容
onmouseover：鼠标移动到某个元素上
onmouseout：鼠标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下

1.3 DOM0级事件、

通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属

性。这种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用，每个元

素都有自己的事件处理程序属性，这些属性通常全都小写，例如onclick，然后将这种属性的值设为

一个函数，就可以指定事件处理程序了。以这种方式添加的事件处理程序会在事件流的冒泡阶段被

处理。而且，只能为同一个元素的同一个事件设定一个处理程序（覆盖），也可以通过删除DOM0

级方法指定的事件处理程序，只要将属性值设为null即可。

1.4 DOM2级事件

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：

addEventListener()和removeEventListener()。

所有DOM节点都包含这两个方法，并且他们都接受3个参数：

要处理的事件名、作为事件处理程序的函数和一个布尔值。

最后这个布尔值参数如果是true，则表示在捕获阶段调用事件处理程序；

如果是false则表示在冒泡阶段调用事件处理程序。

这种方式可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数，注意，在删

除的时候，不能删除匿名处理函数。

2.BOM对象

BOM的核心对象是window，它表示浏览器的一个实例。

window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript

规定的Global对象。

这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在

frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架的名称来访问相应

window对象。

2.1window对象方法

2.1.1系统对话框

浏览器通过（实际是window对象的方法）alert()、confifirm()、prompt()方法可以调用系统对话框向

用户显示消息。

（1）消息框:alert， 常用。
   alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
（2）输入框:prompt，返回提示框中的值。
   prompt() 方法用于显示可提示用户进行输入的对话框。
   参数（可选）：
       	 第一个参数：要在对话框中显示的纯文本。
       	 第二个参数：默认的输入文本。
（3）确认框:confirm，返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

2.1.2打开(关闭)窗口

window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口

window.close()：关闭窗口。

2.1.3时间函数

setTimeout() :

在指定的毫秒数后调用函数或计算表达式。

返回一个唯一的标识；也可以通过返回的标识cliearTimeout(id)：来清除指定函数的执行。

在times毫秒后执行function指定的方法，执行之前也可以取消

setInterval():

可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。

该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

2.2History对象

history 对象是历史对象。包含用户（在浏览器窗口中）访问过的URL。

history 对象是 window 对象的一部分，可通过window.history 属性对其进行访问。

history对象的属性：length，返回浏览器历史列表中的 URL 数量。

history对象的方法：

back()：加载 history 列表中的前一个 URL。

forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。

go(number|URL): URL 参数使用的是要访问的 URL。而 number参数使用的是要访问的 URL

在 History 的 URL 列表中的相对位置。

go(-1)，到上一个页面

3.DOM对象

DOM：Document Object Model 文档对象模型

要实现页面的动态交互效果，bom 操作远远不够，需要操作 html才是核心。如何操作 html，就是

DOM。

简单的说，dom 提供了用程序动态控制 html 接口。

DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部

分。

dom处于javascript 的核心地位上。

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对

HTML 页面中的所有元素进行访问。

Document 对象是 Window 对象的一部分，可通过window.document 属性对其进行访问

3.1获取节点

在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过

Document对象提供的方法，查找、定位某个对象（也就是我们说的节点）。

==注意：==操作 dom 必须等节点初始化完毕后，才能执行。

处理方式两种:

（1）把 script 调用标签移到html末尾即可；

（2）使用onload事件来处理JS，等待html 加载完毕再加载onload 事件里的 JS。

获取方式如下：

方法	描述
getElementById()	根据id获取dom对象，如果id重复，那么以第一个为准
getElementsByTagName()	根据标签名获取dom对象数组
getElementsByClassName()	根据样式名获取dom对象数组
getElementsByName()	根据name属性值获取dom对象数组，常用于多选获取值

说明：href=“javascript:void(0)”：伪协议，表示不执行跳转，而执行指定的点击事件。

3.2创建和插入节点

3.2.1创建

方法	描述
createElement()	创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()	创建一个文本节点，可以传入文本内容
innerHTML	也能达到创建节点的效果，直接添加到指定位置了

3.2.2插入

方法	描述
write()	将任意的字符串插入到文档中
appendChild()	向元素中添加新的子节点，作为最后一个子节点
insertBefore()	向指定的已有的节点之前插入新的节点newItem：要插入的节点exsitingItem：参考节点需要参考父节点

function addPara(){
// 获取容器
 var container=document.getElementById("container");
 // 创建段落<p></p>
var p =document.createElement('p'); 
// 第一种方式
// 创建文本节点
 var txt=document.createTextNode("以后的你会感谢现在努力的你");
 // 将txt节点追加到p节点中
 p.appendChild(txt);
 // 将p节点追加到container节点中
 container.appendChild(p); 5 /*
 // 第二种方式
 // 向p节点中添加内容
 p.innerHTML = "以后的你会感谢现在努力的你";
 // 将p节点追加到container节点中
 container.appendChild(p);
 */ 
 /*
// 第三种方式
// 将字符串类型的p标签内容添加到container中，
不会添加多次
var str = "<p>以后的你会感谢现在努力的你</p>";
container.innerHTML = str;
 */

// 创建图片
 var img = document.createElement("img"); 
 /*
 // 设置属性第一种方式
 // 设置img标签的src属性
 // img.src="http://www.baidu.com/img/bd_logo1.png";
*/ 
 // 设置属性第二种方式
 // setAttribute() 方法添加指定的属性，并为其赋指定的值。
 // 设置img的src属性

// 创建文本框
vartxt=document.createElement("input");
/*
// 设置类型第一种方式
txt.type = "text";
txt.value = "添加成功";
*/
// 设置类型第二种方式
txt.setAttribute('type', 'text');
txt.setAttribute('value', '添加成功');
/*
 * txt.type = 'password'
 * txt.value = '123'
*/
// 获取容器
varcontainer
=document.getElementById("container");
/ 将txt节点追加到container中。container.appendChild(txt);

// 第一种方式
/*
// 创建下拉项
var option =document.createElement("option") ;
option.value = "2" ;
option.text = "油菜花" ;
// 获取下拉框
var sel =document.getElementsByTagName("select")[0];
// 添加下拉项
sel.appendChild(option);
*/
// 第二种方式:
varoption=document.createElement("option") ;
option.text="不该" ;
// 获取下拉框
varsel=document.getElementsByTagName("select")[0];
// 添加下拉项
sel.options.add(option);
// 第三种方式: 添加下拉项
varsel=document.getElementsByTagName("select")[0];
sel.innerHTML += "<option value = '2'>英雄</option>" ;

3.3间接查找节点

方法\|属性	描述
childNodes	返回元素的一个子节点的数组
firstChild	返回元素的第一个子节点
lastChild	返回元素的最后一个子节点
nextSibling	返回元素的下一个兄弟节点
parentNode	返回元素的父节点
previousSibling	返回元素的上一个兄弟节点

3.4删除节点

removeChild() 从元素中移除子节点

var programmer=document.getElementById("programmer");
 // 从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象 
programmer.parentNode.removeChild(programmer);

4.表单

4.1获取表单

1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; //从 0 开始

4.2获取表单元素

获取input元素：

1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称;    name属性值
3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
4)、通过 tagName 数组:document.getElementsByTagName('input')[索引] //从0开始

获取单选按钮

前提：将一组单选按钮设置相同的name属性值

(1)获取单选按钮组：

document.getElementsByName(“name属性值”);

(2)遍历每个单选按钮，并查看单选按钮元素的checked属性

若属性值为true表示被选中，否则未被选中

选中状态设定： checked=‘checked’ 或 checked=‘true’ 或 checked

未选中状态设定：没有checked属性或 checked=‘false’

获取多选按钮

var ufav = document.getElementsByName("ufav");
var favstr = "";
    for (i = 0;i < ufav.length; i++){
        if(ufav[i].checked){
            favstr += ufav[i].value+",";
       }
   }
favstr = favstr.substr(0,favstr.length-1);

获取下拉选项

（1）获取 select 对象：

var ufrom = document.getElementById(“ufrom”);

（2）获取选中项的索引：

var idx = ufrom.selectedIndex;

（3）获取选中项 options 的 value属性值：

var val = ufrom.options[idx].value;

注意：

当通过options获取选中项的value属性值时，

若没有value属性，则取option标签的内容

若存在value属性，则取value属性的值

（4）获取选中项 options 的 text：