JavaScript2

阿里巴巴待招录工程师

于 2023-03-27 20:03:06 发布

阅读量124

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/PHaoLin/article/details/129802600

版权

JavaScript

表单

一种向后台传输数据的方式。

数据发出前在页面检验数据合法性，节省不必要的错误数据传输。

提高用户体验度。

获取表单

例如：

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

获取表单元素

获取input元素

如 text password hidden textarea等，前两种常用。

姓名:
密码:
个人说明: 获取元素内容

  - 选中状态设定：selected='selected'、selected=true、selected
  - 	未选中状态设定：不设selected属性

提交表单

（1）使用普通button按钮+onclick事件+事件中编写代码:
获取表单.submit();
（2）使用submit按钮 + οnclick=“return 函数()” +函数编写代码:
最后必须返回：return true|false;
（3）使用submit按钮/图片提交按钮 + 表单οnsubmit=“return 函数();” +函数编写代码:
最后必须返回：return true|false;
trim() ：去除字符串前后空格（不去除字符串中间的空格）

表单校验

表单校验姓名:
密码:
年龄:小屁孩    你懂得
爱好:篮球    爬床    代码
来自:      请选择      北京      上海

提交重置

	/**
	 * 通过 id通过id参数，返回dom对象
	 * @param {Object}
	 */
	function $(id) {
		return document.getElementById(id);
	}

	/**
	 * 重置表单
	 */
	function resetForm() {
		$("myform").reset();
	}
	
	/**
	 要求：
	  1、验证用户名
	   1)不能为空
	   2)长度为 6-12 位
	  2、验证密码
	   1)不能为空 *
	   2)长度为 6-12 位
	   3)不能包含用户名
	  3、年龄: 必须选择 你懂得
	  4、爱好: 必须选择一项
	  5、来自: 必须选择一项
	  满足以上条件
	   	1、弹出所有的内容
	   	2、提交表单
	  否则
	  	1、说明错误原因
	  	2、不能提交表单
	*/
	function checkForm() {
		// 获取用户名
		var uname = $("uname").value;
		if (isEmpty(uname)) {
			// 通过innerHTML赋值
			$("validate").innerHTML = '用户名不能为空！';
			return;
		}
		if (uname.length < 6 || uname.length > 12) {
			$("validate").innerHTML = '用户名长度在6-12位之间！';
			return;
		}
		
		// 获取密码
		var upwd = $("upwd").value;
		if (isEmpty(upwd)) {
			// 通过innerHTML赋值
			$("validate").innerHTML = '密码不能为空！';
			return;
		}
		if (upwd.length < 6 || upwd.length > 12) {
			$("validate").innerHTML = '密码长度在6-12位之间！';
			return;
		}
		if (upwd.indexOf(uname) > 0) {
			$("validate").innerHTML = '密码不能包含用户名！';
			return;
		}

		// 获取年龄
		var ages = document.getElementsByName("uage");
		// 获取第二个单选框是否被选中
		var cked = ages[1].checked;
		if (!cked) {
			$("validate").innerHTML = '年龄必须选择你懂得！';
			return;
		}
		
		// 获取爱好
		var ufavs = document.getElementsByName("ufav");
		var favs = '';
		// 遍历
		for (var i = 0; i < ufavs.length; i++) {
			if (ufavs[i].checked){
				favs += ufavs[i].value + ",";
			}
		}
		// 判断是否选中
		if (isEmpty(favs)) {
			$("validate").innerHTML = '必须选择一项爱好！';
			return;
		}
		favs = favs.substring(0,favs.length);

		// 获取下拉框
		var city = $("ufrom").value;
		 if (city == -1){
			 $("validate").innerHTML = '请选择你的城市！';
			 return;
		 }
		
		$("validate").innerHTML = '';
		
		// 设置表单提交的地址
		$("myform").action = "http://www.baidu.com";
		// 提交表单
		$("myform").submit();
	}
	
	/**
	 * 判断字符串是否为空
	 * 	如果为空，返回true
	 * 	如果不为空，返回false
	 * @param {Object} 
	 */
	function isEmpty(str) {
		if (str == null || str.trim() == "") {
			return true;
		}
		return false;
	}
	
</script>

DOM对象

DOM：Document Object Model 文档对象模型

