JavaScript

最新推荐文章于 2023-08-06 08:23:15 发布

crossroadsss

最新推荐文章于 2023-08-06 08:23:15 发布

阅读量307

点赞数

分类专栏： JavaWeb 文章标签： JavaScript JavaWeb

本文链接：https://blog.csdn.net/qq_44844204/article/details/89303719

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript

js简介

JavaScript是基于对象（js提供好了对象，可以直接拿过来使用）和事件驱动（如鼠标滑动）的脚本语言，主要应用在客户端
特点：

交互性：信息的动态交互
安全性：不可以直接访问本地硬盘
跨平台性：只要是可以解析js的浏览器都可以执行，和平台无关

Java和JavaScript的区别：
两者没啥关系，是不同的公司开发的。

JavaScript是基于对象的，Java是面向对象的
JavaScript只需要解析就可以执行
Java是强类型的语言，JavaScript是弱类型语言

js的组成（三部分）

ECMAScript
ECMA即欧洲计算机协会。js语法
BOM
即browser object model（浏览器对象模型）
DOM
即document object model（文档对象模型）

js和html的结合方式（两种）

使用<script>标签（在body中）

<script type="text/javascript">
	//向页面弹出一个框，显示内容
	alert("aaaa");
</script>

使用script标签引入外部js文件

<script type="text/javascript" src="js文件的路径">
	
</script>

注：在使用了第二种方式后，就不要再往script标签里面写js代码，写了也不会执行

js的数据类型和变量声明

js基本数据类型有string（字符串）、number（数字）、boolean、null（表示对象引用为空）、undefined（定义一个变量，没有赋值）
定义变量都使用var，如var str="abc"
typeof(mm);该函数返回mm的数据类型

js语句

如if、switch、for、while等

js的运算符

js中不区分整数和小数，如123/1000*123的结果为123，而不是0
字符串的加减

var str="456";
alert(str+1);			//结果是4561，相加的时候做的是字符串的连接操作
alert(str-1);			//结果是455，相减的时候做的是相减运算

var str="abc";
alert(str-1);			//提示NaN表示不是一个数字

==和===的区别
==比较的只是值，===比较的是值和类型
引入知识：
document.write("aaaaa");该语句可以直接向页面输出aaaaa
document.write("<hr/>");输出横线

实现99乘法表

<html>
 <head>
  <title>HTML示例</title>
 </head>
 <body>
	<h2>99乘法表</h2>
	<script type="text/javascript">
	document.write("<table border='1' bordercolor='red'>");
	for(var i=1;i<=9;i++){
		document.write("<tr>");
		for(var j=1;j<=i;j++){
			document.write("<td>");
			document.write(j+"*"+i+"="+i*j);
			document.write("</td>");
		}
		document.write("</tr>");
	}
	document.write("</table>");
	</script>
 </body>
</html>

js的数组

定义方式（两种）：

var arr=[1,"4",true];
使用内置Array对象，如：var arr1=new Array(5);和var arr2=new Array(3,4,5,6);

数组有length属性，用于获取数组的长度，如：alert(arr.length);

js的函数

三种定义方式：

使用关键字function

function 函数名(参数表){
		函数体
		//返回值根据需要可有可无
}

匿名函数

var add=function (a,b){
	alert(a+b);
}
add(5,6);		//调用

使用内置对象Function(动态函数，一般不用)
var add=new Function("参数表","方法体和返回值");
如：var add=new Function("a,b","var sum;sum=a+b;return sum;");
也可写成：

var canshu="a,b";
var fangfati="var sum;sum=a+b;return sum;"
var add=new Function("a,b","var sum;sum=a+b;return sum;");

js的全局变量和局部变量

全局变量：在<script>全局变量定义位置</script>之间定义的变量，在另外的<script>中也可使用。
局部变量：在方法中定义的变量，只能在方法内使用。

script标签放的位置

一般吧script标签放在</body>后面，以免由于解析顺序出问题

js的String对象

创建String对象
var str="abcde";
方法和属性

属性length，获取字符串的长度，如document.write(str.length);
方法：
（1）与html相关的方法
bold()：加粗。如：

