JavaScript（一）

最新推荐文章于 2024-04-23 20:28:43 发布

Nancy1709

最新推荐文章于 2024-04-23 20:28:43 发布

阅读量245

点赞数

分类专栏： JavaScript+jQuery

本文链接：https://blog.csdn.net/Nancy1709/article/details/88639192

版权

JavaScript+jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、JavaScript历史

1.可以实现几乎素有的浏览器交互功能，而且主流的浏览器都支持js
2.大部分浏览器都有解析js的引擎，所以才能执行js的代码
3.js不需要进行编译，是解释性语言

二、js的基本语法要求

1.严格区分大小写
2.标识符的起名要求和Java是一样的
（1）第一个位置可以是字母、下划线、美元符号
（2）其他位置可以是字母、下划线、美元符号、数字
3.变量的声明 var
（1）统一用var关键字来声明变量，无需像Java一样指定具体类型
（2）变量的数据类型根据具体的赋值类型来确定
（3）js是弱语言类型，var关键字声明的一个变量可以保存任何类型的数据
4.js的基本数据类型
（1）Undifined：使用了一个声明了没有赋值的变量，或者未声明不存在的变量
（2）String：字符串类型（Java中String是引用类型）
（3）Number：数字类型
（4）Null：表示空类型
（5）Boolean：布尔类型（true和false）
5.注释
（1）单行注释：//
（2）多行注释：/注释的内容/
6.js中每行代码完毕之后不加上分号也不会有语法错误，但为了养成良好的习惯建议都加上去
7.基本方法
（1）alert():该方法属于内置对象window，作用是在页面弹出提示窗口
（2）console.log():在控制台输出信息
8.js中还有一些基本的语法，比如循环、流程控制语句等等和Java的形式是一样的，我们遇到了直接使用即可，不单独分析

三、js的三种使用结构

1.在html代码中使用js（基本不使用）
2.在head中使用（html文件的头部中使用）（30%）
3.将js定义在一个单独的文件中（index.js），在需要的地方导入该文件（方便代码的重用和维护，使用最广泛）

四、js的函数

（一）概念

1.Java中有方法的概念，方法是完成一定功能的代码封装，之后在需要的地方进行调用
2.但是js中没有方法的概念，而是函数，函数其实也是将一些代码进行封装，之后在需要的地方直接使用函数的名称进行调用，解决重复的代码

（二）格式

function 函数名（参数，参数）{
	//js 代码
	[return 返回的数据]
}

（三）和Java方法声明的不同点

1.js函数使用function进行声明
2.声明函数的时候不需要定义返回值类型
3.参数没有指定类型，而是直接给出参数名称
4.返回值可有可无（根据具体需求）
5.多个js文件中的函数和变量是可以互相调用和引用
6.要实现js函数的互相调用只需要在html中，导入你需要调用的函数所在的js文件即可
7.在html中js文件的导入代码必须满足：被调用的js永远放到前面

//html文件
<html>
	<head>
		<meta charset="utf-8"/>
		<title>阁下何不同风起，扶摇直上九万里</title>
		//导入js文件，被调用的js文件要先导入
		<script src="../js/funlib.js" type="text/javascript"></script>
		<script src="../js/index.js" type="text/javascript"></script>
	</head>
	<body>
	</body>
</html>

//funlib.js(函数库js文件)
//求和
function addSum(a,b){
	console.log("两个数的和为"+(a+b));
}
//求长方形的面积
function squarArea(len,width){
	console.log("求长方形的面积"+(len*width));
}
//三角形的面积
function triangleArea(base,height){
	console.log("三角形的面积"+(base*height/2));
}

//index.js(调用js函数的js文件)
addSum(10,20);//求两数之和
squarArea(10,20);//求长方形面积
triangleArea(10,20);//求三角形面积

五、js获取html节点

（一）js的document内置对象

1.可以把html中的每个标签看成一个节点，并且可以通过js的一个内置对象document将这些节点获取出来并且进行操作（修改、删除、替换其内容）
2.document内置对象，该对象有自己的属性和方法，可以直接使用
3.JavaEE中也还会出现内置对象的概念

（二）分类

1.根据id值取得元素节点对象
2.根据标签名取得元素节点
3.根据节点的name属性取得元素
4.根据class获取元素节点
5.在文本框中输入两个数，然后计算出值之后输出

（三）注意

1.html文件是按照从上到下的顺序执行

六、js对象的创建

（一）字面量创建对象 var 对象名 = {}

var emp={
	empno:1001,
	ename:"tom",
	job:"housekeeping",
	sal:4000,
	eat:function(fruit){
		console.log(emp.ename + " is eating " + fruit);
	}
}
//访问对象的属性
console.log(emp.empno +"的姓名：" + emp.ename + ",职位：" + emp.job + ",薪资：" + emp.sal);
emp.eat("apple");

