前端-JavaScript

最新推荐文章于 2024-07-17 15:26:15 发布

cqk先生

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量140

点赞数

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_47377075/article/details/129784193

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

概述

JavaScript 是由网景公司发明，运行在浏览器的编程语言。

JavaScript 是一种基于 ECMAScript 规范的脚本语言，并在此基础上进行了自己的封装。

ECMAScript 不是一种编程语言，仅仅是一种脚本语言规范，由ECMA制定国际标准化组织制定，任何基于此规范实现的脚本语言都要遵守它的约定。

发展历史

年份	事件
1995年	网景推出 JavaScript
1996年	微软退出兼容 JavaScript 的JScript (为了更好的服务自家的浏览器)
1997年	发布 ECMAScript 1.0 规范
…	中间很混乱
2009年	发布ECMAScript 5.0 规范
2015年	发布ECMAScript 6.0 规范 (ES6)

构成

ECMAScript 是 JavaScript 标准，但是实际上 JavaScript 的含义却要更大一些，一个完整的JavaScript实现应该由以下三个部分构成：

ECMAScript 标准的实现
操作 DOM(文档对象模型)
操作 BOM(浏览器对象模型)

特点

解释型语言
- 解释型值语言源代码不需要被编译为机器码执行，而是先翻译成中间代码，再由解释器对中间代码进行解释运行；
- 优点：开发和学习简单；
- 缺点：运行速度较慢。
动态语言弱类型的编程
- 定义变量不用指定数据类型，第一次给变量赋值时编程语言在内部记录数据类型。
基于原型的面向对象
- 后续介绍；
- Java 是基于类的面向对象。

快速入门

JavaScript 是是浏览器解释执行的脚本语言。

脚本位于 body 或 head 中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello JavaScript</title>
    <script>
          alert("Hello JavaScript！head");
    </script>
</head>
<body>
     <script>
         alert("Hello JavaScript！ body");
     </script>
</body>
</html>

脚本写在.js的脚本文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello JavaScript</title>
    <script src="js/demo.js"></script>
</head>
<body>
</body>
</html>

window.alert()

window 是 JavaScript内置对象，表示的是浏览器；
alert() 是该对象的一个函数，作用是浏览器弹框提示。

<!DOCTYPE html>
<html>
    <body>
        <h1>我的第一个页面</h1>
        <p>我的第一个段落。</p>
        <script>
            window.alert("Hello JavaScript");
        </script>
    </body>
</html>

document.write()

document 是 JavaScript 的内置对象，给对象表示HTML文档；
write() 方法输出内容到浏览器的body区域。

<!DOCTYPE html>
<html>
    <body>
        <h1>我的第一个 Web 页面</h1>
        <p>我的第一个段落。</p>
        <script> 
            document.write("Hello JavaScript"); 
        </script>
    </body>
</html>

onclick()

onclick 是 JavaScript 的事件，表示鼠标左键单击时触发的动作。

<!DOCTYPE html>
<html>
    <body>
        <h1>我的第一个 Web 页面</h1>
        <p>我的第一个段落。</p>
        <button onclick="myFunction()">点我</button>
        <script> 
            /* 定义函数 */
            function myFunction() {
                document.write("Hello JavaScript");
            } 
        </script>
    </body>
</html>

innerHTML

获取和改变HTML标签的内容。

<!DOCTYPE html>
<html>
    <body>
        <h1>我的第一个 Web 页面</h1>
        <p id="demo">我的第一个段落</p>
        <script> 
            document.getElementById("demo").innerHTML = "abc"; 
        </script>
    </body>
</html>

console.log()

在浏览器的控制台打印输出内容。

<!DOCTYPE html>
<html>
    <body>
        <h1>我的第一个 Web 页面</h1>
        <script> 
            console.log(c); 
        </script>
    </body>
</html>

基础语法

注释

单行注释
多行注释

//开始学习JavaScript

/*
开始学习JavaScript
开始学习JavaScript
开始学习JavaScript
*/

标识符

变量名、函数名、函数参数名、对象名、属性名等统称为标识符，标识符是程序员自己命名的。

标识符由字母、数字、下划线 _ 、美元符号 $ 组成；
不能以数字开头；
标识符不能是 JavaScript 的保留关键字；
标识符建议采用驼峰命名法。