var str="haha";
document.write(str.bold());

fontcolor(“颜色”)：颜色
fontsize（“5”）：字体大小
link（“链接的地址”）：将字符串显示为超链接
（2）与java相似的方法
concat()：连接字符串
charAt()：返回指定位置的字符串
indexOf()：返回指定字符串的位置，若不存在，则返回-1
split()：把字符串分割为字符串数组
replace()：替换字符串，第一个参数是原始字符，第二个是新字符

js的Array对象

创建数组：
（1）var arr=[1,2,3];
（2）var arr=new Array(3);
（3）var arr=new Array(5,9,3,6);
属性length，用于获取数组中元素个数
方法
（1）concat()，数组的连接
（2）join()，根据指定字符分隔数组中元素。如：

		var arr=new Array(3);
		arr[0]=1;
		arr[1]=2;
		arr[2]=3;
		ducument.write(arr.join("-"));		//运行结果为1-2-3，这里指定了分隔符为“-”

（3）push()，向数组末尾添加一个或更多元素，并返回数组新的长度，push()的参数可为字符，也可为一个数组，但传数组的时候会把整个数组当成一个字符
（4）pop()：删除并返回数组的最后一个元素
（5）reverse()：颠倒数组中的元素

js的Date对象

获取当前时间
var date=new Date();
用toLocaleString()方法可把时间格式转化成当前使用的时间格式
getFullYear()：获取年份
getMonth()：从0-11，获取月份，0表示一月
getDay()：,获取星期（星期几），0-6，0表示星期天
getDate()：获取日期（几号），1-31
getTime()：返回1970年1月1号至今的毫秒数

jsMath对象

这个对象里面的都是静态方法，可以直接Math.方法()

ceil()：对一个数进行上舍入，如10.4向上舍入变成11
floor()：向下舍入
round()：四舍五入
random()：返回0到1之间的随机数，要返回0-9之间的整数可以前者乘以10再向下舍入得到
PI属性获取圆周率

js的全局函数

不属于任何对象，可以直接使用

eval()：执行js代码

	var str="alert('1234')";
	eval(str);				//执行上面引号中的代码，在弹窗中显示1234

encodeURI()：对字符进行编码
decodeURI()：对字符进行解码
isNaN()：判断当前字符串是否是数字，若是数字，则返回false
parseInt()：类型转换，转换成整数

js中函数的重载

js中不存在重载，但可以通过arguments数组模拟实现重载，如：

function add(){
	if(arguments.length==2){
		return arguments[0]+arguments[1];
	}
	else if(arguments.length==3){
		return arguments[0]+arguments[1]+arguments[2];
	}
}

js的bom对象

bom即broswer object model，浏览器对象模型
对象有：navigator、screen、location、history、window

navigator：获取客户机的信息（浏览器的信息），比如浏览器的名称
screen：获取屏幕的有关信息，比如宽和高
location：请求url地址。其中的href属性可以获取请求的url地址、设置url地址

	<html>
	 <head>
	  <title>HTML示例</title>
	 </head>
	 <body>
		<input type="button" value="点击跳转" onclick="f()" />
		<script type="text/javascript">
				function f(){
					location.href="http://www.baidu.com";
				}
		</script>
	 </body>
	</html>

history：请求的url的历史记录，如浏览器上的左右箭头切换
histoy.back();上一个URL
history.forward();下一个URL
history.go();加载history列表中的某个具体页面，如history.go(-1);到上一个页面，history.go(1);到下一个页面
window：窗口对象、顶层对象（所有的bom对象都是在window里面操作的）
方法有：
（1）alert()，全称是window.alert()
（2）confirm()，确认提示框

		var flag=window.confirm("是否删除？");
		if(flag==true){
			alert("删除成功！");
		}
		else{
			alert("删除失败！");
		}

