JavaScript

已于 2022-10-25 21:11:43 修改
阅读量1k 收藏 8
点赞数
分类专栏： 前端 文章标签： javascript
于 2022-10-25 20:22:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51617439/article/details/127520916
版权

前端系列
一、HTML5
二、CSS
三、JavaScript
四、jQuery
五、BootStrap
六、Element
七、Ajax
八、JSON
九、VUE3

第一章、JavaScript概述

1、概述

JavaScript是一种脚本语言。JavaScript可以实现动态页面。

BOM：浏览器模型

DOM：文档对象模型

2、JavaScript的特点

  1. 动态改变页面内容

  2. 动态改变网页的外观

  3. 验证表单数据

  4. 响应事件

2、JavaScript的预解析：

  1. 预解析：js引擎会把js里面所有的 var 还有 function提升到当前作用域的最前面
  2. 代码执行：按照代码书写的顺序从上往下执行
  3. 预解析分为变量预解析（变量提升）和函数预解析（函数提升)
  4. 变量提升：就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作。

3、页面使用javascript的方法

第一种、在标签的属性中插入JavaScrip
<button onclick="alert('hello');">我是按钮</button>  
<a href="javascript:alert('aaa');">超链接</a>




第二种、使用<script>在HTML页面中插入JavaScrip
<body>
	<script type="text/javascript">
		alert( "hello javascript");
	</script>
</body>


第三种、引用外部JS文件
script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略 ,如果需要则可以在创建一个新的script标签用于编写内部代码。
<script type="text/javascript" src="js1.js"></script>

第二章、JavaScript程序设计

一、JavaScrip的基本语法

1、标识符：由字母、数字、下划线、美元符组成，数字不能使首位，不能是关键字。

2、JS严格区分字母大小写。

3、代码以空格和括号分隔，以分号结尾。

4、注释：单行注释 //、多行注释 /* */

5、; 空语句

二、基本数据类型

1、JavaScrip数据类型

  1. number(数值)类型：整数、浮点数、Infinity(无穷大)、-Infinity(无穷小)、NaN(无定义类型)

  2. string(字符)类型：string str = “hello”;

  3. boolean(布尔)类型：true、false

  4. null类型：空值

  5. Undefined类型：未定义

  6. object(对象)类型：

2、数据类型转换

  1. 转换成字符串

调用被转换数据的toString()方法

这个方法不适用于null和undefined，由于这两个类型的数据中没有方法，所以调用toString()时会报错
var a = 123;
a = a.toString();

调用String()函数

var a = 123;  
a = String(a);

原理：对于Number Boolean String都会调用他们的toString()方法来将其转换为字符串，对于null值，直接转换为字符串”null”。对于undefined直接转换为字符串”undefined”

使用一元 “+”

var a = true;  
a = a + "";

  1. 转换成数值型

    调用Number()函数

var s = "123";  
s = Number(s);

如果字符串是一个合法的数字，则直接转换为对应的数字
如果是一个空串或纯空格的字符串，则转换为0
如果字符串是一个非法的数字，则转换为NaN
true转换为1
false转换为0
null转换为0
undefined 转换为NaN

parseInt()和parseFloat()

var a = "123.456px";

a = parseInt(a); // 字符串转换成整数 123
a = parseFloat(a); // 字符串转换成浮点数 123.456

使用一元 “+”

var a = "123";  
a = +a;

三、JavaScript的变量与常量

1、JavaScript的变量是弱数据类型，定义时没有区分数据类型，在使用时会自动转换数据类型。

2、常量

字符串常量："你好，世界！"
数值型常量：0; 1; 1.5;
布尔型常量：true; false;
特殊常量：空值; 控制字符;

3、变量

定义变量：var 变量名=值;

创建方法一：先创建在赋值
var x;
x=1;

创建方法二：创建并赋值
var name="zhangsan";

3、全局变量与局部变量

var x=10, y=20; // 全局变量

function dome1(){
    var z=30; // 局部变量
    x = 40; //全局变量
}
dome();//函数调用

变量的作用域：局部变量只在局部有效，全局变量整个程序有效。
变量冲突：全局变量与局部变量重名，在局部里局部变量会覆盖全局变量，使全局变量不生效。出了局部，局部变量不生效。

四、输出语句和输入语句

1、输出语句

（1）用document对象的write()方法
document.write("hello"); //页面输出

（2）用window对象的alert()方法
alert("hello"); //弹窗输出

（3）输出到开发者工具的控制台中
console.log("要输出的内容");

2、输入语句

（1）用window对象的prompt()方法
prompt();

（2）用文本框输入，使用onBlur事件处理程序得到文本框中的内容
<form name="chform" method="POST">
	请输入：<input type="text" name="textname" onblur="test(this.value)" value="" size="10"> 
</form>

<script language="JavaScript">
	function test(str){
		alert(str);
	}
</script>

五、JavaScript的关键字

1、控制流：if-else、for、for-in、while、break、continue、return

2、常数/文字：NaN、null、turn、false、Infinity、NEGATIVE_INFINITY、POSITIVE_INFINTY

3、赋值：=、OP=

4、对象：Array、Boolean、Date、Function、Global、Math、Number、Object、String

5、函数：

funtion：定义函数

Function：定义动态函数

6、对象创建：

new：创建对象

7、其他：

var：创建变量
this：在一个方法内引用当前对象。
with：使用对象

六、JavaScript的运算符

typeof运算符

用来检查一个变量的数据类型，它会返回一个用于描述类型的字符串作为结果。

typeof 变量;

1、算数运算符

+、-、*、%、/、++、–

2、赋值运算符

=、+=、-=、*=、/=、%=

3、字符操作

连接+

4、比较运算符

==、!=、>、<、>=、<=

5、逻辑运算符

&&、||、！

6、其他运算符

逗号 , 
按位与 & 
按位或 | 
按位异或 ^ 
非 !
取反：~
按位位移 << >> >>>

自增自减：++、--
删除：delete

6、三目运算符

1 < 2 ? “正确” : “错误”

<p><h2>算数运算符</h2></p>
<p>i = 10, j = 10; i + j = ?</p>
<p id="sumid"></p>
<button onclick="mysum()">结果</button>
<script>
	function mysum() {
		var i = 10;
		var j = 10;
		var m = i + j;          					
    }
</script>


document.getElementById("sumid").innerHTML=m;

七、第一个JavaScript程序

1、内置javascript程序
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>标题</title>
        <script type="text/javascript">
            alert("你好，世界！"); //弹出一个对话框
        </script>
    </head>

    <body></body>
</html>


2、外置javascript程序
// js文件，弹出一个对话框
alert("hello javascript!"); 

// html文件，用于导入js文件
<!DOCTYPE html>
<html lang="en">
<head>
    <title>标题</title>