（二）原始的构造函数创建对象

先用new关键字创建完毕对象之后，再为对象的属性赋值或者指定函数

var emp = new Object();
emp.empno = 1001,
emp.ename = "smith",
emp.job = "driver",
emp.sal = 4000,
emp.eat = function(fruit) {
	console.log(this.ename + " is eating " + fruit);
}
console.log(emp.empno + "的姓名：" + emp.ename + ",职位：" + emp.job + ",薪资：" + emp.sal);
emp.eat("watermelon");

（三）自定义的构造函数创建对象

//index.js文件
function Emp(empno,ename,job,sal){//构造函数首字母大写
	this.empno = empno;
	this.ename = ename;
	this.job = job;
	this.sal = sal;
	this.eat=function(fruit){
		console.log(this.ename+" is eating " + fruit);
	}
}
var emp = new Emp(1001,"smith","driver",4000);//构造函数创建对象
console.log(emp.ename+"的编号:"+emp.empno+",职位:"+emp.job+",薪资："+emp.sal);//smith的编号：1001,职位：driver,薪资4000
emp.eat("watermelon");//smith is eating watermelon

七、js常用方法

八、js操作节点属性

（一）获取随机数（Math.random()函数）

类似于Java中获取随机数的方式，js使用内置对象Math，调用Math对象的random()方法即可。

//html代码
<img src="../img/1.jpg" alt="图片加载失败" />

//index.js
//取值范围[0,1)
var num = Math.random();
//取值范围[1,10)
var num2 = Math.ceil(Math.random()*10);
var num3 = Math.floor(Math.random()*10+1);
//随机获取50个1~10的随机数
for(var i=0;i<50;i++){
	var num = Math.ceil(Math.random()*20);
	console.log(num+"<br>");
}

（二）js操作节点属性

1.setAttribute(name,value)操作属性

//1.修改图片属性
//取得图片对象数组，并选取第一张图片对象
var img = document.getElementsByTagName("img")[0];
//随机修改图片
img.setAttribute("src","../img/"+Math.ceil(Math.random()*10)+".jpg");

//2实现图片轮播
//封装修改图片方法
function randomUpdateImg(){
	//取得图片对象数组，并选取第一张图片对象
	var img = document.getElementsByTagName("img")[0];
	//随机修改图片
	img.setAttribute("src","../img/"+Math.ceil(Math.random()*10)+".jpg");
}
//setInterval(func,time);按照设置的时间间隔重复调用指定的func方法
window.setInterval(randomUpdateImg(),"2000");

2.使用attributes操作属性

//实现图片轮播
function randomUpdateImg(){
	//取得图片对象数组，并选取第一张图片对象
	var img = document.getElementsByTagName("img")[0];
	//img.attributes函数获取图片对象的所有属性，选取第一个属性，对value值进行重新赋值
	img.attributes[0].value="../img/"+Math.ceil(Math.random()*10)+".jpg"
}
//setInterval(func,time);按照设置的时间间隔重复调用指定的func方法
window.setInterval(randomUpdateImg,"2000");//注意setInterval的方法不要写()

九、字符串常用函数（类似于String的方法）

思考：哪些方法使用之后会改变源字符串的内容，而哪些方法不会改变源字符串的内容

var str = "Helloworld";
//1.根据指定索引取得对应位置的字符
console.log(str.charAt(6));//o
//2.取得指定字符串在源字符串中第一次/最后一次出现的位置（索引值）
console.log(str.indexOf("l"));//第一次出现：2
console.log(str.lastIndexOf("l"));//最后一次出现：8
//3.取得字符串的长度
console.log(str.length);//10
//4.分割字符串（按指定字符或正则）
var num = "1001/1002/1003";
console.log(num.split("/"));
//5.截取字符串（按指定位置）
console.log(str.substring(3,0));//Hel，(0,3)和(3,0)都可以
//6.字符串字母大小写转换
console.log(str.toLowerCase());//helloworld
console.log(str.toUpperCase());//HELLOWORLD

十、 js操作dom节点

（一）操作dom节点步骤

1.取得节点对象（document.getElementByXX）
2.操作dom节点，具体包括以下操作：
（1）创建一个文本节点（appendChild 和 insertBefore）
（2）创建一个元素节点（createElement）
（3）删除节点（removeChild）

//取得div节点对象(要操作节点的父节点)
var div = document.getElementsByTagName("div")[0];//按标签名取得所有div节点对象，选择第一个div对象

//操作节点对象
//1.创建一个文本节点并添加到节点树
//(1)appendChild(默认在选取的div对象的子节点最后一个添加)
var textNode1 = document.createTextNode("<h1>新增的一级标题文本节点1</h1>");//创建一个文本节点
div.appendChild(textNode1);//将新增文本节点添加到节点树