（3）prompt()，输入的对话框
window.prompt("please input:","0");前一个参数显示在对话框上，第二个参数是输入框里的默认值
（4）open()，打开一个新的浏览器窗口或查找一个已命名的窗口
参数总共有四个，一般用两个就行，如：open("打开的新窗口的地址url","","窗口特征，如宽度高度")
（5）close()：关闭窗口，提示询问是否关闭窗口，点击是则关闭窗口。该方法浏览器兼容性差一点
（6）setInerval()：做定时器用，按照指定的周期（以毫秒计）来调用函数或计算表达式，传两个参数，js代码和事件。如：window.setInterval("alert('123');",3000);表示每3秒执行一次alert()方法
（7）setTimeout()：在指定的毫秒数后调用函数或计算表达式，但只会执行一次，参数同上
（8）clearInterval()：用于清除定时器，参数为setInterval返回的id值，如：var id1=setInterval("alert('123');",3000);
（9）clearTimeout()：用于清除定时器，参数为setTimeout返回的id值

js的dom对象

dom即document object model，文档对象模型
标记型文档解析过程：
根据html的层级结构，在内存中分配一个树形结构，需要把html的每部分封装成对象。
document对象：整个文档
element对象：标签对象
属性对象
文本对象
Node节点对象，这个对象是这些对象的父对象，如果在对象里面找不到想要的方法，这个时候到Node对象里面去找

DHTML的简介

是很多技术的简称，如：html（封装数据）、css（设置样式）、dom（操作html文档）、JavaScript（js语法）

document对象

常用方法：

write()：向页面输出
getElementById()：通过id得到元素（标签），实际中用的较多

	<body>
		<input type="text" id="nameid" name="name1"/>
		<br/>
		<script type="text/javascript">
			var input1=document.getElementById("nameid");		//得到input标签
			alert("input1.name");				//得到input里面的value值
			input1.value="bbbb";				//向input里面设置一个value值
		</script>
	</body>

getElementsByName()：返回带有指定名称的对象集合（数组），参数为标签里面的name的值
getElementsByTagName()：返回带有指定标签的对象集合

window弹窗案例

在这里插入图片描述
需求：通过点击选择按钮，直接得到相应的编号和姓名
实现过程：

创建一个页面，有两个输入项和一个按钮，按钮上有一个事件，弹出一个新窗口（open()方法）
创建弹出的页面，有一个表格
页面1

	<html>
	 <head>
	  <title>HTML示例</title>
	 </head>
	 <body>
		编号：<input type="text" id="numid" /><br />
		姓名：<input type="text" id="nameid" /><br />
		<input type="button" value="选择" onclick="open1()" />
		<script type="text/javascript">
			function open1(){
				window.open("tanchuang.html","","width=250,height=150");
			}
		</script>
	 </body>
	</html>

页面2

	<!DOCTYPE html>
	<html>
		<head>
			<title>弹窗</title>
		</head>
		<body>
			<table border="1">
				<tr>
					<td>操作</td>
					<td>编号</td>
					<td>姓名</td>
				</tr>
				<tr>
					<td><input type="button" value="选择" onclick="fun1('001','张三')"/></td>
					<td>001</td>
					<td>张三</td>
				</tr>
				<tr>
					<td><input type="button" value="选择" onclick="fun1('002','李四')"/></td>
					<td>002</td>
					<td>李四</td>
				</tr>
				<tr>
					<td><input type="button" value="选择" onclick="fun1('003','王五')"/></td>
					<td>003</td>
					<td>王五</td>
				</tr>
			</table>
			
			<script type="text/javascript">
				function fun1(num1,name1){
					var pwin=window.opener;//opener属性可以得到创建这个窗口的窗口
					pwin.document.getElementById("numid").value=num1;
					pwin.document.getElementById("nameid").value=name1;
					window.close();
				}
			</script>
			
		</body>
	</html>

在末尾添加节点案例

需求：ul里面有几个li，通过点击页面上的按钮来给ul添加li
第一步：获取到ul标签
第二步：创建li标签
第三步：创建文本
第四步：把文本加到li下面
第五步：把li加到ul下面

	<html>
	 <head>
	  <title>HTML示例</title>
	 </head>
	 <body>
		<ul id="ulid">
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
		</ul>
		<br />
		<input type="button" value="添加" onclick="add()" />
		<script>
			//在末尾添加节点
			function add(){
				var ul1=document.getElementById("ulid");//获取到ul标签
				var li1=document.createElement("li");//创建标签
				var text1=document.createTextNode("陈六");//创建文本
				li1.appendChild(text1);//把文本加入到li下面
				ul1.appendChild(li1);//把li加入到ul下面
				
			}
		</script>
	 </body>
	</html>