关键字

在 JavaScript 中，一些标识符是保留关键字，不能用作变量名或函数名。

参考：https://www.runoob.com/js/js-reserved.html

基本语法

语句以分号结束
- JavaScript并不强制要求在每个语句的结尾加; ，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;
语句块用花括号
JavaScript 严格区分大小写

{
  console.log('Hello JavaScript')
  console.log('Hello JavaScript');
}

作用域

JavaScript 中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(ES6) 中新增了块级作用域。块作用域由 { } 包括，if 语句和 for 语句里面的 { } 也属于块作用域。

变量

var 定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问；
let 定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问；
const 用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改；
同一个变量只能使用一种方式声明；
let 和 const 是ECMAScript 6 新增。

全局变量：声明在函数、代码块外部的变量

<script>
  	var a = 100; 		//全局变量
    let b = 200; 		//全局变量
    const c = 300; 	//全局变量
    {
        console.log(a); //100
        console.log(b); //200
        console.log(c); //300
    } // 代码块中可以访问全局变量
  
    (function () {
        console.log(a); //100
        console.log(b); //200
        console.log(c); //300
    })() // 函数内部可以访问全局变量
</script>

局部变量：声明在函数、代码块内部的变量

通过var定义的变量可以跨块作用域访问到

<script>
    {
        var a = 100;   // 全局变量 
        let b = 200;   // 局部变量
        const c = 300; // 局部变量
    }
    console.log(a); // 100 通过var定义的变量可以跨块作用域访问到
    console.log(b); // b is not defined
    console.log(c); // b is not defined

    (function A() {
        var aa = 100;   // 局部变量
        let bb = 200;   // 局部变量
        const cc = 300; // 局部变量
    })();
    // console.log(aa); // aa is not defined 通过var定义的变量不能跨函数作用域访问到
    // console.log(bb); // bb is not defined
    // console.log(cc); // bb is not defined
</script>

子作用域可以访问父作用域的变量

<script type="text/javascript">
	{
		var a = 1;
		let b = 2;
		const c = 3;	
		{
			console.log(a);		// 1	子作用域可以访问到父作用域的变量
			console.log(b);		// 2	子作用域可以访问到父作用域的变量
			console.log(c);		// 3	子作用域可以访问到父作用域的变量
			var aa = 11;
			let bb = 22;
			const cc = 33;
		}
		console.log(aa);	// 11	// 可以跨块访问到子块作用域的变量
		// console.log(bb);	// 报错	bb is not defined
		// console.log(cc);	// 报错	cc is not defined
	}
</script>

数据类型

字符串

JavaScript 的字符串就是用 '' 或""括起来的字符表示。
如果 ' 本身也是一个字符，那就可以用 "" 括起来：
- "I'm OK"
如果字符串内部既包含'又包含"怎么办？可以用转义字符\来标识：
- 'I\'m \"OK\"!'
ES6新增：使用反引号表示多行字符串

`这是一个
多行
字符串`;

ES6新增：模版字符串：

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

浏览器不支持支持ES6模板字符串，字符串改为 + 连接的普通字符串：

数字

JavaScript 不区分整数和浮点数；
NaN 表示 Not a Number，当无法计算结果时用 NaN 表示；
Infinity 表示无穷大，当数值超过了JavaScript 的数字所能表示的最大值时，就表示为Infinity；

布尔类型

true
false

undefined

表示引用的变量未定义。

对象

以上数据类型之外的数据类型，都称为 object(对象)。

null
Array（数组）
Date（日期）
Map（ES6新增）
Set（ES6新增）
…

typeof

使用 typeof 操作符可以用来检查一个变量的数据类型。

<script>
    console.log(typeof 'hello'); 		// string
    console.log(typeof "hello"); 		// string
    console.log(typeof 100);		 		// number
    console.log(typeof 100.0);   		// number
    console.log(typeof NaN);				// number
    console.log(typeof Infinity);		// number
    console.log(typeof true);				// boolean
    console.log(typeof false);    	// boolean
  	console.log(typeof undefined); 	// undefined
  	let username;
  	console.log(typeof username); 	// undefined
    console.log(typeof null);				// object