//(2)insertBefor(可选定插入子节点的具体位置，表在XX之前插入)
var textNode2 = document.createTextNode("<h1>新增的一级标题文本节点2</h1>");//创建一个文本节点
div.insertBefore(textNode2,document.getElementsByTagName("p")[0]);//在div节点对象的第一个p字节点之前插入

//2.创建一个元素节点
var elementNode = document.createElement("h1");//指定元素节点的元素类型
elementNode.textContent = "新增的一级标题元素节点3";
div.insertBefore(elementNode,document.getElementsByTagName("h1")[0]);//在两个新增文本节点的下面，这意味着之前插入的两个文本节点都不能算是h1节点

//3.删除节点(貌似只能删除元素节点，因为getElementsByXX的方法无法选择文本节点)
div.removeChild(document.getElementsByTagName("p")[1]);

（二）js操作css样式

//html
	<head>
	<style>
			div{
				border: 1px solid black;
				width:88%;
				height: 300px;
				margin: 0 auto;
				background-color: orange;
				color:white;
			}
		</style>
	</head>
	<body>
		<center>
			<button type="button" onclick="changeColor('grey')">正常模式</button>//changeColor方法里面的参数为什么只能用单引号？
			<button type="button" onclick="changeColor('black')">夜间模式</button>//changeColor方法里面的参数,不用符号或者是双引号都无法正常运行
			<button type="button" onclick="changeColor('green')">护眼模式</button>
		</center>
		<div>
			<p>第一段落</p>
			<p>第二段落</p>
			<p>第三段落</p>
		</div>
	</body>
	<script src="../js/index.js" type="text/javascript"></script>

//index.js
function changeColor(color){
	//获取到div对象
	var div = document.getElementsByTagName("div")[0];
	//设置属性值
	div.style.backgroundColor=color;//这个需要记住
}

十一、事件及其绑定

（一）概念

1.事件就和数据库中的触发器一样，当操作了数据的时候会引发对应的触发器程序执行
2.js中的事件就是对用户特定的行为做出相应的响应的过程
3.其实上就是浏览器监听到用户的某些行为的时候会执行对应绑定程序
4.而在html元素上将触发事件的行为和事件响应的程序关联起来的过程就是事件绑定
5.每个事件都得有自己的载体

（二）具体实现代码

1.直接在html代码中绑定事件
（1）alert方法里面的字符串，只能使用单引号显示’我是绑定事件的超链接’，或者直接数字10也可以
（2）a标签需要有文本，点击文本触发窗口

<!-- html文件-->
<body>
		<!-- 1.alert方法里面的字符串，只能使用单引号显示'我是绑定事件的超链接'，或者直接数字10也可以 -->
		<!-- 2.a标签需要有文本，点击文本触发窗口 -->
		<!-- 3.a标签绑定事件貌似只能用href来绑定，用onclike不行 -->
		<a href="javascript:alert('我是绑定事件的超链接')">超链接</a>
</body>

2.绑定函数（绑定单机事件）
缺陷：
（1）html负责描述内容，如果事件很多，就得在html代码中出现大量的"onxxx"这样的代码，
（2）这种代码不方便维护，看起来也不美观
（3）所以要在js中实现事件的绑定，使用js将要绑定事件的元素取到，然后直接绑定
function定义方法的时候，必须要有方法名吗？哪个时候可以没有？？？

<!-- html文件-->
<body>
	<button type="button" onclick="login('smith','1234')">登录</button>
</body>
<script src="../js/index.js" type="text/javascript"></script>

//index.js
function login(username,password){
	var name = "smith";
	var psw = "1234";
	if(username==name && password==psw){
		alert("登录成功");
	} else {
		alert("用户名密码不正确");
	}
}

3.在js中实现事件绑定

<!-- html文件-->
<body>
	<button type="button" id="btn">登录</button>
</body>

//index.js文件
//取得button对象，并实现事件绑定
//ById是getElement(没有s),另外根据id返回的不是数组不用加[0]
document.getElementById("btn").onclick = login;//注意这种方式方法名后面不用写()
//login方法
function login(username,password){
	var name = "smith";
	var psw = "1234";
	if(username==name && password==psw){
		alert("登录成功");
	} else {
		alert("用户名密码不正确");
	}
}

4.加载事件

<!-- html文件-->
<body>
	<button type="button" id="btn">登录</button>
</body>

//index.js文件
// 加载事件,先加载完html代码之后，再执行js的代码
window.onload=function(){
	//取得button对象，并实现事件绑定
	document.getElementById("btn").onclick = login;
}

//login方法
function login(username,password){
	var name = "smith";
	var psw = "1234";
	if(username==name && password==psw){
		alert("登录成功");
	} else {
		alert("用户名密码不正确");
	}
}

十二、事件冒泡及其阻止

（一）事件冒泡

