JavaScript基础

最新推荐文章于 2023-04-05 15:03:46 发布

BluePROT

最新推荐文章于 2023-04-05 15:03:46 发布

阅读量374

点赞数

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

本文链接：https://blog.csdn.net/qq_41037945/article/details/106889623

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

date: 2018-07-24 15:17:41
JavaScript作为一种可以给网页增加交互性的脚本语言，有着众多优点：易学易用、简单等。JQuery是js的函数库，也可以说是一种框架，简化了HTML与js之间复杂的处理程序，同时解决了跨浏览器的问题。

JavaScript

是一种动态、弱类型、基于原型的语言，支持内置类，经过发展已经成为健壮的基于对象和事件驱动并有相对安全性的客户端脚本语言，常用来给HTML网页添加动态功能，比如相应用户的各种操作，可以弥补HTML的缺陷，实现web页面客户端动态效果，主要内容如下

动态改变网页内容。HTML是静态的，一旦编写内容无法改变，js弥补了这个不足。
动态改变网页外观。js可以通过修改网页元素的CSS样式动态概念网页的外观，如修改文字颜色大小等属性、图片位置动态改变等。
验证表单数据。为了提高网页的运行效率，可以再客户端对数据的合法性进行验证，验证成功即可提交到服务器，从而减少服务器的负担。
响应事件。js是基于事件的语言，因此可以相应用户或者浏览器的事件，比如点击按钮事件。

嵌入如下

...
<head>
...
<script language="JavaScript">
//JavaScript脚本内容
</script>
...
</head>
...

脚本内容卸载head标签内。
简单示例如下

<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>滚动文字的设置</title>
		<script language="JavaScript">
			document.write("欢迎来到JavaScript动态世界");
		</script>
</head>
<body>
	<p>学习学习
</body>
</html>

js对象与函数

常见内部对象如下

对象名	功能	静态动态性
Object	改程序可以在运行时为js对象随意添加属性	动态
String	用于处理或格式化文本字符串以及确定和定位字符串中的子字符串	动态
Date	使用Date对象执行各种日期和时间操作	动态
Event	表示js事件	静态
FileSystemObject	主要用于实现文件操作功能	动态
Drive	用于收集系统中的物理或者逻辑驱动器资源中的内容	动态
File	用于获取服务器端指定文件的相关属性	静态
Folder	用于获取服务器端指定文件夹的相关属性	静态

函数

可以使用函数来响应网页中的事件，语法格式如下

function 函数名([参数1],[参数2]...)
	//语句
	[return 表达式]

计算一元二次方程的栗子

<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>滚动文字的设置</title>
		<script language="JavaScript">
			function cal(x){
				var result;
				result=4*x^2+3*x+2;
				alert("计算结果"+result);
			}
		</script>
</head>
<body>
	<input type="button" onclick="cal(prompt('输入一个数值：'))" value="计算">
</body>
</html>

prompt()方法的功能是调用系统内置的输入对话框，返回输入的值。

匿名函数

js提供一种匿名函数，可以再表达式中直接定义函数，如下

var fun=function(param1,param2...){
	...
}

Function()构造函数
使用构造函数可以动态创建函数，语法如下

var fun=new Function("参数1","参数2",...,"函数体");

在括号里不管是参数还是函数体都需要有双引号包含着，如下栗子

var sum=new Function("x","y","alert(x+y);");
sum(10,20);

上述代码中，sum实际上不是函数名，是一个指向函数的变量，也就是说使用构造函数创建的函数也是匿名函数。

事件

事件由浏览器动作（网页加载文档（或者用户动作（敲击键盘鼠标点击）触发。
比如某事件需要在载入文档的时候被触发，就要在body标签中加入onload=“MyFunction()”，resize事件则在用户改变浏览器大小的时候进行触发。
常用事件如下

onmousedown：按下鼠标触发事件
onclick：单击鼠标触发事件
onmouseover：鼠标指针移到目标上方触发的事件
onmouseout：鼠标指针移出目标上方触发的事件
onload：网页载入触发的事件
onunload：离开网页触发事件
onfouse：网页上元素获得焦点触发事件
onmove：浏览器窗口被移动触发事件
onresize：浏览器窗口大小被改变时触发事件
onScroll：滚动条位置变化时触发事件
onsubmit：提交表单触发事件