</head>

<body>
    <!-- 导入外部JavaScript文件 -->
    <script src="./demo01.js" type="text/javascript"></script>
</body>
</html>

七、JavaScript的调试

方式：
alert单框调试、console.log控制台输出调试、document.write()页面输出

作用：
观察变量值的变化规律，是否符合程序设计的目的。

示例：
alert(flag);
Console.log(flag);
document.write(flag);

第三章、流程控制语句

一、条件语句 if - else

1、条件语句：if - else if - else

<p><h2>条件语句</h2></p>
<script>
	var i = 10;
	if (i > 0){
		document.write("i大于0");
	}else if (1==0){
		document.write("i等于0");
	}else{
		document.write("i小于0");
	}
</script>

二、条件分支语句：switch

<script>
	var i = 1;
	switch (i){
		case 1: document.write("哈哈哈哈");break;
		case 2: document.write("嘻嘻嘻嘻");break;
		case 3: document.write("嘿嘿嘿嘿");break;
		case 4: document.write("呵呵呵呵");break;
		case 5: document.write("呜呜呜呜");break;
		default: document.write("条件不满足");break;
	}
</script>

三、循环语句

1、循环语句：for

<script>
	var i = [1,2,3,4,5];
	for (var j=0; j<6; j++){
		document.write(i[j]+"、");
	}
</script>

2、循环语句：while

<p>while</p>
<script>
	var i = 1;
	while (i<10){
		document.write("i="+i+"<br/>");
		i++;
	}
</script>

3、循环语句：do-while

<p>do-while</p>
<script>
	var i = 1;
	do {
		document.write("i="+i+"<br/>");
		i++;
	}while (i<10)
</script>

四、跳转语句

1、跳转语句：break

跳出循环
<script>
	for (var i=0;i<10;i++){
		if (i==5){
			break;
		}
		document.write("i="+i+"<br/>");
	}
</script>

2、跳转语句：continue

跳过本次循环
<script>
	for (var i=0;i<10;i++){
		if (i==5){
			continue;
		}
		document.write("i="+i+"<br/>");
	}
</script>

第四章、函数

一、函数简介

1、函数概述

  1. 内置函数是JavaScript自带的，自定义函数是自己定义的函数。

  2. 函数可以有返回值，也可以没有返回值。函数可以有多个参数，也可以没有参数。

  3. 函数创建完后，需要调用才会产生作用。

  4. 可以使用 函数名.arguments.length; 查看函数的参数。

二、函数创建和调用

1、函数是由事件驱动的，是可重复使用的代码块。

1.创建动态函数函数
//将要封装的代码以字符串的形式传递给构造函数
语法：var 变量名 = new Function(参数列表);
var fun = new Function("console.log('hello 这是我的第一个函数')");


2.使用函数声明创建函数
function 函数名([形参1,形参2...形参N]){  
    语句...  
}

3.匿名函数
var 函数名 = function([形参1,形参2...形参N]){  
    语句...  
};

4.立即执行函数
//函数定义完，立即被调用，这种函数叫做立即执行函数
//立即执行函教往往只会执行一次
(function(){
	alter("立即执行函数");
})

实例

1.创建动态函数函数
var square = new Function("x", "y", "var sum; sum=x+y; return sum;");
var a = square(2,3);


2.使用函数声明创建函数
function fun2 (a, b){
    var c = a+b;
	return c;
}
var v = fun2(1,2);


3.匿名函数
var fun2 = function(x){
	return x+1;
};
var v = fun2(1);


4.立即执行函数
//函数定义完，立即被调用，这种函数叫做立即执行函数
//立即执行函教往往只会执行一次
(function(){
	alter("立即执行函数");
})

三、函数的参数

函数参数：在函数创建时的参数，叫形参。在函数调用时传递的值，叫实参。

//调用函数时解析器不会检查实参的类型,
//调用函数时，解析器也不会检查实参的数量

sum(arg1,arg2)

// 例子
<p>带参数的函数</p>
<script>
	function print(name){
		alert("Hello，我是"+name);
	}
</script>
<button onclick="print('jk')">按钮</button>

2、查看函数参数

可以使用 函数名.arguments; 查看函数的参数个数。
函数名.arguments.length;  查看函数参数的个数。

function f(){
	douction.write(arguments);
}
f(1,2,3,4,5)

四、函数的返回值

//返回值可以时任意数据类型，也可以是对象，也可以是函数。

<p>带返回值的函数</p>
<p id="pid"></p>
<script>
	function hello(){
		return "Hello";
	}
	document.getElementById("pid").innerHTML=hello();
</script>

return：将值返回

五、内置函数

1、常用函数

（1）字符串编码函数

escape() 传入一个字符串URL，进行编码

ecodeURI() 将一个已编码的字符串URL，解码成原始字符串

（2）eval()函数

将一个字符串当做一个JavaScript表达式一样去执行它。

（3）isFinite()函数

判断某一个数是否是一个有限数值。

（4）isNaN()函数

判断一个数是否是NaN类型

第五章、异常处理

一、异常概述

1、异常：当JavaScript引擎执行程序时，发生错误，导致程序停止运行。

2、异常抛出：当异常产生，并将这个异常生成错误信息。

二、异常捕获 try-catch()

try{
	发生异常的代码块；
}catch(err){
	错误信息处理；
}

// 例子
<p>异常捕获</p>
<script>
	function doem(){
		try{
			alert(str);
		}catch(err){
			alert(err);
		}
	}
	dome();
</script>

三、自定义异常 throw

<p>自定义异常</p>
<!-- 创建文本框和提交按钮 -->
<form action="">
	<input type="text" id="tid">
	<input type="button" onclick="dome()" value="按钮" id="bid">
</form>

<script>
	function doem(){
        try{
            var e = document.getElementById("tid").value;
            if (e = ""){
                throw "请输入";
            }
        }catch(err){
            alert(err);
        }
	}
	dome()
</script>

第六章、JavaScript的面向对象

一、面向对象概述

1、概述

  1. 对象是一种数据类型。对象是属性和方法的集合。
  2. JavaScript中的所有事物都是对象：字符串、数值、数组、函数…

2、面向对象的特点

  1. 封装性：将属性和方法封装成对象。
  2. 继承性：子类继承父类的属性和方法。
  3. 多态性：

3、作用域

  1. 全局作用域

直接在script标签中编写的代码都运行在全局作用域中
全局作用域在打开页面时创建，在页面关闭时销毁。
全局作用域中有一个全局对象window，window对象由浏览器提供，
可以在页面中直接使用，它代表的是整个的浏览器的窗口。
在全局作用域中创建的变量都会作为window对象的属性保存
在全局作用域中创建的函数都会作为window对象的方法保存
在全局作用域中创建的变量和函数可以在页面的任意位置访问。
在函数作用域中也可以访问到全局作用域的变量。
尽量不要在全局中创建变量

  1. 函数作用域