操作 htm。
提供了用程序动态控制 html 接口描绘了一个层次化。
的节点树，运行开发人员添加、移除和修改页面的某一部分。

节点

html --> 文档节点
div --> 元素节点
title --> 属性节点
测试 Div --> 文本节点

树!树!到处都是树!

测试 Div

节点类型

   HTML内容

```
          例如                
```

文档节点

    文档本身

```
整个文档document  
```

元素节点
- 所有的HTML元素
  - ```
            、                   
```
属性节点
- HTML元素内的属性
  - id、href、name、class

文本节点

 元素内的文本

```
          hello               
```

注释节点
- ```
HTML中的注释   
```

操作元素的节点

操作被解析成DOM树的HTML文档中的DOM对象，增删改查；

获取节点

通过Document对象提供的方法，查找、
定位某个对象（也就是我们说的节点）
- getElementById()
  - 根据id获取dom对象，如果id重复，那么以第一个为准
- getElementsByTagaName
  - 根据标签名获取dom对象数组
- getElementsByClassName
  - 根据样式名获取dom对象数组
- getElementsByName
  - 根据name属性获取dom对象数组，常用于多选获取值
创建节点和插入节点
- createElement( )
  - 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
- createTextNode( )
  - 创建一个文本节点，可以传入文本内容
- innerHTML
  - 也能达到创建节点效果，直接添加到了指定位置
- write( )
  - 将任意的字符串插入到文档中
- appendChild( )
  - 向元素中添加新的子节点，作为最后一个子节点
- insertBefore( )
  - 向指定的已有的节点之前插入新的节点
  - newItem：要插入的节点
  - exsitingItem：参考节点需要参考父节点
间接查找节点
间接查找节点
- 红色
- 绿色

BOM对象

BOM的核心对象是window，它表示浏览器的一个实例。window 对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的
任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames 集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架的名称来访问相应的window对象。

windows对象方法

系统对话框
- 浏览器通过（实际是window对象的方法）alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息。
  
  （1）消息框:alert，常用。
  alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
  （2）输入框:prompt，返回提示框中的值。
  prompt() 方法用于显示可提示用户进行输入的对话框。
  参数（可选）：
  第一个参数：要在对话框中显示的纯文本。
  第二个参数：默认的输入文本。
  （3）确认框:confirm，返回 true/false.
  confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
打开窗口
- window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口。
关闭窗口
- window.close()：关闭窗口。
  
  例：点击按钮关闭当前窗口。
时间函数
- setTimeout( )
  
  var id = setTimeout(function,times);
  
  clearTimeout(id);
  在times毫秒后执行function指定的方法，执行之前也可以取消
  - ```
    在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识；也可以通过返回的标识cliearTimeout(id)： 来清除指定函数的执行。
```
- setInteval( )
  
  var id = setInterval(function,times);
  
  clearInterval(id);
  
  function test(){
  console.log(“…”);
  }
  // window是一个全局对象，通过全局对象调用 setInterval( ) 函数
  window.setInterval(test,1000);
  - setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

history对象

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)，到上一个页面。

location对象

location 对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过window.location 属性来访问。

location 对象的属性 href：设置或返回完整的 URL

location 对象的方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。

事件

简介：
JavaScript应用跳动的心脏；
Web页面交互，事件发生；
JS可以监听特定事件的发生并规定响应；

作用：
验证用户输入的数据
增加页面的动感效果
增强用户的体验度

事件类型

Window 事件属性：针对 window 对象触发的事件（应用到标签）；
Form 事件：由 HTML 表单内的动作触发的事件（应用到几乎所有HTML 元素，但最常用在 form 元素中）；
Keyboard 事件 : 键盘事件；
Mouse 事件：由鼠标或类似用户动作触发的事件；
Media 事件：由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如、、、以及几个常用的事件：
onclick 、onblur 、onfocus 、onload 、onchange 、onmouseover、onmouseout、onkeyup、onkeydown

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

鼠标事件
键盘事件
HTML事件

事件流和事件模型

事件流：是指页面接受事件的顺序
事件顺序有两种类型：事件捕获和事件冒泡。

1）IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）：
如果点击了页面中的

元素，那么这个click事件会按照如下顺序传播：
1、

2、
3、
4、document

2）Netscape提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
元素就会按下列顺序触发click事件：
1、document
2、
3、
4、
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。