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>