函数作用域是函数执行时创建的作用域，每次调用函数都会创建一个新的函数作用域。
函数作用域在函数执行时创建，在函数执行结束时销毁。
在函数作用域中创建的变量，不能在全局中访问。
当在函数作用域中使用一个变量时，它会先在自身作用域中寻找，
如果找到了则直接使用，如果没有找到则到上一级作用域中寻找，
如果找到了则使用，找不到则继续向上找，一直会

变量的声明提前

在全局作用域中，使用var关键字声明的变量会在所有的代码执行之前被声明，但是不会赋值。
所以我们可以在变量声明前使用变量。但是不使用var关键字声明的变量不会被声明提前。
在函数作用域中，也具有该特性，使用var关键字声明的变量会在函数所有的代码执行前被声明，
如果没有使用var关键字声明变量，则变量会变成全局变量

函数的声明提前

在全局作用域中，使用函数声明创建的函数（function fun(){}）,会在所有的代码执行之前被创建，
也就是我们可以在函数声明前去调用函数，但是使用函数表达式(var fun = function(){})创建的函数没有该特性
在函数作用域中，使用函数声明创建的函数，会在所有的函数中的代码执行之前就被创建好了。

二、对象的使用

1、格式

1.定义对象：
1）语法：
对象名称 = {
	属性,
	构造函数,
	方法;
}

2）使用对象字面量创建一个对象时，直接指定对象中的属性
语法：{属性名:属性值,属性名：属性值}
var obj2 = {
	name: "张三", 
	age: 18, 
	sex: "男"
    test: {
    	 name: "李四"
    }
}


2.使用对象
//创建对象
var 变量名 = new 对象名();
var obj = new Object();

//调用对象里的方法：
对象名.方法名();
obj.funcName();

//调用对象里的属性：
对象名称.对象属性;
obj.property;


3.向对象添加属性：prototype
1）对象名.属性名 = 属性值;