</script>

运算符

算术运算符

var y = 5

运算符	描述	例子	x运算结果	y运算结果
+	加法	x = y + 2	7	5
-	减法	x = y - 2	3	5
*	乘法	x = y * 2	10	5
/	除法	x = y / 2	2.5	5
%	取模	x = y % 2	1	5
++i	自增	x = ++y	6	6
i++	自增	x = y++	5	6
–i	自减	x = --y	4	4
i–	5	x = y–	5	4

boolean 类型参与算术运算 true 会自动转换为数值 1，false 会自动转化为数值 0
undefined 和 NaN 参数算术运算，返回值为 NaN.

<script>
   console.log(100 + true); 	// 101
   console.log(false - 100);	//-100
   console.log(100 + undefined); // NaN
   console.log(100 + NaN); // NaN
</script>

赋值运算符

var x = 10, y = 5

运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

比较运算符

var x = 5

运算符	描述	比较	返回值
==	等于	x8 x5	false true
===	绝对等于（值和类型均相等）	x===“5” x===5	false true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等或两个都不相等）	x!==“5” x!==5	true false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

===：不会发生类型的自动转化；
==：会发生类型自动转化。

<script>
    let x = 10;
    let y = '10'
    console.log(x == y);        // true
    console.log(x === y);       // false
    console.log(true == 1);     // true
    console.log(true === 1);    // false
    console.log(false == 0);    // true
    console.log(false === 0);   // false
</script>

逻辑运算符

var x=6 ,y=3

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x5 \|\| y5) 为 false
!	not	!(x==y) 为 true

三元运算符

条件表达式的基本的语法是：

条件表达式1 ? 表达式2 : 表达式3;

执行此表达式时，先判断条件即:逻辑表达式1的值，若为true，则整个三目运算的结果为表达式2的值，否则整个运算结果为表达式3的值。

数据类型转换

转换为字符串

‘+’ 运算符除了用来做算术的加法运算，还可以用来做字符串的拼接。

<script>
    console.log('100' + '100'); //100100
    console.log('100' + 100);   //100100
    console.log('100' + true);  //100true
    console.log('100' + undefined); // 100undefined
    console.log('100' + NaN);       // 100NaN
</script>

将其它数据类型转换为字符串有三种方式：toString()、String()、字符串拼接。

<script>
    let a = 100;
    console.log(a + '100');             // 100100 字符串拼接
    console.log(a.toString() + 100);    // 100100
    console.log(String(a) + 100);   // 100100
</script>

转换为数值

有三个函数可以把非数值转换为数值：Number()、parseInt()、parseFloat()

Number() 可以用来转换任意类型的数据，而后两者只能用于转换字符串
parseInt() 将字符串转换为整数
parseFloat() 将字符串转换为浮点数
boolean 类型参与数学计算可以自动转换为数值
无法完成转换时返回 NaN

<script>
    let x = '100';
    let y = '100.2';
    let z = 'abc';
    console.log(Number(x) + 100);       // 200
    console.log(Number(y) + 100);       //200.2
    console.log(parseInt(x) + 100);     // 200
    console.log(parseFloat(y) + 100);   //200.2
    console.log(Number(z));             //NaN
    console.log(parseInt(z));           //NaN
    console.log(parseFloat(z));         //NaN
</script>

流程控制语句

分支语句

if else

if…else语句完成了程序流程中的分支功能，如果其中的条件成立，则程序执行相应的语句。

if…else语句的语法如下：

if(条件){
   执行语句
}


if(条件){
     执行语句
} else {
     执行语句
}

if(条件){
     执行语句
} else if (条件)
   执行语句
   ....
}else{
   执行语句
}

switch

分支语句 switch 可以根据一个变量的不同取值而采取不同的处理方法。

switch (expression){
     case const1:
         语句1
     case const1:
         语句2
     ……
     default:
         语句N
}

循环语句

for 循环

for (初始化部分；条件部分；更新部分){
  // 语句;
}

while 循环

while(条件) {
   // 语句;
}

do while 循环

do{
   //语句;
}while(条件)

break

break语句是结束当前的循环，并把程序的控制权交给循环的下一条语句。这里是结束循环，循环到此为止

