JavaScript入门

最新推荐文章于 2022-09-19 19:07:50 发布

野尘丶

最新推荐文章于 2022-09-19 19:07:50 发布

阅读量328

点赞数

分类专栏： JavaScript JavaWeb 文章标签：学习笔记

本文链接：https://blog.youkuaiyun.com/u012972114/article/details/88933927

版权

JavaWeb 同时被 2 个专栏收录

2 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

这篇博客详细介绍了JavaScript的基础知识，包括语言特点、基础语法、数据类型、数组、函数、对象类型以及DOM操作。JavaScript是一种基于对象和事件驱动的脚本语言，主要应用于客户端。博客内容涵盖JavaScript与Java的区别、基础语法、数组操作、函数定义、常用的对象类型如String、Array、Date等，以及BOM和DOM对象。同时，博客还讨论了JavaScript的变量提升、事件处理和表单验证等实际应用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript入门

一、简介：

基于对象和事件驱动的脚本语言，应用于客户端。
—基于对象：提供好了对象，直接拿来使用，不需要new对象
—事件驱动：js提供动态效果，由事件来触发。
—客户端：浏览器

Java和JavaScript的区别：
a. 二者无任何关系
b. Java是面向对象，js是基于对象
c. Java是基于虚拟机，js是基于浏览器
d. Java是强类型语言，js是弱类型语言

二、基础语法：

JavaScript包含三种语法

ECMAScript基础语法(ECMA:欧洲计算机协会)
DOM(Document Object Model)文档对象模型
BOM(Browser Object Model)浏览器对象模型

在网页中添加JavaScript方法：

通过在网页中加入<Script>…</Script>标记JavaScript的开始和结束，将JavaScript代码放到<Script>…</Script>之间。如：

<script language="JavaScript">
    function returnback() {
        history.back();
        history.back();
    }
</script>

也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以**.js**作为扩展名。

<script src="2.js" language="JavaScript">
</script>

注意：此时不要在<script></script>中写js代码了，即使写了也不会执行。

原则上，放在<head></head>之间。但视情况可以放在网页的任何部分。
一个页面可以有几个，不同部分的方法和变量，可以共享。

ps：<script>标签可以在html的任何位置，一般地，函数定义写在<head>中，执行语句写在<body>后。

Js数据类型和变量定义
var或者不定义直接使用就行
JavaScript的原始类型和声名变量
JavaScript是弱类型语言，定义变量使用 var关键字。

原始类型（五个）：
a) String 字符串：var str = “string”;
b) Number 数字：var m = 123;
c) Boolean 布尔类型：var flag=true;
d) Null：对象的占位符，null表示对象引用为空，所有对象的引用也为object
e) Undefined 有变量，没有赋值
Ps: 通过使用typeof(变量名);来获取变量的类型。

JavaScript的语句
if语句、switch语句、for/while/do…while与Java使用方式一样。
运算符
基本运算与Java一样
注意：

Js中不区分整数和小数。

var m=123;
alert(m/10001000)； //结果为123
在Java中由于123为int类型，123/1000取余就是0，故结果为0。但是在js中，不区分整数和小数123/10001000=0.123*1000=123；

字符串的相加和相减的操作。

var str=”123”;
alert(str+1); //结果为1231;字符串连接
alert(str-1)；//结果为122;将值减1了
var str=”abc”;
alert(str-1);//提示为：NaN，表示不是一个数字（错误提示）

布尔类型的加减操作。

var flag=true；alert（flag+1）；//结果为2
var flag=false；alert（flag+1）；//结果为1
ps：相当于true为1，false为0

==与===的区别 (易错点)
==只是判断值是否相等，如var str=“5”；if(str5) 结果是true
===是判断值+类型是否相同，如var str=“5”；if(str=5) 结果为false
引入知识
直接向页面输出的语句（可以显示在页面）
document.write(xx) ; 其中xx可以为变量、固定值以及HTML代码。

例子：九九乘法表

<script language="JavaScript">
    //document.write("<table style='border:2px dashed orange'>");//只能设置外部边框，没有内部行列线
    document.write("<table border='2' bordercolor='orange'>");//边框线和行列线统一设置
    //九行
    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+"&nbsp"); //注意空格的转义&nbsp;
            document.write("</td>");
        }
        document.write("</tr>");
        //document.write("<br/>");
    }
    document.write("</table>");