简单变换背景颜色的栗子如下

<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>滚动文字的设置</title>
		<script language="JavaScript">
			var Arraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschnia","green","purple","gray","yellow","aqua","white","silver");
			var n=0;
			function cal(){
				if (n==(Arraycolor.length-1))
					n=0
				n++;
				document.bgColor=Arraycolor[n];
			}
		</script>
</head>
<body>
	.
	<input type="button" onclick="change()" value="点击按钮变背景颜色">
</body>
</html>

上面是一本书中的简单提及，相当过分啊，太敷衍了，下面是正文。

JavaScript语言基础

一些简单的，语言通用的就不说了。

数据类型

js的基本数据类型有数值型、字符串型、布尔型以及两个特殊的数据类型。

数值型（number），和C语言不同的是js不区分整型和浮点型

十进制：123、140、890
十六进制：0x73FD、0X3hE
八进制：08、0384。由于有些版本不支持八进制，所以最好不要使用八进制，因为不知道浏览器会将其处理为十进制还是八进制
浮点数（包括科学计数法）：1.231、84.12、.283、6e+3、3.12e11、1.234E-12
特殊值Infinity：如果超出最大值范围，则会输出Infinity，表示无穷大
特殊值NaN：Not a Number，非数字，进行数学运算产生未知的结果或者错误，会返回NaN，比如0初一0返回NaN

字符串型（string）
由单或双引号包括目标字符串，转义字符为’’，如输出单引号为’，输出双引号为"，字符串相连直接用+即可。

特殊数据类型

未定义值：是undefined、如var a;
空值（null）：用于定义空的或者不存在的引用

在js中，多了几个不太一样的比较运算符，比如"=“三个等号，表示绝对等于，同时进行表面值和数据类型的判断，”!"不等两个等号表示不绝对等于根据表面值和数据类型同时判断。
判断数据类型：typeof c

常量和变量

变量的声明，左右变量都由关键字var声明。

异常处理语句

js从java中引入了try…catch…finally语句，具体语法如下

try{
	somestatements;
}catch(expection){
	somestatements;
}finally{
	somestatements;
}

参数说明：

try：尝试执行的关键字
catch：捕捉异常的关键字
finally：最终一定会被处理的代码段的关键字，可以省略

与java不同的是，js只能由一个catch，因为它不能指定异常的类型。
catch通常会捕捉一个Error对象，包含两个属性name（表示异常类型的字符串）和message（实际异常信息）。

var str="I like js";
try{
	document.write(str.charat(5));
}catch(exception){
	alert("实际错误信息为："+exception.message+"\n"+"错误类型字符串为："+exception.name);
}finally{
	alert("结束，finally");
}

js是动态解释性语言，一定要注意正确性，不然不报错而且会运行，比如如果拼写错误，catch中的代码块就不会执行。
可以通过自定义异常报出逻辑错误，语法为throw new Error(“somestatements”);，如

try{
	var num=1/0;
	if (num=="Infinity"){
		throw new Error("除数不能为0");
	}
}catch(exception){
	alert(exception.message);
}

函数

函数的定义上面已经有写了，一个函数最多有255个参数。

函数的简单调用

<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>js</title>
		<script type="text/javascript">
			function test(){
				alert("我喜欢js");
			}
		</script>
</head>
<body>
	<script>
		test();
	</script>
</body>
</html>

事件响应中调用函数
如用户单击某个按钮或者复选框时都将触发事件，通过编写程序对事件做出反应的行为成为响应事件。

<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>js</title>
		<script type="text/javascript">
			function test(){
				alert("我喜欢js");
			}
		</script>
</head>
<body>
		<form actio="" method="post" name="form1">
		<input type="button" value="提交" onClick="test();"/>
		</form>
</body>
</html>

通过链接调用函数
除了可以在响应事件中调用函数外还可以在链接中被调用，通过href属性。

<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>js</title>
		<script type="text/javascript">
			function test(){
				alert("我喜欢js");
			}
		</script>
</head>
<body>
		<a href="javascript:test();">单机链接</a>
</body>
</html>

js中有一些比较常用的内置函数，如下