2）如果要使用特殊的属性名，不能采用.的方式来操作
向对象添加属性值
	语法: 对象[“属性名"] = 值
读取
语法: 对象[“属性名"]
使用[]这种形式去操作属性，更加的灵活
obj["123"] = 123;
console.log(obj[123]);
，
在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性
var n = "1314";
obj[n] = "一生一世";
console.log(obj[n]);


4.向对象添加方法：
//对象在新增方法时，方法要先定义好。
function 方法名(参数1){
	方法体;
}
对象名.方法名 = 方法名;


5.删除对象中的属性
delete 对象.属性名;
delete 对象["属性名"];


6.删除对象
//使用dalete运算符删除一个对象
var obj = new Object(); 
dalete obj;


7.调用以及遍历对象
1）with：在()写上对象名称，就能在{}里直接引用对象的属性和方法，不需要"."符号。
with(对象名称){
	调用语句;
}

2）for..in：类似于增强for循环，可以对对象里的所有属性进行操作。
for(var 变量 in 对象){
	属性语句;
}

2、实例

1.定义对象
var person = {
    //定义对象的属性
    Name: "Bill",
    age: 18,
    
    //定义构造方法
    function person(name, age){
    	this.name = name;
    	this.age = age;
    }
    
    //定义对象的方法
    print: function() {
    	return this.name + " " + this.age + " ";
    }
};


2.创建对象
var per = new person("张三", 18);

//调用对象里的方法：对象名称.对象方法
Obj.method();

//调用对象里的属性：对象名称.对象属性
Obj.property;


3.向对象添加属性：prototype
//向person对象添加height属性。
person.height = 1.81;


4.向对象添加方法：
//对象在新增方法时，方法要先定义好。
function Hello(){
	document.write("Hello,world!");
}
person.Hello = Hello;


5.删除对象
//使用dalete运算符删除一个对象
var obj = new Object();
dalete obj;


6.调用以及遍历对象
var obj = {
    name: "孙悟空", 
    age: 18,
    gender: "男", 
    address: "花果山",
    
    sayName:function(){
    	console.log("hello");
    }
};

1）with：在()写上对象名称，就能在{ } 里直接引用对象的属性和方法，不需要"."符号。
with (obj) {
    console.log(name);
    sayName();
}

2）for..in：类似于增强for循环，可以对对象里的所有属性进行操作。
for (var n in obj) {
    console.log(n);
}

3、批量创建对象

//批量创建对象
function createPerson(name, age, gender){
    //创建一个新对象
    var obj = new Object();
    //向对象里添加属性
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    obj.sayName = function(){
    	alter(this.name);
    }
    //将新对象返回
    return obj;
}
var obj3 = createPerson("孙悟空", 18, "男");

三、this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this， this指向当前调用对象。

  1. 以函数的形式调用时, this永远都是window

  2. 以方法的形式调用时，this就是调用方法的那个对象

var name = "全局";

//创建一个函数
function fun() {
	console.log(this.name);
}

//创建两个对象
var obj01 = {
	name: "林黛玉",
	sayName: fun
}
var obj02 = {
	name: "贾宝玉",
	sayName: fun
}

//当那个对象调用函数，就输出那个对象的属性
obj01.sayName();

四、构造函数

1、构造函数和普通函数的区别：普通函数是直接调用，而构造函数需要使用new关键字来调用。

2、使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。我们将通过一个构造函数创建的对象，称为是该类的实例。

3、构造函数的执行流程:

  1. 立刻创建一个新的对象
  2. 将新建的对象设置为函数中this
  3. 逐行执行函数中的代码
  4. 将新建的对象作为返回值返回

4、this的情况:

​ 1.当以函数的形式调用时，this是window

​ 2.当以方法的形式调用时，谁调用方法this就是谁

​ 3.当以构造函数的形式调用时,this就是新创建的那个对象

5、构造函数实例

//创建构造函数
function Dog(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = function () {
    	alter(this.name);
    }
}

var dog1 = new Dog("旺财", 2, "雄");

6、使用instanceof可以检查一个对象是否是一个类的实例，返回true或false

语法：对象 instanceof 构造函数

console.log(dog1 instanceof Dog);

五、原型（prototype）

1、概念

  1. 创建一个函数以后，解析器都会默认在函数中添加一个数prototype，prototype属性指向的是一个对象，这个对象我们称为原型对象。

  2. 当函数作为构造函数使用，它所创建的对象中都会有一个隐含的属性执行该原型对象。

    这个隐含的属性可以通过对象.__proto__来访问。

  3. 原型对象就相当于一个公共的区域，凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象。

  4. 我们可以将对象中共有的属性和方法统一添加到原型对象中，这样我们只需要添加一次，就可以使所有的对象都可以使用。

  5. 当我们去访问对象的一个属性或调用对象的一个方法时，它会先自身中寻找，如果在自身中找到了，则直接使用。如果没有找到，则去原型对象中寻找，如果找到了则使用，**如果没有找到，则去原型的原型中寻找，**依此类推。直到找到Object的原型为止，Object的原型的原型为null，如果依然没有找到则返回undefined。

2、hasOwnProperty()

这个方法可以用来检查对象自身中是否含有某个属性

语法：对象.hasOwnProperty(“属性名”)

实例

//创建构造函数
function MyClass(){}

//向构造函数的原型添加属性
MyClass.prototype.name = "张三";

//向构造函数的原型添加方法
MyClass.prototype.sayName = function(){
	alert("Hello,"+this.name);
}

//创建实例
var mc = new MyClass();
//向构造函数添加属性
mc.age = 18;

console.log(mc.name);
console.log(mc.sayName());

//使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
console.log( "name" in mc);

//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性/
console.log(mc.hasOwnProperty("age"));

垃圾回收：就将数据的值重置成null

第六章、JavaScript的内部类

1、Object类
2、包装类

在JS中为我们提供了三个包装类：String() Boolean() Number()

var num = new Number(2);
var str = new String("hello");
var bool = new Boolean(true);
2、Array数组类

1、数组概述:

  1. 使用单独的变量名来存储一系列的值，数组里的元素可以是任何类型。

  2. 数组的下标从0开始。

  3. 不能直接给数组名赋值，一定要通过索引赋值，否则会清空数组。

2、数组的创建:

1.定义数组，创建一个空数组。
var arr1 = new Array();

2.定义一个长度为10的数组
arr2 = new Array(10);

3.使用构造函数创建数组
var arr3 = new Array(1,2,3);

4.定义数组，并初始化赋值。
var myArray = [“Hello", "old", "baby"];

5、二维数组
var arr = [[],[]];


//数组可以放任意数据类型的元素，函数也可以，对象也可以，数组也可以
arr1 = [
    1,
    1.5,
    "hello",
    true,
    null,
    function(){alert(1)},
    {name:"孙悟空"},
    [1,2,3,4,5]
]

3、访问数组，并向数组添加元素

//通过指定数组名以及索引号码，你可以访问某个特定的元素
//语法：数组名[索引] = 值;

arr1[0] = 123;
arr1[1] = "hello";

//向数组最后一位添加元素
arr1[arr1.length] = "JS";

4、获取数组元素

//语法：数组名[索引]
var a = arr1[0];
var b = arr2[1];

5、获取数组长度

var len = arr1.length;

6、修改数组长度

//如果修改的length大于原长度，则多出部分会空出来
//如果修改的length小于原长度，则多出的元素会被册除
arr.lenght = 10;
arr.lenght = 1;

7、数组遍历

var arr = ["1", "2", "3", "4", "5"];

//1.使用for循环遍历
for(var i=0; i<arr.lenght; i++){
	dconsole.log(arr[i]);
}

//2.使用forEach遍历数组
//forEach方法需要一个函数参数
arr.forEach(function(value){
	document.write(value);
});

8、删除数组元素

1.使用关键字delete进行删除
delete arr[0];

// shift() 删除数组的开头的一个元素，并返回被删除的元素
var d = arr.shift();

// pop() 用来删除数组的最后一个元素，并返回被删除的元素
var b = arr.pop();

//splice() 将数组里的元素弹出。
var h = arr.slice(0, 2);

9、数组常用方法:

方法
concat()合并数组!
length()获取数组长度
slice()切割数组，第一个参数是起始下标，第二个参数是结束下标。
splice()多功能：弹出元素，在指定位置插入元素
unshift()在数组开头添加元素
push()在数组末尾追加元素
shift()删除数组中第一个元素
pop()删除数组最后一个元素
toString()将数组转换为字符串
join()将数组以指定的字符连接成字符串，默认是逗号。
lenght()获取数组长度
sort()排序
reverse()数组元素翻转
2、String字符串类

1、String对象：
字符串在底层是以字符串数组形式保存的。String对象用于处理已有的字符串，字符串可以使用单引号或单引号。

2、常用方法：

方法说明
length取字符串的长度
indexOf()返回String对象子字符串第一次出现的位置
lastIndexOf()返回String对象子字符串最后一次出现的位置
concat()连接两个字符串
charAt()通过索引获取指定位置的字符
slice()返回字符串中两个指定下标的子字符串
substring()截取子字符串
split()将字符串以指定的字符分割，返回一个数组
replace()字符串替换
toUpperCase()、tolowerCase()字符串大小写转换
match()使用正则表达式进行匹配
search()返回正则表达式第一个匹配字符串的下标

实例

var str = "Hello world!";

//length 获取字符串的长度
var len = str.length;

// indexOf() 返回String对象子字符串第一次出现的位置
var s2 = str.indexOf("o");


// concat() 连接两个字符串
var s1 = str.concat("hello","合理");


//charAt() 通过索引获取指定位置的字符
var res1 = str.charAt(1);

// substring() 截取子字符串
var s4 = str.substring(0,5);

// split() 将字符串以指定的字符分割，返回一个数组
//如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素|
str5 = "abc ,bcd ,efg,hij";
var s5 = str5.split(",");

// replace() 字符串替换
var str6 = str.replace("Hello", "你好");
3、Date类

1、Date对象:
日期对象用于处理日期和时间

2、创建Date对象

//1.使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
var d = new Date();

//2.创建一个指定的时间对象
//需要在构造函数中传递一个表示时间的字符串作为参数
//日期格式：月/日/年 时:分:秒
var d2 = new Date("12/03/2016 11:10:30");

3、常用方法:

获取时间的方法设置时间的方法
getFullYear()获取具体的日期setFullTear()设置具体日期
getFullYear()获取年份setYear()设置年份
getMonth()获取月份setMonth()设置月份
getDate()获取日期setDate()设置日期
getDay()获取星期setDay()设置星期
getHours()获取小时setHours()设置小时
getMinutes获取分钟setMinutes()设置分钟
getSeconds获取秒数setSeconds()设置秒数
getMilliseconds()获取毫秒setMilliseconds()设置毫秒
getTime()获取时间戳setTime()设置时间戳

实例

//创建一个Date对象
//如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
var d = new Date();

//创建一个指定的时间对象
//需要在构造函数中传递一个表示时间的字符串作为参数
//日期格式：月份/日/年/ 时:分:秒
var d2 = new Date("12/03/2016 11:10:30");


//getDate() -获取当前日期对象是几日
var date = d2.getDate();
//getDay() 获取星期
var day = d.getDay();
//getMonth() 获取当前对象的月份（0-11月）
var month = d.getMonth();
//getFullYear() 获取当前时间对象的年份
var year = d.getFullYear();
// getHours	返回小时
var hours = d.getHours();
//getTime() 获取当前对象的时间戳
var time = d.getTime();

console.log(d); //Fri Apr 29 2022 09:12:12 GMT+0800 (中国标准时间)'
console.log(d2); //Sat Dec 03 2016 11:10:30 GMT+0800 (中国标准时间)
console.log(date); //3
console.log(day); //5
console.log(month); //3
console.log(year); //2022
console.log(time); //1651194732443


//实例
//利用时间戳计算代码执行性能
var start = Date.now();
for (var i = 0; i < 100; i++) {
    console.log(i);
}
var end = Date.now();
console.log("执行了:" + (end - start) + "毫秒");
4、Math类

1、Math对象:
执行常见的算数任务

2、常用方法:

方法说明
Math.ceil()对一个数，进行向上取整
Math.floor()对一个数进行向下取整
Math.round()四舍五入取整
Math.random()返回0~ 1之间的随机数
Math.max()返回多个数中的最大值
Math.min()返回多个数中的最小值
Math.abs()返回绝对值
Math.pow(x,y)返回x的y幂次方

第七章、对象模型

文档对象模型-DOM对象

一、文档对象模型基本概念

文档对象模型，通过DOM可以来任意来修改网页中各个内容

文档：文档指的是网页，一个网页就是一个文档。

对象：对象指将网页中的每一个节点都转换为对象，可以以一种纯面向对象的形式来操作网页了。

模型：模型用来表示节点和节点之间的关系，方便操作页面

节点（Node）：节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点，虽然都是节点，但是节点的类型却是不同的。

节点说明

节点属性节点类型节点值
文档节点（Document）#document9null代表整个网页
元素节点（Element）标签名1null代表网页中的标签
属性节点（Attribute）属性名2属性值代表标签中的属性
文本节点（Text）text3文本内容代表网页中的文本内容

二、DOM操作节点

1、document的常用方法

常用方法
open()打开文档
close()关闭文档
write()向文档写入内容
writeln()向文档追加内容

2、DOM操作文档

常用属性
document.title设置文档的标题（HTML的title标签）
document.bgColor设置背景页面的颜色
document.fgColor设置前景色（文本颜色）
document.cookie设置和读出cookie
documen.URL设置URL属性在同一个窗口打开其他页面
document.linkColor未点击过的链接颜色
document.vlinkColor已点击过的链接颜色
document.alinkColor激活链接颜色
document.charset设置字符集
document.fileSize设置文件大写，（注：只读属性）
document.fileCreatedData文件创建日期（注：只读属性）
document.ModifiedDate文件修改日期（注：只读属性）
document.anchors[]文档中的锚点数组
document.forms[]文档中的表单元素数组
document.referrer已访问过的链接字符串
document.domain传输服务器的网域名称

3、DOM查询：

查找元素

方法
document.createElement(Tag)创建一个html对象
document.getElementById(“id名”);通过id属性，查找元素
document.getElementsByName()通过name属性，查找元素
document.getElementsByTagName(“标签名”);通过标签寻找元素
document.getElementByTagName(TagName)获得指定的tag对象
document.getElementByClassName(className)获得指定class值的对象（数组）
document.querySelector()需要一个选择器的字符串作为参数，可以根据一个CS$选择器来查询一个元素节点对象
document.querySelectorAll()该方法和queryselector()用法类似，不同的是它会将符合条件的元素封装成数组
document.attributes()元素的属性列表
document.getAttributeo()获取元素属性
document.setAttributeo()设置元素属性
innerHTML该属性可以获取和设置元素内部的HTML代码
innerText该属性可以获取和设置元素内部的文本内容

查找节点

方法说明
parentNode()获取当前节点的父节点
childNodes()获取当前节点的子节点集合
firstChild()获取当前节点的第一个子节点
lastChild()获取当前节点的最后一个子节点
previousSibling()获取当前节点的前一个兄弟节点
nextSibling()获取当前节点的后一个兄弟节点

4、DOM增加节点

方法说明
document.createAttribute()创建属性节点。
document.createElement()创建元素节点
document.createTextNode()创建文本节点
document.body.appendChild()添加节点
document.insertBefore()插入节点
replaceChild()替换子节点。
document.removeChild()删除节点

5、改变HTML的属性

读取元素属性

//语法：元素.属性名
img.src

//读取class属性时需要使用：
元素.className

修改元素的属性：

// 语法：元素.属性名 = 属性值
var aid = document.getElementById("aid")
aid.href = "https://cn.bing.com/";

修改元素内容

btn.innerHTML = "卧槽，我竟然是一个按钮";

替换节点

obj.replaceChild(new, old)

三、DOM操作样式

1、改变CSS内联样式

语法：元素.style.样式名="样式值";

实例

<style>
    #div01 {
		width: 100px;
        height: 100px;
        background-color: red;
    }
</style>


<button id="but01">点我变色</button>
<div id="div01"></div>


<script>
    //获取div01
    var but01 = document.getElementById("but01");
    //绑定单机函数
    but01.onclick = function(){
    	document.getElementById("div01").style.backgroundColor="blue";
    }
</script>

2、获取当前元素的正在显示的样式

语法：元素.currentStyle.样式名

语法：
getComputedStyle() //这个方法来获取元素当前的样式
需要两个参数
第一个：要获取样式的元素
第二个：可以传递一个伪元素，一般都传nul1

实例

alert(box1.currentStyle.backgroundColor);
alert(getComputedstyle(div01, nul1).backgroundColor)

其他样式相关的属性

clientwidth获取元素的可见宽度，包括内容区和内边距
clientHeight获取元素的可见高度，包括内容区和内边距
offsetwidth获取元素的整个的宽度
offsetHeight获取元素的整个的高度
offsetParent返回元素的偏移容器。可以用来获取当前元素的定位父元素
offsetLeft当前元素相对于其定位父元素的水平偏移量
offsetTop当前元素相对于其定位父元素的垂直偏移量
scrollwidth可以获取元素整个滚动区域的宽度
scrollHeight可以获取元素整个滚动区域的高度
scrollLeft可以获取水平滚动条滚动的距离
scrollTop可以获取垂直滚动条滚动的距离

五、DOM EventListener

1、向指定元素添加事件句柄：addEventListener();

2、移除添加的事件句柄：removeEventListener();

<button id="btn">按钮</button>
<script>
	var x = document.getElementById("btn");
	// 添加句柄
	x.addEventListener("click", hello);
	x.addEventListener("click", world);
	// 移出句柄
	x.removeEventListener("click", hello);

	function hello(){
		alert("hello")
	}
	function world(){
		alert("world")
	}
</script>

第八章、事件处理

1、概述：事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动、提交表单。我们可以为事件来绑定回调函数来响应事件。

2、事件详解

  1. 捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
  2. 目标阶段：事件捕获到目标元素,捕获结束开始在目标元素上触发事件
  3. 冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

3、事件对象：在触发DOM事件的时候都会产生一一个对象

2、事件对象event：

1)、type：获取事件类型

2)、target：获取事件目标