</script>

3、数组

定义方式（有三种）
a) 直接定义：定义的时候直接赋值。
var arr =[1,2,3]; var arr=[1,2,”sd”];
b) 使用内置的Array对象。
var arr=new Array(5); //定义一个长度为5的数组
arr[0]=”ssd”; //给第一个赋值；
c) 使用内置的Array对象定义数组的同时直接赋值。
var mycars=new Array(“Saab”,“Volvo”,“BMW”)；
数组的属性 length，可以获取数组长度。
数组名.length
数组的长度可变，不会像Java那样出先数组溢出
数组可以存放不同的数据类型的数据。

4、方法(函数)

定义函数的三种方式（重点掌握前两种）：

使用关键字function。
function 方法名（参数列表）｛
方法体；
[返回值；]
｝
调用方式：方法名（参数列表）;
参数列表直接写参数名称，不用写var。
匿名函数，无方法名。调用时需要起名字。
function（参数列表）｛
方法体；
[返回值；]
｝
var add =function（a,b）{
alert(a+b);
}
add(1,2)；//调用
使用内置对象Function，动态函数。(不建议使用)
var fun =new Function(“参数列表”，“方法体和返回值”);

变量（全局变量和局部变量）
全局变量：在<script>标签中定义的变量，在页面的js代码中都可以使用；
局部变量：在js的方法内定义的变量，只能在方法内部使用。

5、常用的对象类型详解

String对象
创建：var str = “acbdfg”;
属性：length； //获取字符串的长度
方法：

与HTML相关的方法：设置字符样式的相关的

bold() //加粗显示 str.bold();
fontcolor() //设置字符串颜色 str.fontcolor(”red”);
fontsize() //设置字符串字体大小1-7 str.fontsize(2)；
link() //将字符串显示成超链接 str.link(“url”);
sub() & sup() //将字符串显示为下标/上标

与Java相似的方法：

concat() //链接字符串 str.concat(str1);
charAt() //返回指定索引位置处的字符。 str.charAt(index);
charCodeAt() //返回一个整数，代表指定位置上字符的 Unicode 编码。
Eg: str.charCodeAt(index);
indexof() //返回 String 对象内第一次出现指定字符串的字符位置。-1表示没有 str.indexof(“cb”);
split(); //按照指定字符把字符串分割为字符串数组。str.split(“-”);
replace() //将第一个参数替换为第二参数 str.replace(“a” , ”g”);
substr() //返回一个从指定位置开始的指定长度的子字符串。str.substr( start, length );
substring() //返回位于string对象中指定位置的子字符串。str.substring(start , end ); 取得是start与end之间的绝对值，但是不包含最后一位。 [start,end）

Array对象
创建：var arr = [1,2,3];
var arr1 = new Array(3) ; //数组长度为3
var arr2 = new Array(4,5,6); //数组元素为4，5，6
属性：length 获取数组长度
方法：

concat(); //连接数组 arr.concat(arr2);
join(); //把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
如，document.write(arr); //输出显示为：1，2，3
document.write(arr.join(“-”)); //输出显示为：1-2-3
push(); // 向数组的末尾添加一个或更多元素，并返回新的长度。如果push中的是一个数组，则会将数组当成一个整体的（一个元素）添加。
pop(); //删除并返回数组的最后一个元素
reverse(); //颠倒数组中元素的顺序

Date对象
Java中创建对象 new Date().toLocaleString() / new SimpleDateFormat()
Js中创建通过 var date=new Date(); // Wed Feb 20 2019 10:08:52 GMT+0800
date.toLocaleString(); // ‎2019‎年‎2‎月‎20‎日‎ ‎10‎:‎08‎:‎52
方法：

toLocaleString(); //根据本地时间格式，把 Date 对象转换为字符串。
getFullYear(); //从 Date 对象以四位数字返回年份
getMonth(); //从 Date 对象返回月份 (0 ~ 11)。
getDay();//从 Date 对象返回一周中的某一天 (0 ~ 6)。0->星期日
getDate(); //从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getHours()；//返回 Date 对象的小时 (0 ~ 23)。
getMinutes(); //返回 Date 对象的分钟 (0 ~ 59)。
getSeconds(); //返回 Date 对象的秒数 (0 ~ 59)
getTime(); //返回 1970 年 1 月 1 日至今的毫秒数。适用场景：利用毫秒数来处理缓存效果（不缓存） http://www.baidu.com?毫秒数

