一个demo学会js

最新推荐文章于 2023-03-14 20:52:16 发布

banlin1780

最新推荐文章于 2023-03-14 20:52:16 发布

阅读量114

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/TigerZhang-home/p/7675677.html

版权

快捷链接：
js系列教程1-数组操作全解
 js系列教程2-对象和属性全解
 js系列教程3-字符串和正则全解
 js系列教程4-函数与参数全解
 js系列教程5-容器和算法全解
 js系列教程6-BOM操作全解
 js系列教程7-DOM操作全解
 js系列教程8-事件全解
 js系列教程9-表单元素全解
 js系列教程10-canvas绘图全解
 js系列教程11-json、ajax、comet全解
 js系列教程12-离线应用与存储全解

这篇demo较长，包含了js基本的内容，若不是出于校验自己js能力的朋友，建议按照上面的链接分章节学习。本demo包含了js的数组、对象、对象属性、字符串、正则表达式、函数、参数、容器、算法、BOM、DOM、事件、表单、cancas绘图、json、ajax、comet、离线应用、客户端存储等方面的知识，可以全面检验你的js学习效果。

此demo除了必须的链接文件外，主要包括文件：index.html和index.js、index.css、index1.js、index2.js、index3.js、index4.js、index5.js文件

index.html文件为一个简单的演示页面。包括js代码的打印输出和js与css的嵌入代码。

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>jsdemo</title> <meta name="viewport" content="initial-scale=1.0,user-scalable=no"> <!--适应移动屏幕--> <link rel="stylesheet" href="index.css" /> <style type="text/css"> .hintclass{ display: inline; float: left; left: 30%; height: 35%; width: 70%;color: white;overflow: auto} /*设置样式类样式*/ #hint1{display:inline;float:left;height: 25%;width: 70%;left:30%;background-color: aqua;color: white} /*设置指定id样式*/ /*background-image:url('chaoxian.jpg');background-size: cover*/ </style> <style type="text/css"> body div{background-color: green} /*设置元素类别样式，多重限定，使用空格连接，样式的计算以最新的设置为主*/ div input{width: 200px;height: 40px} </style> </head> <!--当遇到<body>开始呈现内容--> <body> <div style="width: 100%;height: 900px;" id="hintdiv"> <label style="display:inline;float:left;height: 100%;width: 30%;">id="hint" name="tity"></label> <label id="hint1" name="tity"></label> <!--name是元素被包含在集合中时的key--> <label class="hintclass" style="" id="hint2" name="tity" title="label text" lang="en" dir="ltr" myatt="age" data-myname="luanpeng"></label> <!--id唯一标识，title元素附件说明，lang语言，dir语言方向，class特性，myatt自定义属性，data-myname自定义数据属性--> </div> <div style="width: 100%;height: 600px" id="hintdiv1"> <!-- onclick="alert('div接收到事件')"--> <input type="button" id="input1" value="点击1" onclick="alert('点击了')" > <!--可以在事件中直接输入函数表达式--> <input type="text" id="input2" value="输入内容" name="mytext" oninput="printf(event.type.toString()+this.value)" ><!--事件中自动具有event时间对象和this表示的元素本身，名称name的值就代表了当前元素对象的引用--> <br> <!--换行--> <textarea rows="2" cols="25">textare初始化值</textarea> <!--rows行数，cols列数--> <form accept-charset="GBK" action="" method="post" name="hello" id="myform" novalidate><!--novalidate表单不用验证--> <input name="text1" type="text" size="15" maxlength="20" placeholder="提示字" value="input初始化值" id="text1" autofocus required>