3)、stopPropagation()： 阻止事件冒泡

4)、preventDefault()： 阻止事件默认行为

一、事件处理对象

1、事件：事件是可以被JavaScript侦测到的行为。

onClick		单击事件
onMouseOver	鼠标经过事件
onMouseOut	鼠标移出事件
onMousedown 按下鼠标
onMouseUP	松开鼠标
onwheel		滚轮事件（向上滚是负数，向下滚是正数）
onkeydown 	键盘按下事件,按住不松手，事件会一直触发。
onkeyup 	键盘松开事件
onChange	文本内容改变事件
onSelect	文本框选中事件
onFocus		光标聚集事件
onBlur		移开事件
onLoad		网页加载事件
onUnload	关闭网页事件

2、按钮绑定事件

按钮绑定单击事件 onClick

第一种方式：
<button id="btn1" onmousemove="alert('讨厌，你点我干嘛! ');">我是一个按钮</button>

第二种方式：
<button onclick="sum(10,20)">按钮</button>
// 创建函数
function sum(a,b){
    var c=a+b;
    alert(c)
}

第三种方式：
<button id="btn">我是一个按钮</button>
//获取按钮对象
var btn = document.getE1ementById("btn");
//绑定一个单击事件
btn.onclick = function () {
	alert("你还点~~~");
}