continue

continue语句是结束当前的某一次循环，但是并没有跳出整个的循环。这里是结束一次循环，整个循环还在进行

常用对象

数组

JavaScript 的数组可以包含任意数据类型，并通过索引来访问每个元素。

声明数组

方式一

var myCars = new Array(); 
myCars[0] = "Saab";       
myCars[1] = "Volvo";
myCars[2] = "BMW";

方式二

var myCars = new Array("Saab","Volvo","BMW");

方式三

var myCars = ["Saab","Volvo","BMW"];

常用方法

方法	描述
indexOf(‘java’)	搜索数组中的元素，并返回它所在的位置。
lastIndexOf()	返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
sort()	对数组的元素进行排序。
toString()	把数组转换为字符串，并返回结果。

代码示例

<script>
    function test() {
        //两种定义数组的方式
        var a = new Array();
        var a2 = [];  //更常用！
        //初始化方式
        a[0] = 123;
        a[1] = new Date();
        var a3 = [123, "45", new Date(), true];
        alert(a);
        alert(a3.length);
        a3.length = 2;  //改变数组长度，清掉后面的元素！
        alert(a3);
        a3.length = 0;  //直接清空数组
        alert(a3);
    }
    function test2() {
        var a = [1, 2, 3, 4, 5];
        a.push("ppp");   //数组末尾添加一个项
        alert(a);
        a.pop();         //删除数组最后一个项 
        alert(a);
        a.unshift("aa"); //在数组第一个元素位置添加元素
        alert(a);
        a.shift();       //删除数组第一个元素
    }
</script>

String

String 对象是字符串的包装对象。

声明字符串对象：

var str = new String("Hello JavaScript");

常用方法：

方法	描述
charAt()	返回在指定位置的字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf()	从后向前搜索字符串。
match()	查找找到一个或多个正则表达式的匹配。
replace()	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
search()	查找与正则表达式相匹配的值。
split()	把字符串分割为字符串数组。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白
valueOf()	返回某个字符串对象的原始值。

Number 对象

Number 对象是原始数值的包装对象。

Number 创建方式 new Number()。

常用方法：

方法	描述
toString()	把数字转换为字符串，使用指定的基数。
valueOf()	返回一个 Number 对象的基本数字值。

Boolean 对象

Boolean（布尔）对象用于将非布尔值转换为布尔值（true 或者 false）。

var b = new Boolean();

如果布尔对象无初始值或者其值为:

0、null、""、false、undefined、NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 “false” 时）。

Date对象

var curr = new Date();

常用方法:

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setTime()	setTime() 方法以毫秒设置 Date 对象。
toDateString()	把 Date 对象的日期部分转换为字符串。
toJSON()	以 JSON 数据格式返回日期字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()	据本地时间格式，把 Date 对象转换为字符串。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
valueOf()	返回 Date 对象的原始值。

自定义对象

let obj = {
  name : '张三',
  sayHi : function(){
    alert('Hello')
  }
}
alert(obj.name)
obj.sayHi()

函数

定义函数

function fun1（参数）{
	  // 代码部分;
    return 返回值;
}

使用 function 关键字定义函数；
函数可以有一到多个参数，也可以没有参数；
return 后面是函数的返回值，返回值可以是任意数据类型；
函数没有返回值，return 语句可以省略；
执行没有返回值的函数，返回结果为 undefined ；

函数的参数和返回值

没有返回值的函数：

function m1() {
    console.log('m1.....');
}
// 调用函数
m1();

有返回值的函数：

function m2() {
    return 'Hello';
}
var r = m2();
console.log(r);

有返回值和参数的函数：

// 定义一个有返回值,有参数的函数
function m3(a, b) {
    return a + b;
}
console.log(m3(100, 200));
console.log(m3('Hello', 'World'));
console.log(m3(undefined, undefined)); //NaN
console.log(m3(null, 100));
console.log("------------------------");

调用函数时传入的参数个数可以和函数定义的参数个数不一样：