Math对象
此类的方法都是静态方法，通过Math.方法名() 来使用。
常用方法：

ceil(x); //对数进行上舍入。
floor(x); //对数进行下舍入
round(x); //把数四舍五入为最接近的整数
random() ; //返回 0.0 ~ 1.0 之间的一个伪随机数
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值

全局函数
不属于任何一个对象，直接通过方法名来使用。

eval() 函数可以把一个字符串当作一个JavaScript表达式一样去执行它。
escape() 对字符串进行编码。
decodeURI() 解码某个编码的 URI。
decodeURIComponent() 解码一个编码的 URI 组件。
encodeURI() 把字符串编码为 URI。
encodeURIComponent() 把字符串编码为 URI 组件。
isNaN(); //检查某个值是否是数字。返回true(非数字)/false(是数字)
parseInt(); //解析一个字符串并返回一个整数。

方法的重载
不存在方法的重载，但会通过其他方式来模拟重载效果，但是没有实际的意义。
如何模拟：每个函数都有一个arguaments数组来实现，其用来存放传入的实参。

6、BOM对象

属性：opener 返回对创建此窗口的窗口的引用。window.opener返回父级窗口引用。

1. Window
窗口对象，顶层对象，所有的BOM对象都是在Window里面操作的。

alert(message) 显示带有一段消息和一个确认按钮的警告框。
confirm(message) 显示带有一段消息以及确认按钮和取消按钮的对话框。返回值：true【确定】、false【取消】
prompt(text,defaultText) 显示可提示用户输入的对话框。
– //text:提示内容 defaultText：默认输入值
window.open(URL,name,features,replace)

URL：打开的新窗口的URL地址。
name：新窗口的名称，这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。
features: 新窗口要显示的标准浏览器的特征。如长，宽等。
replace：true - URL 替换浏览历史中的当前条目。false - URL 在浏览历史中创建新的条目。
例子：window.open(“javascript/01.html”,””,”width=200,height=300”);
注意：请不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同。为了使您的代码清楚明白，请使用 Window.open()，而不要使用 open()。

close(); 用于关闭浏览器窗口，有兼容性问题。

方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。

setInterval(“code”,millisec) 按照指定的周期（以毫秒计）来调用函数或表达式。

– code: 需要执行的js代码
– millisec：指定毫秒数
– 返回一个id_of_setinterval
– 每隔millisec执行一次指定的js代码
例子：var id1=setInterval(“alert( ‘ abc ’ )”, 5000); //每隔5s执行alert

setTimeout(“code”, millisec) 在指定的毫秒数后调用函数或表达式。

– code: 需要执行的js代码
– millisec：指定毫秒数。
– 返回一个id_of_settimeout
– etTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

clearInterval(id_of_setinterval) 取消由 setInterval() 设置的 timeout。
clearTimeout(id_of_settimeout) 取消由 setTimeout() 方法设置的 timeout。

2. Navigator：

获取客户机（浏览器）的信息，如：获取浏览器的名称Navigator.aapName

3. Screen：

获取屏幕的信息。如屏幕宽、高、像素、亮度等

4. History：

用户（在浏览器窗口中）访问过的 URL。
属性：length 返回浏览器历史列表中的 URL 数量。
方法：
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。-1/1 表示back/forward效果

5. Location：

地址栏，包含当前URL地址信息。
href属性：获取当前的URL地址 / 设置URL地址，可以指定跳转

7、DOM对象

Document object model 文档对象模型
文档：超文本文档（超文本标记文档）HTML，xml
对象：属性+方法
模型：通过使用属性和方法来操作超文本标记型文档
具体步骤：