其他绑定方法

第一种方法：addEventListener()
    通过这个方法也可以为元素绑定响应函数-参数，
    1.事件的字符串，不要on
    2.回调函数，当事件触发时该函数会被调用
    3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

第二种方法：attachEvent( )
    在IE8中可以使用attachEvent()来绑定事件-参数;
    1.obj 要绑定事件的对象
    2.eventStr 事件的字符串(不要on)
    3.callback 回调函数

实例
function bind(obj , eventstr , callback){
	if(obj.addEventListener){
        //大部分浏览器兼容的方式
        obj.addEventListener(eventstr , callback , false);
	}else{
        obj.attachEvent("on"+eventstr, function(){
        //在匿名函数中调用回调函数
        ca11back.call(obj);
		});
	}
}

解除绑定

解除绑定事件：removeEventListener()
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

IE8的解除绑定事件：detachEvent()

4、文本内容改变事件 onChange

<p>文本内容改变事件 onChange</p>
<form action="">
	<input type="text" onchange="changeDemo(this)">
</form>

<script>
	function changeDemo(bg){
		alert("Hello，内荣改变了")
	}
</script>

5、文本框选中事件 onSelect

<p>文本框选中事件 onSelect</p>
<form action="">
	<input type="text" onselect="changeDemo(this)">
</form>

<script>
	function changeDemo(bg){
		bg.style.background="red";
	}
</script>

6、光标聚集事件 onFocus

<p>光标</p>
<form action="">
	<input type="text" onfocus="changeDemo1(this)">
</form>

<script>
	function changeDemo1(bg){
		bg.style.background="blue";
	}
</script>

一、鼠标事件

1、onMouseDown事件和onMouseUP事件

处理按下鼠标和释放鼠标的事件

按下鼠标、释放鼠标
将鼠标事件连接到mouseDownHabdler和mouseUPHabdler事件处理函数上。

document.onMouseDown = mouseDownHandler;
document.onMouseUp = mouseUpHandler;

2、onMouseOver事件和onMouseOut事件

可以实现页面预览、图像切换、鼠标点亮文本、弹出对话框、更改图片清晰度

将光标移至超链接上查看页面预览

<a href="eml.html" name="link01" onMouseOver="link01Over();">

<script>
	function link01Over(){
        document.forml.img1.src="image01.gif";
    }
</script>

将光标移至图像上切换成另一张图片

<a href="" name="link1" onMouseOver="ImgOver();" onMouseOut="ImgOut();">
	<img name="img1" src="imagel.gif" width="236" height="200">
</a>

<script>
	function ImgOver(){
        document.forml.img1.src="image01.gif";
    }
    function ImgOut(){
        document.forml.img1.src="image02.gif";
    }
</script>

用鼠标点亮文本

<a href="eml.html" name="link1" onMouseOver="link1Over();" onMouseOut="link1Out();">链接一</a>

当鼠标放在链接一上时，文字变红变大。
<script>
function link1Over(){
	link1.style.color="red";
    link1.style.fontSize=30;
}
function link1Out(){
	link1.style.color="blue";
    link1.style.fontSize=15;
}
</script>

将光标移至图像上弹出对话框

<a href="" name="link01" onMouseOver="link01Over();">链接一</a>

<script>
function link01Over(){
	alter("Hello world!");
}
</script>

将光标移至图像更改图片清晰度

<img src="图像.gif" style="filter:alpha(opacity=20)" onMouseOver="makevisible(this,0);" onMouseOut="makevisible(this,1)">

<script>
function makevisible(cur, which){
	if(which == 0){
        cur.filters.alpha.opacity=100;
    }else{
        cur.filters.alpha.opacity=20;
    }
}
</script>

3、onMouseMove事件

clientX 可以获取鼠标指针的水平坐标
clientY 可以获取鼠标指针的垂直坐标     
pageX 可以获取鼠标相对于当前页面的坐标
pageY 可以获取鼠标相对于当前页面的坐标

二、键盘事件

keycode：获取按键的编码，通过它可以判断哪个按键被按下

​ // 除了keycode，事件对象中还提供了几个属性：altKey、ctrlKey、shiftKey

//事件对象event -当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标、键盘哪个按键被按下 …

1、onkeyPress事件

接收键盘输入

<input name="Textbox" type="text" size="20">

<script>
	document.onKeyPress=keyPress;
    var inString="";
    function onKeyPress(e){
        if(navigator.appName == "Micosoft Internet Explorer"){
            inString+=String.fromCharCode(window.event.keyCode);
            document.froml.Textbox.value=inString;
        }
    }
</script>

window.event.keyCode

2、onkeydown 键盘按下事件

document.onkeydown = function (event) {
    event = event || window.event;
    console.log(event.keyCode);
};

3、onKeyUp键盘松开事件

在键盘按键被松开时触发

在文本框输入字符时，将字符逐个改成大写

<input type="text" id="fname" onkeyup="upperCase(this.id)">

