一、简介
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
我的第一个JavaScript程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>
</body>
</html>
1.为什么学习 JavaScript?
JavaScript web 开发人员必须学习的 3 门语言中的一门：
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 网页的行为
JavaScript 是脚本语言
2.JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
一、JS的概念和声明
问题
在网页的发展历程中，发现网页不能对用户的数据进行自动校验和提供一些特效，造成用户体验极差。
解决
使用JavaScript
作用
可以让网页和用户之间进行直接简单的交互
可以给网页制作特效和画面
注意
js是由浏览器解析执行的
js需要在HTML文档中进行声明
使用
声明js代码域
-
在head标签中使用script声明js代码
<head> <script type="text/javascript"> function test(){ alert("hello js!"); } </script> </head> -
在head标签中使用script引入外部声明的js文件
<script src="js/my.js" type="text/javascript" charset="utf-8"> </script>
二、JS的变量学习
作用：变量是用来存储数据的，方便程序进行操作
1.js的变量声明
使用var关键字进行变量声明，格式如下
var 变量名=初始值；
2.js变量的特点
- 变量声明只有var关键字，声明的变量可以存储任意类型的数据
- js中可以不使用分号结尾，但是为了提升代码的可读性，建议使用
- 允许出现同名变量，但是后面的会覆盖前面
- 声明不赋值，默认是undefined
3.js的数据类型
使用关键字typeof判断数据类型
number:数值类型
string:字符类型
boolean:布尔类型
object:对象类型
4.js的变量强转
使用Number（）方法，将其他数据类型转换为数值类型，转换失败返回NaN（not a number，是number类型）
使用Boolean（）方法，将其他数据类型转换为布尔类型，有值为true，无值为false
5.特殊的值
null（object类型）
undefined（undefined类型）
NaN（number类型）
三、JS的运算符
算数运算符
加法：+，在有一方为字符串时，结果为字符串
减法：-
乘法：*
除法：/
取余：%
除了+在遇到字符串时会默认字符串拼接，其余符号遇到非数字会进行隐式类型转换为数字再运算
逻辑运算符
1 与或非
！
&&
||
按位与
按位或
2 关系运算符
++
--
+=
-=
！=
>=
<=
等等
1.==
<script type="text/javascript">
var a=1;
var a1="1";
var a2=true;
var a3="true";
var a4="a";
var a5="a";
alert(a==a1);//true
alert(a==a2);//true
alert(a==a3);//false
alert(a1==a2);//true
alert(a1==a3);//false
alert(a2==a3);//false
alert(a4==a5);//true
<script>
等值运算符：==
先判断类型，类型一致则直接比较。
类型不一致，则先使用Number（）进行强转后进行比较
注意：alert（none==undefined）返回true
2.===
等同运算符：===
先判断类型，类型一致则再比较内容，内容也一致则返回true
类型不一致则直接返回false
注意：alert（none===undefined）返回false
四、JS的逻辑结构
if
单分支
双分支
多分支
switch
switch (){
case value:
....
break;
default:
break;
}
循环结构
for(var i;i>100;i--){
}
while(){
}
do{
}while()
五、JS的数组
1.数组的声明
var arr=new Array();
arr[0]="abc";
alert(arr);//abc
var arr2=new Array(5);
alert(arr2.length);//5,长度为5
var arr3=[1,2,3,4,5];
alert(arr3);//1,2,3,4,5
var arr4=new Array([5,6]);
alert(arr4.length);//1,arr4的第一个元素为一个数组
js中的数组声明不用指定长度，js的数组长度是不固定的
2.数组的赋值和取值
var arr=[];
arr[0]="2";
arr[1]="abc";
arr[2]="true";
arr[3]=new Data();
arr[10]="哈哈";
alert(arr);//js内的数组可以存储任意类型数值,而且可以跳着赋值。
//如果下标所在数组值不存在，返回undefined
3.数组的length属性
var arr=[];
alert(arr.length);//0
arr[10]="abc";
alert(arr.length);//11
arr.length=100;
alert(arr.length);//100
- 作用1：数组名.length 返回当前数组的长度
- 作用2：数组名.length=值，动态改变数组的长度
- 当length小于当前数组长度，后面数据会丢失
- 当length大于原有长度，则使用空进行填充
4.数组的遍历
使用for循环
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
for in
for(var i in arr){
alert(arr[i]);
}
5.一个网页计算器例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<style type="text/css">
#showdiv{
border: solid 1px;
width: 320px;
padding-bottom: 20px;
text-align: center;
margin: auto;//设置居中
margin-top: 50px;
border-radius: 10px;//设置边框角度
background-color: floralwhite;
}
input[type=text]{
margin-top: 20px;
width: 290px;
height: 40px;
font-size: 20px;
text-align: right;
padding-right: 10px;
}
input[type=button]{
width: 60px;
height: 60px;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
font-size: 30px;
font-weight: bold;
font-family: serif;
}
input[type=button]:hover{
background-color: aliceblue;
}
</style>
<script type="text/javascript">
function test(btn){
//获取button按钮对象的value
var num=btn.value;
//根据点击动作执行对应的业务逻辑
switch (num){
case "=":
document.getElementById("t1").value=eval(document.getElementById("t1").value);
break;
case "c":
document.getElementById("t1").value="";
break;
default:
//将按钮的值赋值给input输入框
document.getElementById("t1").value+=num;
break;
}
}
</script>
</head>
<body>
<h3 align="center">计算器</h3>
<hr >
<div id="showdiv">
<input type="text" name="" id="t1" value="" readonly="readonly"/><br>
<input type="button" name="" id="" value="1" onclick="test(this)"/>
<input type="button" name="" id="" value="2" onclick="test(this)"/>
<input type="button" name="" id="" value="3" onclick="test(this)"/>
<input type="button" name="" id="" value="4" onclick="test(this)"/><br>
<input type="button" name="" id="" value="5" onclick="test(this)"/>
<input type="button" name="" id="" value="6" onclick="test(this)"/>
<input type="button" name="" id="" value="7" onclick="test(this)"/>
<input type="button" name="" id="" value="8" onclick="test(this)"/><br>
<input type="button" name="" id="" value="9" onclick="test(this)"/>
<input type="button" name="" id="" value="0" onclick="test(this)"/>
<input type="button" name="" id="" value="+" onclick="test(this)"/>
<input type="button" name="" id="" value="-" onclick="test(this)"/><br>
<input type="button" name="" id="" value="*" onclick="test(this)"/>
<input type="button" name="" id="" value="/" onclick="test(this)"/>
<input type="button" name="" id="" value="c" onclick="test(this)"/>
<input type="button" name="" id="" value="=" onclick="test(this)"/>
</div>
</body>
</html>
6.数组的常用操作
1).数组合并---concat
<script typr="text/javascript">
var arr=[1,"abc","zhangsan","12"];
var b=["hello","今天天气不错"];
var c="js";
var d=arr.concat(b,c);
//d=[1,"abc","zhangsan","12","hello","今天天气不错","js"],d.length=7
</script>
2).数组转字符串---join
image-20200127182120202.png
image-20200128161530066.png
3）pop（）、shift()
将数组视为栈，弹栈操作，移除数组最后一个元素并返回该元素
shift()与之相反，将数组视为队列，进行出队操作
var arr=[1,"abc","zhangsan","12"];
var ele=arr.pop();//ele="12"
4) push()、unshift()
将数组视为栈，压栈操作，在数组最后追加一个元素或者多个元素并返还数组长度
unshift（）与之相反，将数组视为队列，进行入队操作
注意：如果追加的是一个数组，新数组整体作为旧数组的一个元素。
从中可知JavaScript的数组是链式结构。
5）reverse()
将数组颠倒，同时返回该数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
//fruits 结果输出：
//Mango,Apple,Orange,Banana
6）sort（）排序方法
array.sort(sortfunction)
| 参数 | 描述 |
|---|---|
| sortfunction | 可选。规定排序顺序。必须是函数。 |
| Type | 描述 |
|---|---|
| Array | 对数组的引用。请注意，数组在原数组上进行排序，不生成副本。 |
注意：当数字是按字母顺序排列时"40"将排在"5"前面。使用数字排序，你必须通过一个函数作为参数来调用。
7)splice，从中间删除或插入
语法
array.splice(index,howmany,item1,.....,itemX)
参数 Values
| 参数 | 描述 |
|---|---|
| index | 必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 |
| howmany | 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 |
| item1, ..., itemX | 可选。要添加到数组的新元素 |
返回值
| Type | 描述 |
|---|---|
| Array | 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。 |
注意，可以删除0个，返回空数组
8）toString、valueOf
image.png
valueOf（）定义和用法
valueOf() 方法返回 Array 对象的原始值。
该原始值由 Array 对象派生的所有对象继承。
valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。
注意： valueOf() 方法不会改变原数组。
六、JS的函数
js的函数学习一：
作用：功能代码块的封装，减少代码冗余
1 函数的声明：
方式一
function函数名（形参名1，形参名2，...）｛执行体｝
方式二
var 函数名=new Function（“形参1”，“形参2”，...，“函数体”）；
该种方式中，将函数作为一个类，new了一个函数对象，如使用类型强转为字符串，可以发现该字符串与方式一相同。
只不过该种方式声明的函数名调用函数时，调用的是对象内的anonymous函数
var test2=new Function("a1","a2","alert('I'm function2')");
test2(1,2);
方式三
var test3=function(a1,a2){
alert("I'm functon3");
}
2 函数的参数
function testParam(a1,a2){
alert("I'm learning Param")
}
testParam();//正确，有初值undefined
js中的函数在调用时，形参可以不赋值，也可以少赋值（实参依次赋值）或者多赋值
因此js中没有函数重载
3 函数的返回值
默认返回值是undefined
注意:js的代码声明趋于和执行区域是一起的，都是在js代码域中
函数学习二
1 函数的执行符
var test1=function(){
alert("函数的执行符学习")；
return "js";
}
alert(test1);//不执行test1，打印test1的内容
alert(test1());//执行test1，打印test1返回值的内容
在js中函数的执行符就是小括号
没有小括号时函数名就是一个变量
2 函数作为实参传递
image.png
image.png
在js中函数是可以作为实参进行传递的。
上图中a加上（）则显示返回值undefined
3 开发中常用的传递方式⭐
function testObj2(fn){
//testObj2函数在被调用的时候，实参必须是一个函数对象
fn();
}
testObj2(function(){
alert("开发");
})
优点：函数对象的动态执行，不用预先声明好，调用时传入即可
七、JS的自定义类
1、类的声明
function Person(name,age){
this.name=name;
this.age=age;
this.fav="sing";
this.test=function(a){
alert(a);
}
}
2、类的使用
var p1=new Person("zhangsan",32);
alert(p1.name,p1.age);
p1.test("hello");//等于alert（“hello”）
p1.adress="beijing";//正确用法
3、类的“继承”
var p2=new Person("lisi",23);
alert(p1.test===p2.test);//false
function Person(name,age){
this.name=name;
this.age=age;
this.fav="sing";
}
........
........
Person.prototype.test=function(a){alert(a);}//共有
alert(p1.test===p2.test);//false
prototype关键字
通过该关键字实现了不同对象之间的数据共享
作用
-
实现某个类的所有子对象的方法区对象的共享，节省内存
-
伪继承（可以链式继承-----）
function User(uname,pwd){ this.uname=uname; this.pwd=pwd; } Person.prototype.user=new User(); User.prototype.testU=function(){alert("我是user")}; p1.user.testU();//可以通过p1对象调用testU方法了Person.prototype=new User(); p1.prototype.testU();
4、自定义对象
1）创建自定义对象
对象的作用：用来存储整体数据
原因：很多时候我们没有办法预先知道一个对象应该有哪些属性，所以只能临时创建一个对象来自定义属性存储数据，来保证数据的完整性。
应用：
Ajax会使用
使用：
1、创建自定义对象
var 对象名=newObject（）；
对象名.属性名1=属性值1；
...
...
var 对象名={};
对象名.属性名1=属性值1；
...
...
2、一般用来存储数据，不会再自定义对象中存储函数对象
3、js中的对象属性和内容是可以自定义扩充的，不是依赖于类的声明的，类知识对象公共部分的一种声明，是为了节省代码的冗余的。
var obj=new Object();
obj.name="zhangsan";
obj.age=23;
obj.test=function(){
alert("我是obj");
}
5、js的常用方法和对象
作用：js将常用的功能已经封装好，调用即可，不用重复封装。
String
操作字符
function testString(){
var str="abcdefg";
//1.大小写转换
alert(str.toUpperCase()+":"+str.toLowerCase());
//2.字符串截取
alert(str.substr(0,1));
//substr:返回一个从指定位置开始的指定长度的字符串，参数为start，length：从start开始要截取的长度
//substring:返回位于string对象中指定位置的字符串，参数为start，end：字符串的结束位置
//3.查找字符位置
indexOf 返回指定字符第一次出现的位置
lastIndexOf 返回指定字符最后一次出现的位置
}
Date
需要先 var 变量名=new Date（）；
//Date对象
function testDate(){
//创建日期对象
var d=new Date();
alert(d);//隐式调用toString方法，显示当前时间
//操作日期和时间
//1 获取年份
alert(d.getYear());//返回1900年距今的年数
alert(d.getFullYear());//返回当前的年份
//获取月份
alert(d.getMonth()+1);//获取当前的月份数（从0算起），注意+1
//获取日期
alert(d.getDate());//返回当前的日期
//获取星期几的数字
alert(d.getDay());//返回星期数。星期天是0
//获取小时数
alert(d.getHours());//返回小时数
//获取分钟数
alert(d.getMinutes());//返回当前的分钟数
//获取秒数
alert(d.getSeconds());//返回当前的秒数
}
js获取的时间是客户端的时间，不能作为功能校验标准
Math
使用：Math.函数名
function testMath(){
//随机数字
alert(Math.random());//数值在0-1之间
//四舍五入
round()
//上下取整
ceil()
floor()
//
//
//
}
Global
global对象是一个固有对象，目的是把所有全员方法集中在一个对象中
global对象没有语法，直接调用其方法
//eval方法,直接把参数作为方法执行
eval("var a=123;");//等于声明了一个变量a
//isNaN方法。返回一个布尔值，指明提供的值是否值得保留至NaN（不是数字），如果参数用Number强转后是NaN，返回true
//parseInt,返回字符串转换后得到的整数
parseInt("abc");//返回NaN
parseInt("12abc");//返回12
//parseFloat同理
八、Js的事件机制学习：
作用：根据用户在网页中的不同操作触发执行对应的功能函数
概念：基于监听的，一个动作会触发其他事物的执行
使用：
单双击事件：
单击事件
<input type="button" name="" id="" value="测试" onclick="函数名();" />
注：
js中添加事件的第一种方式
在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数
js中的事件只有在当前HTML元素上有效
一个HTML元素可以添加多个不同的事件
一个事件可以监听触发多个函数的执行，不同函数之间用分号隔开
双击事件
ondblclick
鼠标事件
onmouseover() 鼠标悬停事件
onmousemove() 鼠标移动
onmouseout() 鼠标移出
键盘事件
onkeyup 键盘弹起事件
onkeydown 键盘下压事件
焦点事件
onfocus 获取焦点事件
onblur 失去焦点事件
页面加载事件
onload 页面加载事件
值改变事件
onchange
事件机制学习2
1.给合适的HTML标签添加合适的事件
onchange-----给select下拉框
onload-----给body
单双击-----用户会进行点击动作的HTML元素
鼠标事件----用户会进行鼠标移动操作的
键盘事件-----用户会进行键盘操作的HTML元素
2.给HTML元素添加多个事件时，注意事件之间的冲突
例如单双击事件会冲突
当事件的触发条件包含相同部分的时候会产生事件之间的冲突
3.事件的阻断 ⭐
function testA(){
return false;//此时不再跳转
}
---
<a href="http://www.baidu.com" target="_blank" onclick="return testA();">wwwwww</a>
当事件所监听的函数将返回值返回给事件时
false将阻断当前事件所在的HTML标签的功能
true将继续执行当前事件所在的HTML标签的功能
4.超链接调用js函数
function testHref(){
alert("onactive");
}
----
<a href="javascript:testHref()">aaaaa</a>
九、window对象
bom浏览器对象模型
浏览器的内核语言支持规范
是规范浏览器对js语言的支持（js调用浏览器本身的功能）
BOM的具体实现是window对象
window对象学习
window对象不用new，直接使用即可，累死Math的使用方法，window关键字可以省略不写
1.window对象的常用方法
1）.框体方法
<script type="text/javascript">
function testAlert(){
window.alert("警告框体");//无返回值
}
function testConfirm(){
window.confirm("确认框");//提示用户选择一项操作（确认--true/取消---false）
}
function testPrompt(){
var a=window.prompt("提示框");//收集用户信息，返回值为填入的值，未输入为null，默认是空字符串
}
</script>
<input type="button" name="" id="" value="测试警告框" onclick="testAlert()"/>
<input type="button" name="" id="" value="测试确认框" onclick="testConfirm()"/>
<input type="button" name="" id="" value="测试提示框" onclick="testPrompt()"/>
------
2）.定时和间隔执行方法
<script type="text/javascript">
function testSetTimeout(){//触发后指定时间后执行指定函数
window.setTimeout(function(){//返回值为线程id
alert("我是定时执行");
},3000);
}
</script>
<input type="button" name="" id="" value="测试定时执行" onclick="testSetTimeout()"/>
setInterval
image.png
clearTimeout 停止当前的定时方法，参数为定时器id
clearInterval 停止当前的间隔方法，参数为间隔器id
3）.子窗口方法
<script type="text/javascript">
function testOpen(){
//window.open();//出现新的标签页
window.open('son.html',.......);//配置信息直接复制下图的
}
</script>
<input type="button" name="" id="" value="测试定时执行" onclick="testOpen()"/>
image.png
分别是子页面相对路径、打开方式、高、宽、距上距离、距左距离、工具栏、菜单栏、滚动条、大小是否可变、地址栏、状态栏
<--!以下是son.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>son页面</title>
<script type="text/javascript">
function testTime(){
window.setInterval(function(){
var span=document.getElementById("timeSpan");
span.innerHTML=span.innerHtML-1;
if(span.innerHTML==0){
window.close();//只能关闭window.open打开的页面
}
},1000);
}
</script>
</head>
<body onload="testTime">
<h3>son页面</h3>
<hr />
<b>本页面<span id="timeSpan" style="color:red;font-size:40px;">5</span>秒后关闭</b>
</body>
</html>
2.子页面调用父页面的函数
子页面中使用window.opener.函数名()；即可调用父页面函数
作用：可以从子页面返回信息给父页面，并且刷新父页面
3.window对象的常用属性
地址栏属性location
window.location.href="http://www.baidu.com";跳转到指定网址
window.location.reload();重新刷新
历史记录属性
window.history.forward();//前进
window.history.back();//页面资源后退
window.history.go(index)；//跳转到指定的历史记录资源，//index=0相当于刷新当前页面
屏幕属性
var x=window.screen.width;
var y=window.screen.height;
浏览器配置属性
var a=window.navigator.userAgent;
获取浏览器信息
十、主体面板属性（document）
document对象学习
1.document对象的概念
浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息
2.使用document对象
1）获取HTML元素对象对象
①直接获取方式
id getElementById 返回值是该元素对象
name getElementsByName 返回值是一个名叫NodeList的对象数组
通过标签名 getElementsByTagName 返回值是一个名叫HTMLCollection的对象数组
class getElementsByClass 返回值是一个名叫HTMLCollection的对象数组
返回值都是元素对象
②间接获取方式
父子关系
标签内有标签
var showdiv=document.getElementById("showdiv");
var children=showdiv.childNodes;//返回值为NodeList数组
子父关系
var inp=document.getElementById("inp");
var div=inp.parentNode;
兄弟关系
var ino=document.getElementById("inp");
var preEle=inp.previousSibling;//前一个
var nextEle=inp.nextSibling;//后一个
2）操作HTML元素对象的属性
先获取元素对象
再操作元素属性
var inp=document.getElementById("uname");
alert(inp.type+":"+inp.name);//id,value等属性
//修改元素属性
inp.value="aaa";
inp.type=button;//type属性为空或一个错误的值时，浏览器默认解析为text
可以操作元素的自定义属性
需要使用set、get方法
例如 abc属性
image.png
该方式获取不到
image.png
该用
alert(inp.getAttribute("abc"));
inp.setAttribute("abc","新的值");
当使用set、get方法来获取固有属性时，设置可以成功，但是get只能拿到document内的属性的初试值，拿不到实时数据
3）操作HTML元素对象的内容和样式
innerHTML获取元素对象内所有内容，包括HTML标签
innerText获取元素对象内所有文本内容，不包括标签
修改
var div=document.getElementById("div01");
div.innerHTML="ssssss";
操作元素样式=操作元素属性
//添加、修改、删除样式
var shoudiv=document.getElementById("showdiv");
showdiv.style="backgroud-color:red";//这叫覆盖，只剩背景颜色属性了
showdiv.style.backgroudColor="red";
showdiv.style.border="solid 2px red";
showdiv.style.border="";//置空等于删除元素标签的属性，但不会删除css内的属性
//修改类选择器
//class关键字在document类中叫className
var div01=document.getElementById("div01");
alert(div01.className);//为元素标签的属性值
div01.className="";
4）操作HTML的文档结构
增加节点
删除节点
第一种方式：使用innerHTML
function testAdd(){
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML+="<div><input type='file' name='' id='' value='' /><input type='button' name='' id='' value='删除' onclick='delInp(this)' /></div>
";
}
function delInp(btn){
//获取父级div
var showdiv=document.getElementById("showdiv");
var cdiv=btn.parentNode;
showdiv.removeChild(cdiv);
}
image.png
不太适用于有用户动作的时候
第二种方式：
function testOperation2(){
var showdiv=document.getElementById("showdiv");
var inp=document.createElement("input");
inp.type="file";
var btn=document.createElement("input");
btn.type="button";
btn.value="删除";
btn.onclick=function(){
showdiv.removeChild(inp);
showdiv.removeChild(btn);
showdiv.removeChild(br);
}
var br=document.createElement("br");
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);
}
image.png
5）document操作Form元素
function testform(){
var fm=document.getElementById("fm");
alert(fm);
var frm=document.frm;
alert(frm);//这两个相等
}
//获取form表单元素对象
fm.elements;//只获取表单元素，其余标签不在里面
form表单的常用方法
fm.submit();//等于提交
fm.reset()；
fm.action="http://www.baidu.com/s";
js表单元素的通用属性
只读 readonly
通用 disabled
操作多选框:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function testCheckBox(){
//获取所有多选元素对象数组
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
alert(favs[i].value+":"+favs[i].checked);
}
}
function testCheckAll(){
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=!favs[i].checked;
}
}
</script>
</head>
<body>
<h3>操作表单元素</h3>
<hr />
<b>操作多选框</b><br /><br />
<input type="checkbox" name="fav" id="fav" value="1" />远走高飞<br>
<input type="checkbox" name="fav" id="fav" value="2" />当<br />
<input type="checkbox" name="fav" id="fav" value="3" />李白<br>
<input type="checkbox" name="fav" id="fav" value="4" />杜甫<br>
<input type="checkbox" name="fav" id="fav" value="5" />see you again<br />
<input type="checkbox" name="fav" id="fav" value="6" />fade<br />
<input type="button" name="" id="" value="播放" onclick="testCheckBox()" />
<input type="button" name="" id="" value="全选" onclick="testCheckAll()" />
</body>
</html>
操作下拉框
<script type="text/javascript">
function testCheckBox(){
//获取所有多选元素对象数组
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
alert(favs[i].value+":"+favs[i].checked);
}
}
function testCheckAll(){
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=!favs[i].checked;
}
}
function testSel(){
var sel=document.getElementById("address");
// alert(sel.value);
var os=sel.options;
for(var i=0;i<os.length;i++){
if(os[i].selected==true){
alert(os[i].value+":"+os[i].text);
}
}
}
</script>
<select name="" id="address" onchange="testSel()">
<option value ="0">--请选择--</option>
<option value ="1">北京</option>
<option value ="2">上海</option>
<option value ="3">广州</option>
</select>
6）document操作表格
rowIndex 返回行对象角标
deleteRow（要删除的行对象的角标）
insertRow
insertCell
7）document对象实现form表单校验
获取信息
创建校验规则（正则表达式）
开始校验
输出校验结果
例子
image.png
onblur=“checkUname（）” //失去焦点时触发函数
网友评论