要想对标记型文档进行操作，首先需要将标记型文档中的所有内容封装成对象（需要把html中的标签、属性、文本内容都封装成对象object）。
要想对标记型文档进行操作，需要解析标记型文档（画图分析，如何使用dom解析HTML）。如下图：
解析过程具体分析：根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分都封装成对象。
– document对象：整个HTML文档
– element对象：标签对象
– 属性对象：依托于element
– 文本对象：依托于element
– Node节点对象：是上述对象的父对象，如果在上述对象中找不到想要的方法，就去node中去找。

DHTML：动态HTML，是很多技术的简称（了解）
–HTML
–CSS
–DOM
–JavaScript：基础的语法语句ECMAScript

Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问，通常省略window。
常用的方法：

write() 向页面输出变量值、HTML代码
getElementById(id) 可返回对拥有指定 id的element对象的引用。

var input1 = document.getElementById(“nameid”);
alert(input1.name);
input1.value=”aaa”;

getElementsByName(name) 返回带有指定名称的对象集合。
通过传入标签的name值来得到标签，返回的是一个集合（数组）,即使只有一个，返回的的也是一个集合，集合长度为1，此时可以通过数组下标来快速访问
getElementsByTagName(tagName) 返回带有指定标签名的对象集合。
通过传入标签名来获得带有指定标签名的对象集合（数组）。

属性对象Attribute：
属性是依托于标签的，例如标签中的id,
操纵Element对象的属性，首先需要获取到Element(标签)对象。
获取属性值：getAttribute(name);
设置属性值：setAttribute(name，value)
删除属性值：removeAttribute(name);
在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是
getElementsByTagName()方法，该方法返回一个集合

<input type="text" class="haha" id="inputid" value="aaaaa">

**js部分：**
//先获取到input标签
var input1 = document.getElementById("inputid");
//常规获取value的方法
//alert(input1.value);
//使用【getAttribute(name)】来获取
alert(input1.getAttribute("value"));
alert(input1.class); //显示出来是undefined,因为class不是属性，无法打印
//也可以通过 input1.className来进行设置和访问
alert(input1.getAttribute("class")); //可以获取到class的值为haha
input1.removeAttribute("class");  //remove后class值为null
alert("remove后："+input1.getAttribute("class"));
input1.setAttribute("class","bingo");
alert("set后："+input1.getAttribute("class"));

要想获得某一个标签下的所有子标签
– 使用childNodes属性，但是这个兼容性很差，一般不使用
– 使用getElementsByTagName(子标签名)方法，这是唯一有效的方法来获取

//获取ul下面的子标签li
//先获取到ul标签
var ul1=document.getElementById("list2");
//使用ChildNodes属性
var lis = ul1.childNodes; //返回的是一个集合
alert("childNodes 获取的长度"+lis.length); //不同的浏览器下获取的值会不一样，兼容性很差
//通过使用getElementsByTagname()方法
var lis1 = ul1.getElementsByTagName("li");
alert("长度为："+lis1.length);

常用的属性/方法:

element.appendChild() 向元素添加新的子节点，作为最后一个子节点。
element.attributes 返回元素属性的 NamedNodeMap。
element.childNodes 返回元素子节点的 NodeList。
element.className 设置或返回元素的 class 属性。
element.getAttribute() 返回元素节点的指定属性值。
element.getAttributeNode() 返回指定的属性节点。
element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
element.nodeName 返回元素的名称。
element.nodeType 返回元素的节点类型。
element.nodeValue 设置或返回元素值
element.lastChild 返回元素的最后一个子元素。
element.firstChild 指定节点的首个子节点，以 Node 对象。

注意：document.getElementsByTagName()返回的是带有指定标签名的对象集合。
而Element.getElementsByTagName()返回拥有指定标签名的所有子元素的集合。

Node对象
属性：nodeName / nodeType / nodeValue

element.getAttributeNode(attributename);

ps：对比getAttributeNode()与getAttribute()：前者是获取属性的Node（节点）对象，该对象中包含了属性的name/type/value，而后者是只是获取属性的value。

标签节点：

nodeType：1
nodeName: 大写的标签名
nodeValue: null
属性Element节点：
nodeType：2
nodeName: 属性名
nodeValue: 属性值
文本节点：
nodeType：3
nodeName: #text
nodeValue: 文本内容
Node节点的属性二：
子节点：
– element.childNodes 所有的子节点（集合），但兼容性有问题
– element.firstChild 第一个子节点
– element.lastChild 最后一个子节点
父节点：
–element.parentNode
同级节点
–element.nextSibling 返回位于相同节点树层级的下一个节点。
–element.previousSibling 返回位于相同节点树层级的前一个元素。
操作DOM树