函数	说明
parseInt()	将字符型转为整型
parseFloat()	将字符型转为浮点型
isNaN()	判断一个数是否为NaN
isFinite()	判断一个数是否有限
eval	求字符串中表达式的值
escape()	将字符串中的一些特殊字符进行编码
unescape()	将编码后的字符串进行解码
encodeURI()	将URI字符串进行编码
decodeURI()	对已编码的URI字符串进行解码

一些函数的要点 parseInt(string,[n]) 其中string为需要转换的饿字符串，字符串进行数制转换的时候如果不是数字开头的均返回NaN，n表示几进制，默认十进制。 eval() 字符串表达式求值栗子 eval("x=5;y=6;document.write(x*y)"); ecape() 将特殊字符转换为"%xx"格式的数字，"xx"表示对应ascii的十六进制。 URI的两个函数参数为url（需要编码的URI字符串） URI和URL都可以表示网络资源地址，但是URI更广泛，一般情况是等同的 encodeURI()只对字符串中有意义的字符进行转移，比如空格转换为"%20"。如 ``` var URL="http://127.0.0.1/save.html?name=测试"; document.write(encodeURI(URL)); //输出结果 http://127.0.0.1/save.html?name=%E6%B5%8B%E8%AF%95 ``` js也有匿名函数，语法如下 ``` var 变量名=function(参数){ //函数主体 }; ```

简单应用-输出表格

<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>js</title>
		<script type="text/javascript">
			function table(row,col){
				var show="";
				show="<table align='center' border='1' width='600px'>";
				var bgcolor;
				for (i=1;i<=row;i++){
					if (i%2!=0)
						bgcolor="#FFFFFF";
					else
						bgcolor="#DDDDFF";
					show+="<tr bgcolor="+bgcolor+">";
					for (j=1;j<=col;j++)
					show+="<td height='30'>第"+i+"行第"+j+"列</td>";
					show+="</tr>";
				}
				show+="</table>";
				return show;
			}
		</script>
</head>
<body>
		<script>
			var result=table(6,5);
			document.write(result);
		</script>
</body>
</html>

写html写js的时候一定要注意拼写问题，因为他几乎不报错，出错的话只会没有反应，找错很麻烦

JavaScript自定义对象

对象的概念来自于对客观世界的认识，它用于描述客观世界存在的特定实体。计算机中不仅存在来自于客观世界的对象，也包括为解决问题而引入的抽象对象。
js的对象包含两个要素：属性和方法，通过访问或设置对象的属性，并调用对象的方法，可以对对象进行各种操作，从而获得需要的功能。
取值或者设置属性值的语法格式如下
对象名.属性名
调用对象的方法格式如下
对象名.方法名()

JavaScript对象

js中对象可以分为三种，自定义对象、内置对象和浏览器对象，内置对象和浏览器对象又称为预定义对象。
js中将常用功能预先定义成对象，用户可以直接使用这些对象，这就是内置对象，例如Math、Date、String、Array、Number、Boolean、Global、Object和RegExp对象等。
浏览器对象是根据系统当前配置和所装在的页面为js提供一些对象，例如document、window对象等。

自定义对象的创建

直接创建自定义对象
通过自定义构造函数创建
通过系统内部Object对象创建

直接创建对象
var 对象名={属性名:属性值…}
访问对象中的属性除了使用对象名.属性名，也可以用数组形式对象名[“属性名”]。自定义构造函数