<script>
	function upperCase(x){
		var y = document.getElementByid(x).value;
		document.getElementByid(x).value=y.toUpperCase();
	}
</script>

第九章、Browser浏览器对象

一、概述

Browser对象是由window、navigator、screen、history、location这五个对象组成，其中window是JavaScript层级中的顶层对象。

这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用

浏览器核心对象描述
window代表的是整个浏览器的窗口，同时window也是网页中的全局对象
navigator代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
location代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
history代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
Screen代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

二、Window对象

1、window对象概述:

  1. window对象是BOM的核心，window对 象指当前的浏览器窗口。

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

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

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

  5. 甚至HTML DOM的document也是window对象的属性之一。

2、window尺寸:

window.innerHeight 浏览器窗口的内部高度

window.innerWidth 浏览器窗口的内部宽度

3、window方法:

方法说明
open()、close()打开窗口、关闭窗口
resizeBy()、resizeTo()改变窗口大小
moveBy()、moveTo()移动窗口
setTimeout()、clearTimeout()设置或取消“一次性”执行的定时器
setInterval()、clearInterval()设置或取消“重复性”执行的定时器

实例

1）打开新窗口

window.open("test.html", "window_name", "width=400", "height=200", "top=100", "left=100","toolbar=no", "menubar=no")

参数：页面，名字，打开页面的宽度和高度，打开页面的位置，工具条，菜单
参数说明
top			窗口顶部距离屏幕顶部的距离，默认单位为px
left		窗口左边距离屏幕左边的距离，默认单位为px
width		窗口的宽度，默认单位为px
height		窗口的高度，默认单位为px
scrollbars	是否显示滚动条
resizable	窗口大小是否固定
toolbar		浏览器工具条，包括前进或后退按钮
menubar		菜单条，一般包括文件、编辑及其它一些条目
location	地址栏，是可以输入URL的浏览器文本区

2）关闭当前窗口（三种方式）

window.close();
this.close();
close();

改变窗口大小

window.resizeTo(x, y)

resizeBy()方法

当x、y的值大于0时为扩大，小于0时为缩小。其中x和y的单位都是px。
window.resizeBy(x, y)

4、创建警告对话框

alert("注意");

5、创建确认对话框

一般用于确认信息，它只有一个参数，返回值为true或false。

confirm("确认或取消")

6、创建输入对话框

输入对话框用于输入并返回用户输入的字符串。

prompt(message);

4、window对象中常见的属性

  • location位置
    • location.href = “www.baidu.com”; 控制浏览器请求地址
    • location.reload; 刷新页面
  • history
    • history.length; 历史页面数量
    • history.back(); 返回上一页面
    • history.forward(); 前往下一个页面

三、navigator对象

navigator对象是Windows对象的子对象，该对象可以获取浏览器和系统资源的信息。

1、navigator对象的属性

navigator对象的属性
appCodeName返回浏览器的代码名
appName返回浏览器的名称
appVersion返回浏览器的平台和版本信息
cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值
platform返回运行浏览器的操作系统平台
userAgent返回由客户机发送服务器的user-agent 头部的值

2、navigator对象的方法

方法
javaEnabled()指定是否在浏览器中启用Java
taintEnabled()规定浏览器是否启用数据污点(data tainting)

判断浏览器

//User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.41 Safari/537.36 Edg/101.0.1210.32
       
var ua = navigator.userAgent;

if(/Edg/i.test(ua)){
	alert("你是Edg!!!");
}else if (/firefox/i.test(ua)) {
	alert("你是火狐!!!");
} else if (/chrome/i.test(ua)) {
	alert("你是Chrome");
}

四、history对象

平常在使用浏览器当中，我们都会经常使用浏览器中的“前进”和“后退”。其实浏览器都会帮我们保存浏览的历史（即窗口历史）

1、History对象:
window.history对象包含浏览器的历史记录(url)的集合。

2、history对象属性

属性说明
length历史列表的长度，用于判断列表中的入口数目
current当前窗口的URL
next历史列表中的下一个URL
previous历史列表中的前一个URL

3、History方法:

使用history对象的lenght属性获取历史记录数，人后使用back方法和forward方法去浏览历史记录。

History方法
history.go(n)进入指定网页
story.back()返到上一页
history.forward()进入下一页

五、Location对象

1、Location对象：
window.location对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面。

2、Location对象的属性:

Location对象的属性
location.hostname获取主机的域名
location.pathname获取当前页面的路径和文件名
location.host获取主机和端口
location.port获取端口号
location.protocol获取所使用的web协议(http:// 或https://)
location.href获取当前页面的URL
location.search获取URL的关键词
location.assign()方法加载新的文档
location.获取使用的通信协议

3、Location对象的方法

方法说明
assign()用来跳转到其他的页面
replace(url)跳转网址
reload()用于重新加载当前页面，作用和刷新按钮一样

六、Screen对象

1、Screen对象：
window.screen对象包含有关用户屏幕的信息

2、属性:

screen.availWidth	-可用的屏幕宽度

screen.availHeight	-可用的屏幕高度

screen.Height	-屏幕高度

screen.Width	-屏幕宽度

七、计时器

计时器用途非常广，在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西，很大可能都是跟定时器有关。

1、计时事件:
通过使用JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而
不是在函数被调用后立即执行，我们称之为计时事件。

2、计时方法:

计时方法
1）setInterval()间隔指定的毫秒数不停地执行指定的代码
clearInterval()方法用于停止setInterval()方法执行的函数代码
2）setTimeout()暂停指定的毫秒数后执行指定的代码
clearTimeout()方法用于停止执行setTimeout()方法的函数代码

2、定时调用：setInterval()和clearInterval()

var num = 1;
var timer = setInterval(function() {
	console.log(num++);
}, 1000);
clearInterval(timer); //停止

参数code可以是一段代码，也可以是一个调用的函数名；
参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。

1、延时调用：setTimeout()和clearTimeout()

var timer = setTimeout(function () {
	console.log(num++);
}, 3000);
clearTimeout(timer); //停止

参数code可以是一段代码，也可以是一个调用的函数名；
参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。

第十一章、对表单元素进行操作

1、概述

  1. 对表单元素（文本框、列表框、单选按钮）的设置方法、初始化、赋值、取值。

2、文本框的设置方法

html文件
<!-- 将js导入  -->
<script type="text/javascript" src="./对表单元素操作1.js"></script>
<!-- 刷新页面, 执行函数，如果要执行多个函数，用逗号分隔-->
<body onload="show1()">
    <form>
        <label>用户名</label>
        <input type="text" name="userName" id="userName" value="张三">
        <!-- //单击事件,调用函数， -->
        <input type="button" id="btn" onclick="show1()" value="btn" >
    </form>
</body>

js文件
function show1(){
    //按照标签的id获取元素，并修改元素的值。
    document.getElementById("userName").value="李四";
}

3、单选按钮的设置方法

html文件
<!-- 将js导入  -->
<script type="text/javascript" src="./对单选按钮操作.js"></script>
<body>
    <form action="">
        <label for="">用户名</label>
        <input type="text" name="userName" id="userName" value="张三"><br>
        <!--  -->
        <input type="radio" name="sex" value="man" checked="checked"> 男
        <input type="radio" name="sex" value="woman">女<br>
        <!-- //单击事件: 单击按钮,调用函数 -->
        <input type="button" id="btn" onclick="show1()" value="btn">
    </form>
</body>

js文件
function show1(){
    var sex = document.getElementsByName("sex");
    var text;
    if(sex[0].checked){
        text=sex[0].value;
    }else{
        text = sex[1].value;
    }
    alert(text);
}

4、列表框的设置方法

html文件
<script type="text/javascript" src="./对列表框的操作.js"></script>
<body onload="ymd()">
    <form action="">
        <label for="">日期</label><br>
        <select name="year" id="year"></select>年
        <select name="month" id="month"></select>月
        <select name="day" id="day"></select>日


    </form>
</body>

js文件
function ymd(){
    //获取id等于time的标签，
    var year = document.getElementById("year");
    var month = document.getElementById("month");
    var day = document.getElementById("day");

    //获取当前的年月日
    var date = new Date();
    var nowYear = parseInt(date.getFullYear());
	//调用函数，给列表框赋值
    initSelect(year, 1900, nowYear);
    initSelect(month, 1, 12);
    initSelect(day, 1, 31);
}

//给列表框初始化,传递三个参数，表单元素，开始值，结束值
function initSelect(obj, start, end){
    //将年月日添加到标签上
    for (var i=start; i<=end; i++) {
        // options这个标签添加一个条目，
        //options是条目的意思，两个i，一个是value值，一个尖括号里的显示
        obj.options.add(new Option(i, i));
    }
}

2、图片的处理方法
一介书生.
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript框架从入门到精通
cgblpx的博客
06-01 4万+
静态网页和动态网页 动态网页 我们有了html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，有了css样式表实现了页面的美化，这些技术实现了静态网页。 日常展现是已经足够了，但是如果我们要做个注册功能呢？如论坛，我们注册个论坛来发文章，聊天。这就带来一个问题，信息如何根据不同的使用者，展现不同的内容呢？再如我注册登录和你注册登录，我们在网站上显示的登录名称就不同。这html+css就无能为力了，它们无法实现，那谁能办到呢？这时javascript就派上用场了。它能实现浏览器用户和后台服务
使用JavaScript制作动态网页
weixin_45545460的博客
09-02 7596
什么是JavaScript？ JavaScript是一种描述语言，基于对象和事件驱动的脚本语言 JavaScriptte特点： 脚本语言（一种轻量级的编程语言） 一种解释性语言（无需预编译） 被设计为向HTML页面添加交互行为 运行于客户端 JavaScriptte基本语法 <script type= " text/javascript " > <!-- // JavaS...
javascript动态网页
热爱编程 热爱生活
09-26 1007
1. 效果图 源码:
js控制网页动态效果
shenpkun的博客
02-28 1114
用原生js实现轮播图、倒计时、元素的显示与隐藏等效果
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
JavaScript JavaScript JavaScript
06-26
JavaScript JavaScript JavaScript
JavaScript实例大全
12-19
这个压缩包“JavaScript实例大全”显然是一份集合了多种JavaScript相关资源的宝典，包括“JavaScript网页设计300例”、“javascript源码大全”以及“jquery 1.7 中文 api 修正版”。 首先，“JavaScript网页设计300...
JAVASCRIPT HashTable
10-31
JAVASCRIPT HashTable
JavaScript语言精粹
09-27
JavaScript 曾是“世界上最被误解的语言”，因为它担负太多的特性，包括糟糕的交互和失败的设计，但随着Ajax 的到来，JavaScript“从最受误解的编程语言演变为最流行的语言”，这除了幸运之外，也证明了它其实是一门...
HTML通过JS动态生成简单网页
Qian_Qian_IT的博客
03-21 3131
HTML通过JS动态生成简单网页 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态生成网页</title> <script type="text/javascript"> function init(){ var...
JavaScript学习手册八：JS函数
qq_45823118的博客
04-20 6966
JS函数1、用函数语句定义函数任务描述相关知识用函数语句定义代码文件2、用表达式定义函数任务描述相关知识用表达式定义代码文件3、函数的调用任务描述相关知识函数的调用代码文件4、未定义的实参任务描述相关知识用函数语句定义代码文件5、实参对象任务描述相关知识实参对象代码文件6、对象作为参数任务描述相关知识对象作为参数代码文件7、函数对象任务描述相关知识函数对象作为另一个函数的参数代码文件 1、用函数语句定义函数 任务描述 本关任务：用函数语句定义一个函数。 具体要求如下： 定义一个名字为mainJs()的函数
Web前端开发技术：实验14-16
KslgmrDry的博客
09-12 1万+
实验14 1. 编写JavaScript程序实现“九九乘法口诀”表，如图14-40所示。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九九乘法表</title> </head> <body> <h1>九九乘法表</h1> </body> <scri
JavaScript键盘事件及键盘码
weixin_52629158的博客
05-03 1009
有时候我们在表单进行提交前需要进行表单验证，如果验证不通过，那么就需要阻止表单提交的默认行为，下面介绍两种阻止此默认行为的方式。stopPropagation也是事件对象(Event)的一个方法，作用是 阻止目标元素的冒泡事件，但是 会不阻止默认行为。如果事件是可取消的，则 preventDefault() 方法会取消该事件，这意味着属于该事件的默认操作将不会发生。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。方法来阻止默认行为。
JS:键盘事件（onkeydown 、onkeypress、 onkeyup三个）
weixin_59519449的博客
10-09 3390
1.键盘事件key 属性 描述 onkeydown 某个键盘按键被按下 onkeypress 某个键盘按键被按下。 onkeyup 某个键盘按键被松开。 事件相关的事件发生次序： ...
珍藏很久的9个网站，再舍不得也得分享出来
热门推荐
emprere的博客
04-24 15万+
前言小编自己有一个网购省钱机器人，平时网购可以省点钱，如果你愿意支持我可以扫码使用，首次添加赠送红包一个，福利多多，朋友圈经常更新各种羊毛活动，一起薅羊毛。正文昨天是小编生日，谢谢各位的...
ES6 新特性有哪些
最新发布
weixin_64684095的博客
07-06 1129
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
HTML_表单 和 表单案例
secret010的博客
07-05 300
【代码】HTML_表单 和 表单案例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值