appendChild(node); 添加子节点到末尾效果相当于剪贴
insertBefore(newNode, oldNode); 在oldNode前添加新节点
removeChild(node); 从子节点列表中删除某个节点。，但必须通过父节点来进行删除
replaceChild(newNode, oldNode); 使用newNode替换oldNode,通过父节点进行替换

<ul id="ul1">
		<li id="li1">貂蝉</li>
		<li id="li2">西施</li>
		<li id="li3">王昭君</li>
		<li id="li4">杨玉环</li>
</ul>


function insert1(){
    /* 需求：在王昭君和西施之间插入一个董小宛*/
    //创建li标签
    var li5 = document.createElement("li");
    //创建文本内容
    var text5 = document.createTextNode("董小宛");
    //将text5添加到li5下面（子节点）
    li5.appendChild(text5);
    //需要获取"li3"对象
    var li3=document.getElementById("li3");
    //将li5添加到li3之前
    var ul1= document.getElementById("ul1");
    ul1.insertBefore(li5,li3);
}
function delete1(){
    /*删除子节点li4*/
    //1.获取到需要删除的子节点
    var li4 = document.getElementById("li4");
    //2.获取被删除节点的父节点对象
    var ul11=document.getElementById("ul1");
    //3.通过父节点调用removeChild()来进行删除
    ul11.removeChild(li4);
}
function replace1(){
    /* 创建“李清照”节点并替换掉“杨玉环”节点 */
    //创建li标签
    var li6 = document.createElement("li");
    //创建文本内容“李清照”
    var text6=document.createTextNode("李清照");
    //将text5添加到li6下面
    li6.appendChild(text6);
    //获取杨玉环节点对象
    var li14 = document.getElementById("li4");
    //通过调用li14的父级节点来进行替换
    li14.parentNode.replaceChild(li6,li14);
}

cloneNode() 方法可创建指定的节点的精确拷贝。拷贝所有属性和值。
该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。

function copy1(){
    //获取ul1的对象
    var ul1 = document.getElementById("ul1");
    //复制ul1节点及其所有的子孙节点
    var temp = ul1.cloneNode(true); //复制后的内容存在temp中
    //获取div2对象
    var div2 = document.getElementById("div2");
    //将复制的内容添加到div2下
    div2.appendChild(temp);
}

分析一下：元素节点（ElementNode）、属性节点（AttributeNode）与文本节点（TextNode）之间的关系？
在这里插入图片描述
元素节点和文本节点之间存在父子关系，元素节点和属性节点之间不存在父子关系。所以文本节点可以通过element.firstChild和lastChild来获取，而属性Attribute节点与Element节点不是父子关系，所以需要通过**element.getAttributeNode()**来获取！！

总结：

innerHTML属性
innerHTML不是DOM的组成部分，但是大部分浏览器都支持的属性。
实际开发中经常使用
作用：

可以获取标签中的文本内容，通常使用这个来获取。
可以向标签中设置内容，该内容可以是HTML代码

/*将div1中的内容复制到div2中*/
function copy1(){
    //1.获取div1的对象
    var div1=document.getElementById("div1");
    //2.获取div2的对象
    var div2=document.getElementById("div2");
    //将div1中的内容复制到div2中
    div2.innerHTML=div1.innerHTML;
}

innerText ：只有文本内容，不包含HTML代码格式

基础语法

变量提升：JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。
标识符：变量名和函数名，对大小写敏感。以字母/$/_开头，中文也是合法的。
注释：/* */、//、这三种都行。
If/else/for/while/do…while/:
标签Lable：相当于定位符，用于跳转到程序的任意位置。
数组：数组的下标其实就是对象的名字(内部保存的名字)。
声明：myarray=new Array(num) / myarray=new Array(value1,value2…)

Ps：""或’’（空字符串）空数组（[]）和空对象（{}）对应的布尔值，都是true。