概念：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级传播到较为不具体的节点（除IE5.5外，所有浏览器都一直冒泡到window）

<!-- html文件-->
	<head>
		<style>
			#c {
				background-color: pink;
				height: 100px;
				width: 100px;
			}
			#b {
				background-color: black;
				height: 200px;
				width: 200px;
			}
			#a {
				background-color: blue;
				height: 300px;
				width: 300px;
			}
		</style>
	</head>
	<body>
		<div id="a">
			<div id="b">
				<div id="c"></div>
			</div>
		</div>
	</body>
	<script src="../js/index.js" type="text/javascript"></script>

//index.js文件
//浏览器：点击c区域，依次弹出c,b,a的弹出框；点击b区域，依次弹出b,a的弹出框；点击a区域，弹出a的弹出框
window.onload=function(){
	//为a,b,c绑定事件
	document.getElementById("a").onclick=function(){
		alert("事件a");
	}
	document.getElementById("b").onclick=function(){
		alert("事件b");
	}
	document.getElementById("c").onclick=function(){
		alert("事件c");
	}
}

（二）阻止事件冒泡 event.stopPropagation()

//情况一：在文档中嵌套层次最深的c节点，绑定事件时设置阻止事件冒泡
浏览器：点击c区域，只弹出c的弹出框；点击b区域，依次弹出b,a的弹出框；点击a区域，弹出a的弹出框
window.onload=function(){
	//为a,b,c绑定事件
	document.getElementById("a").onclick=function(){
		alert("事件a");
	}
	document.getElementById("b").onclick=function(){
		alert("事件b");
	}
	document.getElementById("c").onclick=function(){
		alert("事件c");
		event.stopPropagation();
	}
}

//情况二：在文档中嵌套层次中间的b节点，绑定事件时设置阻止事件冒泡
浏览器：点击c区域，依次弹出c,b的弹出框；点击b区域，只弹出b的弹出框；点击a区域，弹出a的弹出框
window.onload=function(){
	//为a,b,c绑定事件
	document.getElementById("a").onclick=function(){
		alert("事件a");
	}
	document.getElementById("b").onclick=function(){
		alert("事件b");
	}
	document.getElementById("c").onclick=function(){
		alert("事件c");
		event.stopPropagation();
	}
}

（三）监听事件绑定（addEventListener）

//index.js文件
//事件的另外一种绑定方式
window.onload=function(){
	//为a,b,c绑定事件
	document.getElementById("a").addEventListener("click",function(){
		alert("事件a")
	})
	
	document.getElementById("b").addEventListener("click",function(){
		alert("事件b")
	})
	document.getElementById("c").addEventListener("dblclick",function(){
		alert("事件c")
	})
}

十三、window对象

window对象是js提供的一个内置对象，该对象是js最大的内置对象（类似于Object）

（一）window.location对象（可省略window前缀）

用于获得当前页面的地址（URL），并把浏览器重定向到新的页面。

1.location.hostname 返回web主机的域名
2.location.pathname 返回当前页面的路径和文件名
3.location.port 返回web主机的端口（80或443）
4.location.protocol 返回所使用的web协议（http://或https?/）
5.window.location.href=“http://www.xxxx.net”：跳转后有后退功能
6.window.location.replace=“http://www.xxxx.net”：跳转后没有后退功能
7.window.open(“http://www.xxxx.net”);在新的窗口打开链接，一般用于简单的弹出页面，现在基本上都被屏蔽掉

（二）window.history对象（使用时可省略window这个前缀）

1.window.history 对象包含浏览器的历史
2.window.history.back()加载历史列表中的第一个URL，与在浏览器点击后退按钮相同
3.window.history.forward()加载历史列表中的下一个URL，与在浏览器中点击向前按钮相同

（三）window对象的其他方法

1.定时器方法（HTML DOM Window对象的两个方法）
（1）setInterval()间隔指定的毫秒数不停地执行指定的代码
（2）window.setTimeout()暂停指定的毫秒数之后执行指定的代码，只执行一次

2.window.clearTimeout()用于停止执行setTimeout()方法的函数代码
3.window.alert()警告框
常用于可以确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作
4.window.prompt()确认框
用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值是在框中输入的值。如果用户点击取消，那么返回值为null
5.window.confirm()提示框
常用于提示用户在进入页面的输入某个值，当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值，如果用户点击取消，那么返回值为null

Nancy1709

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（一）

目录一、JavaScript历史二、js的基本语法要求三、js的三种使用结构四、js的函数五、js获取html节点一、JavaScript历史1.可以实现几乎素有的浏览器交互功能，而且主流的浏览器都支持js2.大部分浏览器都有解析js的引擎，所以才能执行js的代码3.js不需要进行编译，是解释性语言二、js的基本语法要求1.严格区分大小写2.标识符的起名要求和Java是一样的（1）...
复制链接

扫一扫

专栏目录