function m4(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
// 调用函数时传入的参数个数可以少于函数定义的参数个数
m4(100);
console.log("------------------------");

函数作为另一个函数的参数：

//函数作为另一个函数的参数
function m7() {
    console.log("m7...")
}

function m8(a, b) {
    console.log(a);
    b();
}
m8(100,m7);

函数作为另一个函数的返回值：

// 函数作为另一个函数的返回值
function m9(a){
    return function(a){
        console.log(a)
    }
}
var m10 = m9();
m10(100);

匿名函数

// 定义一个匿名函数，赋值给一个变量
let m5 = function(){
    console.log('m5....')
};
// 通过变量调用函数
m5();


// 定义匿名函数、同时调用匿名函数
(function(a){
    console.log('m6...')
    console.log(a)
})(100);

可变参数

 function m11(a, ...b) {
   console.log(a)
   console.log(b)
 }
m11(100, 10, 20, 30);

可变参数是 ES6 新增语法；
可变参数必须是最后一个参数；
可变参数是一个数组；

事件和监听

绑定事件

element.addEventListener("click", myFunction);

例子：

常用事件

BOM 操作

浏览器对象模型（Browser Object Model）

window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

常用方法：

open(URL,windowName,parameterList)
open 方法创建一个新的浏览器窗口，并在新窗口中载入一个指定的URL地址

channelmode=yes\|no\|1\|0	是否使用剧院模式显示窗口。默认为 no。
directories=yes\|no\|1\|0	是否添加目录按钮。默认为 yes。
fullscreen=yes\|no\|1\|0	是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels	窗口文档显示区的高度。以像素计。
left=pixels	窗口的 x 坐标。以像素计。
location=yes\|no\|1\|0	是否显示地址字段。默认是 yes。
menubar=yes\|no\|1\|0	是否显示菜单栏。默认是 yes。
resizable=yes\|no\|1\|0	窗口是否可调节尺寸。默认是 yes。
scrollbars=yes\|no\|1\|0	是否显示滚动条。默认是 yes。
status=yes\|no\|1\|0	是否添加状态栏。默认是 yes。
titlebar=yes\|no\|1\|0	是否显示标题栏。默认是 yes。
toolbar=yes\|no\|1\|0	是否显示浏览器的工具栏。默认是 yes。
top=pixels	窗口的 y 坐标。
width=pixels	窗口的文档显示区的宽度。以像素计。

window.open(d,"windowname","width=500,height=400,resizable=no,
            scrollbars=yes,status=yes,toolbar=yes,menubar=yes,location=no");

close()：close方法关闭一个浏览器窗口
alert()
setTimeout(code,millisec)
- code：必需，要执行的 JavaScript 代码；
- millisec：必需，在执行代码前需等待的毫秒数。
prompt("请输入用户名");
confirm("确认要退出?");

history 对象

<a href="#" onclick="javascript:history.go(-1);">后退</a>
<a href="#" onclick="javascript:history.go(1);">前进</a>

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

location 对象

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 返回网页的url地址k

DOM操作

DOM模型介绍

DOM模型的全称是：Document Object Model，即：文档对象模型，它定义了操作文档对象的接口。

查找元素

document.getElementById()
document.getElementsByTagName("a")
- 返回所有 a 标签的数组
document.getElementsByName("abc")
- 返回所有 name 属性为 “abc” 的标签的数组。
document.getElementsByClassName("abc")
- 返回所有 class 属性为 “abc” 的标签的数组。

处理属性节点

元素结点.属性名称（可以读写属性值）

使用 setAttritbute(), getAttribute() 添加和设置属性

var div = document.getElementById("div1");
//div.title = "今天天气好"; //直接设置属性
div.setAttribute("title","今天天气好");//使用方法设置属性
alert(div.title);
alert(div.getAttribute("title"));

处理文本结点

innerHTML
innerText

表单操作

获取表单对象的方法

document.forms[i] //得到页面中的第i个表单。
document.forms[formName] //得到页面中相应 name 的表单
document.getElementById(formId) // 根据id获取表单

form 对象常用属性

属性	描述
action	返回或者设置action属性
elements	获取一个数组，包括该表单中所有的表单域对象
length	返回表单的表单域的数量
method	返回或设置表单的method属性
name	返回或设置表单的name属性

form对象常用方法

方法	描述
submit()	相当于单击submit按钮，表示表单提交到指定页面
reset()	相当于单击reset按钮，表示所有表单域到初始值

form对象常用事件

事件	描述
onsubmit	在表单提交之前触发
onreset	在表单被重置之前触发

表单域通用属性和方法

引用表单域的四种方法
- form.name;
- form.elements[i];
- form.elements[name];
- document.getElementById(id);
disabled 属性
- 使表单域不能接受用户的操作，变为只读
name 属性
- 获取或设置表单域的名称
value 属性
- 获取或设置表单域的值
type 属性
- 获取表单域的类型
focus() 方法
- 使表单域获得焦点
blur() 方法
- 使表单域失去焦点

单选按钮组

for (var i = 0; i < radioGroup.length; i++) {
    if (radioGroup[i].checked) {
        selected = radioGroup[i];
        alert(selected.value);
        break;
    }
}

复选框

复选框的处理类似单选按钮

下拉列表的

使用 value 属性获取和设置下拉列表选中选项的值
使用 selectedIndex 属性获取当前被选中选项的索引
使用 options 属性获取所有选项集合
使用 option对象的 value属性和text属性, 可以读写这两个属性。
使用 option 对象的 selected 属性选中该option

var cars = document.form1.cars;
alert(cars.value);
cars.value="6";
alert(cars.value);
alert("selectedIndex:"+cars.selectedIndex);
var a = cars.options;   //返回的是一个数组
a[1].text="奇瑞";
a[1].value="99";
alert(a[1].text);
alert(a[1].value);
var a = cars.options;
alert(a[1].selected);
a[1].selected=true;

表单验证操作

应用验证函数的两种常用的方法：

<input type="submit" onclick="return validate()"/>
<form action="a.jsp" onsubmit="return validate()"/>
/*若返回false,则不提交表单。 
*/

案例：

用户名长度为：5-10
密码长度为：5-10
确认密码框必须跟密码框的值相等
爱好：学java，用java，教java。必须至少选中一项
不符合，旁边给出提示。并且不能提交！

面向对象编程

Object 对象

Object 类型，我们也称为一个对象。是JavaScript中的引用数据类型。
它是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。
对象也可以看做是属性的无序集合，每个属性都是一个名/值对。
对象除了可以创建自有属性，还可以通过从一个名为原型的对象那里继承属性。
除了字符串、数字、true、false、null 和 undefined 之外，JavaScript中的值都是对象。
(var i = 0; i < radioGroup.length; i++) {
if (radioGroup[i].checked) {
selected = radioGroup[i];
alert(selected.value);
break;
}
}




## 复选框

复选框的处理类似单选按钮



## 下拉列表的

- 使用 value 属性**获取和设置**下拉列表选中选项的值
- 使用 selectedIndex 属性获取当前被选中选项的 索引 
- 使用 options 属性获取所有选项集合 
- 使用 option对象的 value属性和text属性, 可以读写这两个属性。 
- 使用 option 对象的 selected 属性选中该option

```javascript
var cars = document.form1.cars;
alert(cars.value);
cars.value="6";
alert(cars.value);
alert("selectedIndex:"+cars.selectedIndex);
var a = cars.options;   //返回的是一个数组
a[1].text="奇瑞";
a[1].value="99";
alert(a[1].text);
alert(a[1].value);
var a = cars.options;
alert(a[1].selected);
a[1].selected=true;

表单验证操作

应用验证函数的两种常用的方法：

<input type="submit" onclick="return validate()"/>
<form action="a.jsp" onsubmit="return validate()"/>
/*若返回false,则不提交表单。 
*/

案例：

用户名长度为：5-10
密码长度为：5-10
确认密码框必须跟密码框的值相等
爱好：学java，用java，教java。必须至少选中一项
不符合，旁边给出提示。并且不能提交！

面向对象编程

Object 对象

Object 类型，我们也称为一个对象。是JavaScript中的引用数据类型。
它是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。
对象也可以看做是属性的无序集合，每个属性都是一个名/值对。
对象除了可以创建自有属性，还可以通过从一个名为原型的对象那里继承属性。
除了字符串、数字、true、false、null 和 undefined 之外，JavaScript中的值都是对象。

cqk先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-JavaScript

前端-JS
复制链接

扫一扫

专栏目录