对话框：alert() / prompt() / confirm()
eval()函数可以把一个字符串当作一个JavaScript表达式一样去执行它
this指代当前对象(标签)
for(xxx in obj) //In后跟一个对象，对此对象中的所有元素循环一次,类似于java的增强型for循环，不过此处xxx为数组下标(数组内部对象保存的名字)
with(obj) //为一段代码建立一个缺省的对象，任何无对象的属性引用，都将使用该缺省的对象。

with(document){
write(“AAAA”);
write(“BBB”);
}
相当于加了前缀，document.write()

new //用于生成一个新的对象如：today=new Date

window:
location就是地址栏的url地址，document.location与其值是一样的
open([url] , [name] , [space])。
Close()关闭
setTimeOut
setInterval

Event事件：

onFocus：在用户为了输入而选择select、text、textarea等时
onBlur：在select、text、password、textarea失去焦点时
onChange：在select、text、textarea的值被改变且失去焦点时
onClick：一个对象被鼠标点中时（ button, checkbox, radio, link, reset, submit, text, textarea等）
onLoad：当文档载入窗口时执行该事件 ( 一般出现在标签中)
onUnload/onbeforeunload：当用户退出一个文档时 ( 一般出现在标签中)
onMouseOver：鼠标被移动到一个对象上时
onMouseOut：鼠标从一个对象上移开时
onSelect：当form对象中的内容被选中时<一般写在input、select标签中>
onSubmit：出现在用户通过提交按钮提交一个表单时,（一般写在form标签中）
表单验证时可以使用

案例
一、 window弹窗案例
实现过程分析：

创建一个页面
–有两个输入项和一个按钮
–按钮有一个事件：弹出一个新窗口
创建弹出页面
–表格
–每行有一个按钮和编号数据
–按钮上有一个事件：把当前数据写入第一个页面的输入框中

二、在末尾添加节点

获取到需要添加节点的对象。
创建需要添加的节点的标签。使用 document.createElement()方法
创建需要添加的文本内容。使用document.createTextNode()方法
将文本内容添加到创建的标签中。使用appendChild()方法
将创建的标签添加到需要添加节点的对象中。使用appendChild()方法

//在末尾添加节点
function add1(){
    //获取到需要添加节点的对象
    var ul1=document.getElementById("list1");
    //创建li标签
    var li1=document.createElement("li");
    //创建文本内容
    var text1 = document.createTextNode("55555");
    //将文本内容添加到li标签中
    li1.appendChild(text1);
    //将li标签添加到ul中
    ul1.appendChild(li1);
}

三、动态显示时间

获取当前时间
var date = new Date().toLocaleString();
让页面每一秒都去获取时间
setInterval(code, 1000);
每秒刷新页面时间:每秒将时间写入相应的div中，使用innerHTML属性

var date;
var div1 = document.getElementById("div1");
function getTimeNow(){
    date=new Date().toLocaleString();
    div1.innerHTML = date;
}
getTimeNow();
setInterval("getTimeNow();",1000);

四、全选操作

分析页面构成：
–6个复选框 checkbox：
----1个全选/全不选复选框
----5个选择项
–3个按钮全选、全不选、反选
需求分析：

全选：5个的checked属性全部为true。
全不选：5个的checked属性全部为false。
反选：将checked属性为true的置为false，原来为false的置为true。
全选/全不选复选框：checked为true时表示全选，为false表示全不选。

具体步骤
a) 获取五个复选框，因为其设置name属性是一样的，所以可以通过var arr = document.getElementsByName()获取集合。
b) 通过arr[i].checked来判断是否被选中，进行相应设置

五、下拉选项操作

页面构成分析：
2个下拉选项菜单：<select mutiple> <option></option></select>
4个按钮<input type=”button”>.
将右边选中的添加到左边
a. 获取sel1中的option
–获取标签下面的所有子标签的唯一有效方法：getElementsByTagName();
b. 判断是否被选中
–通过selected属性：true(被选中)/false(未选中)
c. 获取sel2对象
d. 把选中的添加到sel2中：appendChild();