function Student(name,sex,age){
	this.name=name;
	this.age=age;
	this.sex=sex;

这样就chuangjian 了一个学生对象Student，这是构造函数，有三个属性并进行了初始化，其中this关键字表示对对象自己的属性、方法引用。
然后可以使用new操作创建新对象
var student1=new Student(“张三”,“男”,25);
创建对象的方法的时候有两种方法，具体代码如下

function Student(sex,name,age){
	this.name=name;
	this.age=age;
	this.sex=sex;
	this.showAge=showAge;
}
function showAge(){
	...
}
//或者
function Student(sex,name,age){
	this.name=name;
	this.age=age;
	this.sex=sex;
	this.showAge=function(){
	...
	}；
}

prototype

prototype是js中所有函数都有的一个属性，可以想对象中添加属性或者方法，语法如下
object.prototype.name=value
例如给Student添加show方法

Student.prototype.show=function(){
	...
}

通过系统内置Object对象创建自定义对象
用法很简单，语法格式如下
obj=new Object([value])
使用这种方法可以不需要定义构造函数，可以再程序运行的时候为js对象随意添加属性。

var Student=new Object();
Student.name="ss";
Student.show=function(){
	...
}

对象访问

for…in…和with语句是专门应用与对象的语句。

for (变量 in 对象){
	...
}

每次循环依次遍历对象的每一个属性，使用这个语句的时候输出属性值时一定要用数组形式输出，不能用小数点形式。

with(对象名称){
	...
}

如果需要多次使用对象中的多个属性或者方法，使用with，随后在代码块中只需要使用如name即可，不需要再写Student.name。

常用内部对象

Math

提供了大量的数学常量和数学函数，使用时当成静态使用，无需new。
属性如下

E：欧拉常数
LN2:2的自然对数
LN10:10的自然对数
SQRT2:2的平方根
LOG2E：以2为底的e的对数
LOG10E：以10为底的e的对数
PI：圆周率常数π
SQRT1_2：0.5的平方根

方法如下

abs：绝对值
acos：弧度的反余弦值
asin：弧度的反正弦值
atan：弧度的反正切值
atan2（x，y）：从x轴到（x，y）的角度，区间为（-PI,PI）
ceil（x），大于或等于x的最小整数，即[x]
cos
exp
floor（x）：小于或等于x的最大整数
log（x）：返回x的自然对数
max（x1,x2…）：返回列表参数的最大值
min（x1,x2…）：返回列表参数的最小值
pow（x，y）：x的y次方
random（）：0~1的随机数
round（x）：最接近x的整数，四舍五入
sin
sqrt
tan

Number

Date

使用js的Date对象实现对日期和时间的控制，如果想在网页中实现计时时钟，需要重复生成新的对象获取时间。
创建对象

obj=new Date()
obj=new Date(dataVal)
obj=new Date(year,month,date[,hours[,minutes[,minutes[,ms]]]])

参数说明

dataVal：若为数字值则表示距离1970.1.1午夜间全球标准时间的毫秒数。若为字符串，通肠胃“月日，年小时:分钟:秒”，其中月份为英文，其余为数字，还可用“年/月/日小时:分钟:秒”的格式。

数组

数组的创建
var array=new Array();
使用同其他。
数组元素的添加即a[i]=value，在第i个位置插入元素value。
删除元素值使用delete arr[1]，即删除下标为1的元素。
求数组长度使用length属性，数组也可以使用prototype添加属性或者方法。
常用的数据方法

concat：链接两个或更多数组并返回结果
push：向数组末未添加一个或多个元素并返回新的长度
unshift：向数组开头添加一个或多个元素并返回新的长度
pop：删除并返回数组最后一个元素
shift：删除并返回数组第一个元素
splice：删除元素，并向数组添加新的元素
reverse：数组中的元素倒序
sort：排序
slice：从某个已有的数组返回特定的元素
ValueOf：返回数组对象的原始值

String

常用方法

charAt：返回字符串指定位置的字符
indexOf：返回某个字符串在字符串中首次出现的位置，第一个参数为子字符串，第二个参数可选，开始的位置
lastIndexOf：最后出现的位置
slice：截取字符串，两个参数分别为开始和结束的下标
substr：提取字符串，两个参数分别为开始位置的下标和指定长度，由于浏览器兼容问题，第一个参数不建议用负数（比如当文章太长无法显示的时候就可以截取超长字符串，然后使用省略号代替）
substring：提取字符串中指定位置之间的的字符
toLowerCase：字符串转为小写
toUpperCase：字符串转为大写
concat：连接字符串
split：拆分字符串，两个参数，第一个指定分隔符，第二个可选，指定返回的数组最大长度，如果指定了，超过了就会自动截取

格式化字符串
类似给字符串添加一些效果

big：大号字体
small：小号字体
fontsize：指定字体
bold：加粗
italics：斜体
link：将字符串显示为链接
strike：删除线
blink：闪动字体（不支持IE）
fixed：以打字机文本显示字符串，相当于字符串两端增加
fontcolor：指定颜色
sub：下标
sup：上标

事件处理

事件处理是对象化编程的一个很重要的环节，可以使得逻辑更加清晰，程序更灵活，事件处理可以是任何js语句，一般使用自定义函数function()进行处理。
绝大多数事件的命名都是有描述性的，比如click、submit‘mouseover等等，有极少数是不好理解的，比如blur，意思是模糊，表示一个域或者一个表单失去焦点，通常命名原则为事件名前加on，如click的处理其名为onClick。
常用的js事件表如下所示（纯手打可能会有错没如果有错，建议直接搜索控制其名，也就是事件名，保险点）

事件调用

在Html标签中调用相对应的事件即可，指定方式有两种，在Html中调用和在js中调用，一共有四种方式，分别如下

<input name="save" type="button" value="保存" οnclick="alert("点击了保存");">

<input name="save" type="button" value="保存" onclick="clickFunciton();">
function clickFunction(){
	alert("点击了保存");
}

<input id="save" type="button" value="保存">
<script language="javascript">
	var b_save=document.getElementById("save");
	b_save.onclick=function(){
		alert("点击了保存");
	}
</script>

<form id="form1" name="form1" method="post" action="">
<input id="save" name="save" type="button" value="保存">
</form>
<script language="javascript">
	form1.save.onclick=function(){
		alert("点击了保存");
	}
</script>

关于表单的事件

表单事件实际上是对元素获得或者失去焦点的动作进行控制，可以利用表单事件改变获得或失去焦点的元素的样式。
使用到了事件对象，event、srcElement
这个是点击文本框获得焦点的时候，文本框颜色变化，失去焦点后文本框颜色又恢复成原来的颜色，简单示例如下

<input type=text" name="textfield" οnfοcus="txtfocus()" onBlur="txtblur()">
<script language="javascript">
	function txtfocus(event){
		var e=window.event;
		var obj=e.srcElement;
		obj.style.background="#FF9966";
	}
	function txtblur(event){
		var e=window.event;
		var obj=e.srcElement;
		obj.style.background="#FFFFFF";
	}
</script>

这个实例是在用户选择下拉菜单中的颜色时，通过onchange事件改变相应文本框的字体颜色，大致代码如下

<form name="form1" method="post">
	<input name="textfield" type="text" size="23">
	<select name="menu1" onChange="FColor()">
		<option value="black">黑</option>
		...
	</select>
</form>
<script language="javascript">
	function FColor(){
		var e=window.event;
		var obj=e.srcElement;
		form1.textfield.style.color=obj.options[obj.selectedIndex].value;
	}
</script>

表单的提交事件onsubmit，通常使用“提交”按钮，在表单提交之前被触发，可以通过返回false值阻止表单的提交。
表单重置事件onreset与提交事件基本相同，该事件将表单中的各元素的值设为原始值。
大致语法格式如下

参数说明：

formname：表单名称。
Funname：函数名或执行语句，如果是函数名则必须有布尔型的返回值。

如果在事件中调用的是自定义函数名，必须在函数名前加上return，否则不论函数中返回的是true还是false，一律为true
下述代码是通过onsubmit事件判断表单中是否有空白，有则不允许提交，通过onreset重置表单，示例代码如下
ps.“obj.”+“txt”+i表示每个文本框的name

<form name="form1" onReset="return AllReset()" onsubmit="return AllSubmit()">
...

</form>
...
<script language="javascript">
	function AllReset(){
		if (window.confirm("是否进行重置"))
			return true;
		else
			return false;
	}
	function AllSubmit(){
		var T=true;
		var e=window.event;
		var obj=e.srcElement;
		for (var i=1;i<8;i++){
			if (eval("obj."+"txt"+i).value==""){
				T=false;
				break;
			}
		}
		if (!T){
			alert("提交信息不能为空");
		}
		return T;
	}
</script>

鼠标键盘事件

鼠标单击事件是在鼠标单击时被触发的时间，按下鼠标、没有移动同时松开鼠标的操作，鼠标单击事件onclick。
该栗子是通过点击按钮不断改变页面背景颜色，代码如下

<script language="javascript">
	var ArrayColor=new Array("olive","teal","red"...,"gray");
	var n=0;
	function turncolors(){
		if (n==Arraycolor.length-1)
			n=0;
		n++;
		document.bgColor=ArrayColor[n];
	}
</script>
<form name="form1" method="post">
	<p><input type="text" name="Submit" value="变换背景" onclick="turncolors()"></p>
</form>

鼠标按下和松开事件，分别为onmousedown和onmouseup事件，可以使用这两个事件实现动态效果。
这个栗子是使用这两个事件实现标签的，鼠标点击改变文本的颜色，松开鼠标时，恢复文本的默认颜色，并弹出一个新页面。

<p id="p1" style="color:#AA9900" onmousedown="mousedown()" onmouseup="mouseup()"><u>Javascript</u></p>
<script script="javascript">
	funciton mousedown(){
		var obj=document.getElementBuId("p1");
		obj.style.color='#0022AA';
	}
	function mouseup(){
		var obj=document.getElementById('p1');
		obj.style.color='AA9900';
		window.open("","网页","");
	}
</script>

鼠标移入移出事件，分别为onmouseover和onmouseout事件，可以使用这两个事件在指定对向上移动鼠标时，实现其动态效果。
这个栗子是鼠标移入移出图图片时，动态改变图片焦点，代码如下

<script language="javascript">
	function visible(cursor,i){
		if (i==0)
			cursor.filters.alpha.opacity=100;
		else
			sursor.filters.alpha.opacity=50;
	}
</script>
...
<img src="" style="filter:alpha(opacity=100)" onMouseOver="visible(this,1)" onMouseOut="visible(this,0)"/>

鼠标移动事件onmousemove是鼠标在页面上进行移动时触发事件处理程序，可以在事件中用document对象实时获取鼠标在页面中的位置。
这个栗子是鼠标在页面中移动时，页面状态栏中实时显示鼠标在页面上的位置，也就是(x,y)值，代码如下

<script language="javascript">
	var x=0,y=0;
	function MousePlace(){
		x=window.event.x;
		y=window.event.y;
		window.status="鼠标在当前位置的坐标为：("+x+","+y+")";
	}
	document.onmousemove=MousePlace;
</script>

键盘事件，包含onkeypress、onkeydown和onkeyup事件，其中用途分别为某个按键被按下并且被释放时触发此、某个按键被按下时触发（一般用于组合按键）、某个按键被按下后松开触发（一般用于组合键）。
键盘字母和数字的键码值即为ASCII码，数字键盘上的按键和控制键的键码值如下

如果想使用组合键，可以使用event.ctrlKey、event.shiftKey和event.altKey判断是否按了ctrl、shift和alt键
这个栗子是利用A键进行页面的刷新

<script language="javascript">
	function Refresh(){
		if (window.event.keyCode==97){
			location.reload();
		}
	}
</script>

页面事件

页面事件是页面加载时或改变浏览器大小、位置，以及对页面中的滚动条进行操作的时候，所触发事件处理程序。
加载事件onload是在网页加载完毕后出发相应的事件处理程序，可以再网页加载完成后对网页中的表格样式、字体、背景颜色等进行设置。卸载事件unload是在卸载网页时触发，在关闭当前页或从当前页跳转到其他页面，通常用于在关闭当前页面或跳转时弹出询问对话框。
如下栗子是在网页加载时，将图片缩小成指定大小，鼠标移动上去时，将图片大小恢复成原始大小，可以避免使用大小相同的两个图片进行切换，并在重载页面的时候用于显示欢迎信息。

<body onunload="pclose()">
<img src="" name="img1" onload="blowup()" onmouseout="blowup()" onmouseover="reduce()">
<script language="javascript">
	var h=img1.height;
	var w=img1.width;
	function blowup(){
		if (img1.height>=h){
			img1.height=h-100;
			img1.width=w-100;
		}
	}
	function reduce(){
		if (img1.height<h){
			img1.height=h;
			img1.width=w;
		}
	}
	function pclose(){
		alert("ss");
	}
</script>
</body>

页面大小事件是在用户改变浏览器的大小时触发，主要用于固定浏览器大小。
这个栗子是在打开网页时，将浏览器固定的大小显示在屏幕上，当鼠标拖拽浏览器边框改变其大小时，浏览器恢复原始大小。

<script language="javascript">
	function fastness(){
		window.resizeTo(650,500);
	}
	document.body.onresize=fastness;
	document.body.onload=fastness;
</script>

按回车键切换下一个控件的焦点

不用再用鼠标去点击了，函数调用的参数为下一个控件的name，按键之后获取参数对应的控件焦点。

...
<input name="用户名" type="text" onKeyPress="Myenter(form1.密码)".../>
<input name="密码" type="text" onKeyPress="Myenter(form1.密码)".../>
...
<script type="text/javascript">
	function Myenter(str){
		if (event.keyCode==13){
			str.focus();
		}
	}
</script>

JavaScript常用文档对象

Document对象

JQuery

最开始的JQuery指示增强CSS选择器功能，现在已经发展集js、CSS、DOM和Ajax于一体的框架，于一体的话，采取模块式开发，很多网页的动态效果都是利用jq来做的。

JQuery的配置

这是一个开源的校本库，所以需要下载配置。

点击此处下载jquery-3.3.1.min.js或相关版本文件。
将.js文件放在项目文件目录下，通过src进行导入，需要在所有script之前进行导入。

简单栗子如下

<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>滚动文字的设置</title>
		<script language="JavaScript" src="jquery-3.3.1.min.js"></script>
		<script language="JavaScript">
			window.onload=function(){
				var oElements=$("p:odd");
				for (var i=0;i<oElements.length;i++){
					oElements[i].innerHTML=i.toString();
				}
			}
		</script>
</head>
<body>
	<p>第一行</p>
	<p>第二行</p>
	<p>第三行</p>
</html>

这个栗子是选择文本段落中的奇数行文本内容并显示出来。

JQuery的工厂函数

符号是jq中最常用的一个符号，用于声明jq对象，无论哪种类型选择器都需要以$()开头，参数中可以包括任何CSS选择符表达式，通常使用字符串参数，常用语法格式如下

$(selector)

常用的用法如下

参数中使用标记名，如$(“div”)，获取文档中全部div标签
参数中使用ID，如$("#usename")，用于获取文档中ID属性值为usename的一个元素
参数中使用CSS类名，如$(".btn_grey")，用于获取文档中使用CSS类名为btn_grey所有元素

常见选择器

jq中常见选择器如下

基本选择器包括ID选择器、元素选择器、类别选择器和符合选择器等。
层级选择器是根据DOM元素之间的层次关系获取特定元素，例如后代元素、子元素、相邻元素和兄弟元素等。
过滤选择器主要包括简单过滤器、内容过滤器、可见性过滤器、表单对象的属性选择器和子元素选择器等。
属性选择器是通过元素的属性作为过滤条件来进行筛选对象的选择器，常见的属性选择器为[attribute]、[attribute=value]、[attribute!=value]、[attribute$=value]等。
表单选择器用于选取经常在表单中出现的元素，但是选取的元素不一定在表单中。提供的表单选择器包括：:input选择器、:text选择器、:password选择器、:radio选择器等等（checkbox、submit、reset、button、image、file）。
举个栗子，将类型为file的所有input元素添加背景色

<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>滚动文字的设置</title>
		<script language="JavaScript" src="jquery-3.3.1.min.js"></script>
		<script language="JavaScript">
			$(document).ready(function(){
				$(":file").css("background-color","#B2E0FF");
			})
		</script>
</head>
<body>
	<form action="">
		姓名<input type="text" name="姓名"/>
		<br/>
		密码<input type="password" name="密码"/>
		<br/>
		<button type="submit">按钮1</button>
		<input type="button" value="按钮2"/>
		<input type="reset" value="重置"/>
		<br/>
		文件：<input type="file"/>
	</form>
</body>
</html>

OK,THANKS FOR READING.BYE BYE~

BluePROT

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础

文章目录JavaScriptjs对象与函数函数匿名函数事件上面是一本书中的简单提及，相当过分啊，太敷衍了，下面是正文。JavaScript语言基础数据类型常量和变量异常处理语句函数简单应用-输出表格JavaScript自定义对象JavaScript对象自定义对象的创建prototype对象访问常用内部对象MathNumberDate数组String事件处理事件调用关于表单的事件鼠标键盘事件页面事件按回车键切换下一个控件的焦点JavaScript常用文档对象Document对象JQueryJQuery的配置J
复制链接

扫一扫