元素对象（element对象）

要操作element对象，首先要获取到element对象
获取属性：getAttribute（“属性名称”）方法
设置属性：setAttribute（“属性名称”，“属性值”）方法
删除属性：removeAttribute（“属性名称”）方法，不能删除value
在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName()，该方法返回的是一个集合，该方法属于document对象

Node对象的属性

nodeName、nodeType、nodeValue

标签节点对应的值
nodeType：1
nodeName：大写标签名称，比如SPAN
nodeValue：null
属性节点对应的值
nodeType：2
nodeName：属性名称
nodeValue：属性的值
文本节点对应的值
nodeType：3
nodeName：#text
nodeValue：文本内容

父节点：parentNode，用该属性可以得到父节点
子节点：childNodes（得到所有子节点，但是兼容性很差），firstChild（获取第一个子节点），lastChild（获取最后一个节点）
同辈节点：nextSibling，获取给定节点的下一个兄弟节点；previousSibling，获取给定节点的上一个兄弟节点

操作DOM节点树

appendChild()：添加子节点到末尾，还可以把一个div里面的ul整体剪切到另一个div
insertBefore(newNode，oldNode)：在某个节点之前插入一个新的节点，注意，没有在后面插入的方法
removeChild()：删除节点，通过父节点删除，而不能自己删除自己
第一步：获取要删除的节点
第二步：获取其父节点
第三步：执行删除
replaceChild(newNode，oldNode)：替换节点，也通过父节点替换
cloneNode(boolean)：复制节点，参数判断是否复制子节点
使用appendChild()方法，但这里appendChild()操作的是一个副本，所以复制后原节点还在，而不像前面的剪切

innerHTML属性

该属性不是DOM标准的组成部分，innerHTML属性可以用来读、写某给定元素里的HTML内容，多与div、span标签配合使用。
第一个作用：获取文本内容

<html>
 <head>
  <title>HTML示例</title>
 </head>
 <body>
	<span id="sid">哈哈呵呵</span>
	<script>
		var span1=document.getElementById("sid");
		alert(span1.innerHTML);
	</script>
 </body>
</html>

第二个作用：向标签里面设置内容（可以是HTML代码）

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	  #div11{
		  width: 200px;
		  height: 100px;
		  border: 2px dashed red;
	  }
  </style>
 </head>
 <body>
	<div id="div11">
		
	</div>
	<script>
		var div11=document.getElementById("div11");
		div11.innerHTML="<h1>AAAAA</h1>";
	</script>
 </body>
</html>

var tab="<table>";
tab+="</table>";
//前两行相当于var tab="<table></table>";

案例：动态显示时间

得到当前时间
var date=new Date();
var d1=date.toLocaleString();
需要让页面每一秒获取时间
setInterval()，定时器
显示到页面上
每一秒向div里面写一次时间，使用innerHTML属性

<html>
	 <head>
	 	 <title>HTML示例</title>
	 </head>
	 <body>
		<div id="time">
			
		</div>
		<script>
			function getTime(){
			var date=new Date();  //获取当前时间,但得到的不是常规时间格式
				var d1=date.toLocaleString();   //格式化时间
				var div1=document.getElementById("time");  //获取div
				div1.innerHTML=d1;  //向div里面放入时间
			}
			setInterval("getTime()","1000");  //使用定时器实现每一秒写一次时间
		</script>
	 </body>
</html>

案例：全选练习

在这里插入图片描述