function selToRight(){
    /* 1.获取sel1中的option
            --获取标签下面的所有子标签的唯一有效方法：getElementsByTagName();
        2.判断是否被选中
            --通过selected属性：true(被选中)/false(未选中)
        3.获取sel2对象
        4.把选中的添加到sel2中：appendChild();
    */
    //1.获取sel1中的option
    //先得到sel1
    var sel1 =document.getElementById("sel1");
    //通过标签名来获取所有子标签
    var sel1s = sel1.getElementsByTagName("option");
    //3.获取sel2对象
    var sel2 = document.getElementById("sel2");
    //2.通过for循环判断是否被选中
    for(var i=0;i<sel1s.length;i++){
        if(sel1s[i].selected==true){
            //4.把选中的添加到sel2中：appendChild();
            sel2.appendChild(sel1s[i]);
            //因为appendChild相当于剪切，导致sel1s.length一直在变化，每剪切一次、length减1
            i--;
        }
    }
}

六、省市联动

页面结构分析：创建一个页面，有两个下拉选项单
在第一个下拉框中有一个事件：onchange事件
在方法change（this.value）；表示当前改变的option的value值
创建一个二维数组，用于存放数据，实际中一般从数据库/配置文件中读取
每个数组的第一个元素对应option的value，后面的元素是city名

//创建一个二维数组用来存放数据
    var city = new Array(4);
    city[0]=["China","南京","抚州","张掖","日喀则","厦门"];
    city[1]=["USA","底特律","纽约","华盛顿","休斯顿","迈阿密"];
    city[2]=["UK","伦敦","利物浦","爱丁堡","牛津","剑桥"];
    city[3]=["Japan","东京","大阪","神户","名古屋","横滨"];

    function change(val){
        //alert(val);
        //先获取city下拉选项框的对象
        var selCity=document.getElementById("city");
        //选项框清空
        var cityNodes=selCity.getElementsByTagName("option");
        for(var m=0;m<cityNodes.length;m++){
            selCity.removeChild(cityNodes[m]);
            //每次remove会导致length发生变化(减1)，所以需要
            m--;
        }
        //遍历数组
        for(var i=0;i<city.length;i++){
            var temp = city[i];
            //判断传入的值与第二维数组的第一个值是否相同
            if(temp[0]==val){
                //如果相同，则将该数组后面的值写入city选项框中
                for(var j=1;j<temp.length;j++){
                    //创建<option>标签对象
                    var op1=document.createElement("option");
                    //将数组内容创建成文本对象
                    var text1=document.createTextNode(temp[j]);
                    //将文本对象添加到标签对象下
                    op1.appendChild(text1);
                    //将整个标签对象添加到city选项框中
                    selCity.appendChild(op1);
                }
            }
        }
    }

七、动态生成表格

页面构成，两个输入框【行】【列】，一个按钮【生成】

function checkList() {
    if(document.form.dp1.selectedIndex === 0){
        document.form.dp2.length = 1;
        document.form.dp2.selectedIndex = 0;
        document.form.dp1.selectedIndex = 0;
        document.form.dp2.options[0].value = "----";
        document.form.dp2.options[0].text = "----";
    }
    function createTbl(){
        //获取行数
        var rowNum=document.getElementById("rowNum").value;
        //获取列数
        var colNum=document.getElementById("colNum").value;
        //alert("rows = "+rowNum+", cols = "+colNum);

//写法2：通过直接写HTML代码 ，然后赋值为innerHTML 
        var str ="<table>";
        //循环创建行
        for(var i=0;i<rowNum;i++){
            str+="<tr>";
            //在当前行里循环创建列
            for(var j=0;j<colNum;j++){
                //创建列标签
                str+="<td></td>";
            }

            str+="</tr>";
        }
        str+="</table>";
        //alert(str);
        document.getElementById("tbls").innerHTML=str;

        /*   //写法1：通过DOM操作进行创建
                var tbl1 = document.createElement("table");
                //循环创建行
                for(var i=0;i<rowNum;i++){
                    var rows1=document.createElement("tr");
                    //在当前行里循环创建列
                    for(var j=0;j<colNum;j++){
                        //创建列标签
                        var cols1=document.createElement("td");
                        //将列标签添加到当前行标签下
                        rows1.appendChild(cols1);  
                    }
                    //将当前行添加到当前的table下
                    tbl1.appendChild(rows1);
                }
                var div1 = document.getElementById("tbls"); 
                div1.appendChild(tbl1);
        */
    }