<html>
	<head>
		<title>HTML示例</title>
	</head>
	<body>
		<input type="checkbox" id="boxid" onclick="seAllNo()" />全选/全不选
		<br />
		<input type="checkbox" name="love" />篮球<br />
		<input type="checkbox" name="love" />排球<br />
		<input type="checkbox" name="love" />足球<br />
		<input type="checkbox" name="love" />乒乓球
		<br />
		<input type="button" value="全选" onclick="seAll()" />
		<input type="button" value="全不选" onclick="seNo()" />
		<input type="button" value="反选" onclick="seOther()" />
		<script>
            function seAllNo(){
                var box1=document.getElementById("boxid");
                if(box1.checked==true){
                   seAll();
                }
                else{
                    seNo();
                }
                
            }
			function seAll() {
				/*
				1、获取要操作的复选框getElementsByName()
				2、上面方法返回的是数组，使用checked判断是否选中，checked=true表示选中
				3、遍历数组，得到每一个checkbox，让它们的属性checked=true
				*/
				var loves = document.getElementsByName("love"); //获取要操作的复选框,得到数组
				for (var i = 0; i < loves.length; i++) {
					var love1 = loves[i]; //遍历数组
					love1.checked = true;
				}
			}

			function seNo() {
				var loves = document.getElementsByName("love");
				for (var i = 0; i < loves.length; i++) {
					var love1 = loves[i];
					love1.checked = false;
				}
			}

			function seOther() {
				var loves = document.getElementsByName("love");
				for (var i = 0; i < loves.length; i++) {
					var love1 = loves[i];
					if (love1.checked == true) love1.checked = false;
					else {
						love1.checked = true;
					}
				}
			}
		</script>
	</body>
</html>

案例：下拉列表左右选择

在这里插入图片描述

<html>
	<head>
		<title>html示例</title>
	</head>
	<body>
        <div style="float: left;">
            <div>
                <select id="select1" multiple="multiple" style="width: 100px;height: 200px;">
                    <option>紫衫龙王</option>
                    <option>金毛狮王</option>
                    <option>白眉鹰王</option>
                    <option>青翼蝠王</option>
                </select>
            </div>
            <div>
                <input type="button" value="选中添加到右边" onclick="seToRight()" /><br />
                <input type="button" value="全部添加到右边" onclick="allToRight()" />
            </div>
        </div>
        
        
        <div>
            <div>
                <select id="select2" multiple="multiple" style="width: 100px;height: 200px;">
                    <option>灭绝师太</option>
                </select>
            </div>
            <div>
                <input type="button" value="选中添加到左边" onclick="seToLeft" /><br />
                <input type="button" value="全部添加到左边" onclick="seToLeft" />
            </div>
        </div>
        <script type="text/javascript">
            //选中添加到右边 
            function seToRight(){
                var select1=document.getElementById("select1");  //获取到左边的下拉列表
                var arr=select1.getElementsByTagName("option");   //获取到其下的option组
                for(var i=0;i<arr.length;i++){
                    arr1=arr[i];
                    if(arr1.selected==true){   //判断该option是否被选中
                        var select2=document.getElementById("select2");   //获取到右边的下拉列表
                        select2.appendChild(arr1);   //使用appendChild()方法剪切到右边
                        i--;   //每剪切过去一个option,数组长度就会减1,所以应该还是从i=0开始
                    }
                }
            }
            //全部添加到右边
            function allToRight(){
                var select1=document.getElementById("select1");  //获取到左边的下拉列表
                var arr=select1.getElementsByTagName("option");   //获取到其下的option组
                for(var i=0;i<arr.length;i++){
                    arr1=arr[i];
                    select2.appendChild(arr1);   //使用appendChild()方法剪切到右边
                    i--;   //每剪切过去一个option,数组长度就会减1,所以应该还是从i=0开始
                    
                } 
            }
            //选中添加到左边
            function seToLeft(){
                //类似于上面两个方法
            }
            //全部添加到左边
            function seToLeft(){
                //类似于上面两个方法
            }
        </script>
	</body>
</html>

案例：省市联动

在这里插入图片描述

<html>
	<head>
		<title>Country_city</title>
	</head>
	<body>
        <select id="countryid" onchange="add1(this.value);">
            <option value="0">--请选择--</option>
            <option value="中国">中国</option>
            <option value="美国">美国</option>
            <option value="德国">德国</option>
            <option value="日本">日本</option>
        </select>
        <select id="cityid">
            
        </select>
	</body>
    <script type="text/javascript">
        var arr_country=new Array(4);
        arr_country[0]=["中国","北京","上海","广州","兰州"];
        arr_country[1]=["美国","纽约","华盛顿","芝加哥","旧金山"];
        arr_country[2]=["德国","柏林","慕尼黑","狼堡","法兰克福"];
        arr_country[3]=["日本","东京","北海道","长崎","大阪"];
        function add1(va){
            var city1=document.getElementById("cityid");   //获取第二个select
            var options1=city1.getElementsByTagName("option");
            for(var m=0;m<options1.length;m++){   //如果数组存在,遍历删除,已经有的城市,因为只要该国家的城市，不能在其他国家城市后追加
                var op=options1[m];
                city1.removeChild(op);  //删除option,通过父节点删除
                m--;
            }
            for(var i=0;i<arr_country.length;i++){   //遍历二维数组
                var arr1=arr_country[i];
                var firstvalue=arr1[0];
                if(firstvalue==va){   //如果国家名称和参数相等
                    for(var j=1;j<arr1.length;j++){   //遍历数组,获取第一个元素后面的元素
                        var value1=arr1[j];
                        var option1=document.createElement("option");  //创建option
                        var text1=document.createTextNode(value1);   //创建文本
                        option1.appendChild(text1);  //把text1添加到option1中
                        city1.appendChild(option1);  //把option1添加到city1中
                    }
                }
            }
        }
    </script>
</html>

案例：动态生成表格

在这里插入图片描述

<html>
	<head>
		<title>动态生成表格</title>
	</head>
	<body>
        行：<input type="text" id="row" />
        列：<input type="text" id="col" /><br />
        <input type="button" value="生成" onclick="add2()" />
        <div id="divv">
            
        </div>
	</body>
    <script type="text/javascript">
        function add2(){
            var r=document.getElementById("row").value;  //得到行
            var c=document.getElementById("col").value;  //得到列
            var tab="<table border='1' bordercolor='blue'>";  //把表格放到一个变量里面
            for(var i=1;i<=r;i++){   //循环行
                tab+="<tr>";
                for(var j=1;j<=c;j++){   //循环单元格
                    tab+="<td>张三</td>";
                }
                tab+="</tr>";
            } 
            tab+="</table>";
            var divv=document.getElementById("divv");  //得到div,把生成表格的代码放到div中,使用innerHTML属性
            divv.innerHTML=tab;
        }
    </script>
</html>

表单提交方式

使用submit提交
使用button提交

<!DOCTYPE html>
<html>
	<head>
		<title>表单提交</title>
	</head>
	<body>
        <form id="form1">
            <input type="text" name="username" /><br />
            <input type="button" value="提交" onclick="form1()" />
        </form>
	</body>
    <script type="text/javascript">
        function form1(){
            var form1=document.getElementById("form1");
            form1.action("要提交到的地址");
            form1.submit();
        }
    </script>
</html>

使用超链接提交
<a href="#?username=123456">使用超链接提交</a>代码中#表示要提交到的地址

得到焦点和失去焦点

得到焦点：事件onfocus
失去焦点：事件onblur

<!DOCTYPE html>
<html>
	<head>
		<title>得到焦点和失去焦点</title>
	</head>
	<body>
        <input type="text" id="id1" name="text1" value="please input" onfocus="focus1()" onblur="blur1"  />        
	</body>
    <script type="text/javascript">
        function focus1(){
            var input1=document.getElementById("id1");
            input1.value="";
        }
        function blur1(){
            var input1=document.getElementById("id1");
            input1.value="please input";
        }
    </script>
</html>

crossroadsss

关注

0
点赞
踩
1

收藏

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

JavaScriptjs简介JavaScript是基于对象（js提供好了对象，可以直接拿过来使用）和事件驱动（如鼠标滑动）的脚本语言，主要应用在客户端特点：交互性：信息的动态交互安全性：不可以直接访问本地硬盘跨平台性：只要是可以解析js的浏览器都可以执行，和平台无关Java和JavaScript的区别：两者没啥关系，是不同的公司开发的。JavaScript是基于对象的，Ja...
复制链接

扫一扫