web前端入门JavaScript笔记之一

习大纲

1.JS概念

JS就是我们javascript ,他是被广泛应用于浏览器的，一种解释性脚本语言

解释性：

整个代码的执行过程中，他的编译和执行是一起合成，不生成中间的编译文件。

编译性：

在代码的执行过程中，会生成一个中间文件，编译文件，最终执行的不是源代码，而是编译文件。

2.JS组成部分

ECMAScript:就是定义了JS的语言基础，变量声明、函数的定义等，语法规则

DOM: JS可以操作HTML网页【标签】

BOM: JS有能力操作浏览器

3.JS的作用

制作网页特效：

例如：图片轮播图、Tab 选项卡

表单验证【前端验证】

例如：用户登录，用户注册验证数据的完整性，准确性

二、Console对象-控制台输出

1.语法

Console.log(data);
Console.error(data);
Console.warn(data);

2.说明

Data:就是要输出的数据

.Log:正常输出数据

.error:错误输出数据

.warn:警告输出数据

Console 不是JS的操作对象，浏览器定义的操作对象，所有的浏览器都支持

3.作用

在开发的过程中，我们可以使用这个对象，来进行代码调试

4.案例展示

<script>
   console.log('正常输出!');
   console.error('正常输出!');
   console.warn('正常输出!');
</script>

 思考：为什么不使用document.write或者alert

Document.write ：在页面中输出数据，就会影响页面的美观，不容易找到，不能输出对象的结构【object】

Alert : 页面弹出一个警告框，不支持复杂的数据结构的输出

三、变量

1.概念

在生活中，存放一个东西我们把东西放在仓库里面

在程序执行中，数据存放在数据库中

在程序运行中，将数据储存到内存中去，内存开辟一个临时的空间来保存这个数据，这个时候保存的这个数据叫做变量

2.变量的声明

 语法

Var 变量名=变量值；

 声明类型

隐式声明：

没有使用var 来修饰就是隐式声明

全局的变量

显式声明：

在定义变量的时候使用var 就叫做显式声明

局部变量

 变量命名规则

变量的命名使用字母、数字、下划线、$[首字母不能是数字]

变量严格区分大小写

定义的变量不要使用系统关键字, if for switch

 练习

//声明一个为空的变量

Var name ;

//声明一个变量并赋值

Var name = ‘小红’;

//同时声明多个变量 [多个变量的声明使用,分隔开来]

Var name1,name2,name3;

//同时声明多个变量并且赋值

Var name1=’小明’,name2=’小红’,name3=”小王”;

四、变量数据类型

1.说明

JS是弱类型语言

弱类型：

在声明变量的时候，并且给变量赋值，变量的类型取决于值的类型

强类型：

在声明变量的时候要有修饰符[int string]，如果不声明会报错

2.基本类型（3种）

数据类型	描述	示例
数字类型	包含了整型和浮点型	Var num=1、Var num=1.1
字符串类型string	使用引号引起来的数据，是字符串类型	Var name=”小明”;
Bool 类型	是现实中的真和假，返回值只有2个 true ,false	Var bool = true;

显著的特点：一个变量只能储存一个值

3.复合类型（2种）

数据类型

描述

示例

数组

一系列有序数据的集合

Var arr = []

Var arr = new Array()

对象

等高级第三在讲

数组的概念

一系列有序数据的集合

储存

数组可以储存多个数据，那么每个数据我们叫做数组的一个“元素”

获取

数组可以通过一些数字或者字符串来获取数组的值，那么这个数子或者字符串叫做数组的“下标/索引/键”

个数[length]

数组总的个数，我们把它叫做数组的长度，长度可以使用数组名.length 来获取

下标

数组的下标是从0开始，数组的长度-1 就是数组的下标

创建数组

使用new方式关键词和array()

Var arr = new Array(值1，值2...);

使用中括号[]来创建数组【推荐】

Var arr = [值1，值2...]

在声明数组的时候要注意：关键字严格区分大小写

数组的值没有类型限制

 操作数组

获取元素

数组名[下标]

增加元素

数组名[增加下标]

修改元素

数组名[修改下标]

 多维数组

在定义数组的时候数组的值，是一个数组类型，那么这个时候这个数组我们称之为多维数组

Array(
Array(),
Array(),
)
二位数组
Array(
Array(
Array()
)
)

三维数组

数组的维度不是说有多少个数组元素，而是根据他的层次有多个层

 操作多维数组

获取元素

数组名[下标1][下标2]

增加元素

数组名[下标1][下标2]

Var arr = [
[1,2],
[3,4,[
]],
]
Arr[2]= 1;
Arr[1][2][0] = 值
// 修改元素
Var arr = [
[1,2],
[3,4],
]
Arr[1][1] = 值；

4.特殊类型（2种）

数据类型

描述

示例

null

空,变量里面没有值

清空数据 Var name = 1;

Name = null;

undefine

未定义，在使用一个变量的没有声明这个时候就会出现undefine

Var name;

Console.log(name);

5.打印数据类型

语法：

Typeof(data)

Typeof data

说明：

Data :变量

Typeof 返回值是一个字符串，

Typeof :string\number\object\function object: 包含了数组，对象,null

五、JS变量的传值方式

1.赋值传值【拷贝传值】

 说明：

拷贝传值，就是将变量重新复制一份出来，给另外一个变量，物理地址不同

 举例

2.引用传值

 思考代码：

var arr1 = [100,38,2,250];
 var arr2 = arr1;
 console.log(arr2[0]); //100
 arr1[0] = 290;
 console.log(arr2[0]);// 290

 说明：

数组，对象赋值的时候，是将物理地址传递给变量，实际的数据共用的是一个内存

所以当改变第一声明的数据的时候，变量的值也会随之更改

六、运算符

1.运算符和表达式的概念

运算符 - 是在代码中对各种数据进行运算的符号。例如，有进行加、减、乘、除算术运算的运算符，有进行与、或、非、异或逻辑运算的运算符.

表达式 - 是由数字、算符、数字分组符号（括号）、变量等以能求得数值的有意义排列方法所得的组合

2.算数运算符

 种类

+、-、*、/、% 、++、--

 说明

++ 自增使用变量的时候i++ ++在前面，先自加本身然后在复制 ++在后面，先赋值，在自加 ;

-- 自减使用变量的时候i-- --在前面，先自减本身然后在复制 --在后面，先赋值，在自减 ;

 课堂练习

1、（表达式，运算符）已知a，b，c，求如下情况下d的值：

var a, b, c, d;
a = 1;    b = 2.2;    c = 3.3;  d = a + b + c;        // d = 6.5
a = 1;    b = 2.2;    c = “3.3”;  d = a + b + c;     // d = 3.23.3
a = 1;    b = “2.2”;  c = 3.3;  d = a + b + c;     // d = 12.23.3
a = “1”;  b = 2.2;    c = 3.3;  d = a + b + c;     // d = 12.23.3
a = “1”;  b = 2.2;    c = 3.3;  d = a + (b + c);   // d = 15.5？
a = “1”;  b = 2.2;    c = 3.3;  d = (a + b) + c;    // d = 12.23.3
//2、（运算符）读程序写结果
var i = 10;  var j = i++;  alert(i + “,” + j);      // j = ？, i = ？
var i = 10;  var j = ++i;  alert(i + “,” + j);      // j = ？, i = ？
var i = 10;  var j = i++;  i=j++;  alert(i + “,” + j);      // j = ？, i = ？
var i = 10;  var j = ++i;  i=++j;  alert(i + “,” + j);          // j = ？, i = ？
var i = 10;  
var j = i++;  //j=10 //i=11
alert(i + “,” + j);
var i = 10;  
var j = ++i;  //j=11 i=11
alert(i + “,” + j);  
var i = 10;
 var j = i++;  //j=10 ,i=11
i=j++;  // j=11 ,i=10
alert(i + “,” + j);
var i = 10;  
var j = ++i;   //j=11 ,i=11
i=++j;  //j=12,i=12
alert(i + “,” + j);

3.赋值运算

 种类：

= \ +=\-=\*=\/=\%=

 说明：

= 直接赋值

+= : var a = a+1; var a+=1

4.字符串运算符

 种类：

= +=

 说明：

= 赋值

+= : 如果说是字符串，使用这个运算符代表着字符拼接

 课堂练习

1.将 document.write("<img src=1.jpg/>"); 中src里的图片地址替换为动态变量。

2.将数组的数据显示在页面中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>字符串运算符练习</title>
</head>
<body>
 <div>
   <ul id='ul'>
     
   </ul>
 </div>
</body>
<script type="text/javascript">
 var arr = [
   ' <li>离离原上草</li>',
       '<li>处处闻啼鸟</li>',
       '<li>欲穷千里目</li>',
       '<li>社会主义好</li>'
 ];
 
</script>
</html>
<script type="text/javascript">
 var arr = [
   ' <li>离离原上草</li>',
       '<li>处处闻啼鸟</li>',
       '<li>欲穷千里目</li>',
       '<li>社会主义好</li>'
 ];
   //循环遍历数组
   var str=''; //定义一个变量
   for(i=0;i<arr.length;i++){
     
       str +=arr[i];
   }
   
   //将字符串写入到ul容器中
   
 document.getElementById('ul').innerHTML = str;
</script>

5.比较运算符

 种类：

>\<\>=\<= \ == \!=\===\!==

 说明：

=== 三个等号，全等于，不仅数据的值相等，并且类型相等

!==

6.三元运算符【?】

 语法：

表达式? 代码段1:代码段2

 说明：

如果表达的是true ,则执行代码段1

如果表达式返回的是false, 则执行代码段2

7.逻辑运算符

 种类：

逻辑与 && 并且两个条件都成立，则执行

逻辑或 || 或者有一个条件成立，则执行

逻辑非 ! 取反

七、判断

1.单分支【if】

If(条件表达式){

//代码段

}

2.双分支【if-else】

If(条件表达式){

//代码段1

}else{

//代码段2

}

3.多分支【if-else-if】

If(条件表达式){

//代码段1

}else if(条件表达式2){

//代码段2

}else if(条件表达式2){

//代码段3

}

.....

Else{

}

4.多路选择【switch-case】

Switch(bool){

Case 值1：

Break;

Case 值2：

Break;

Default:

}

脚下留心：在使用switch 的时候，括号里面的值必须是bool类型，要不然判断体是不会执行的，前提条件case 里面不是一个固定值，而是表达式。

思考题：如何使用switch判断学生成绩？

90分及以上优秀

70分及以上良好

60分及以上及格

0分及以上不及格

其他未知状态

<script>
   
   var num= -1;
   
   switch(true){
       case num>90:
           alert("优秀");
           break;
       case num>70:
           alert("良好");
           break;
            case num>60:
           alert("及格");
           break;
            case num>0:
           alert("不及格");
           break;
       default:
           alert("去吃饭吧!");
         
       }
   
</script>

八、循环

1.For

For(循环变量初始化,条件表达式,循环变量更新){

//代码段

}

执行流程：

循环变量初始化->表达式的判断【true】->先执行代码段1->循环遍历更新

2.While

//1.循环变量初始化

While(2.条件表达式){

//代码段

//3.变量更新

}

3.do-while

//1.循环变量初始化

Do{

//指定代码段

//变量更新

}while(条件表达式)

执行流程：

循环变量初始化->条件表达式的判断->执行代码段->变量更新

循环变量初始化->执行代码段->变量更新->表达式的判断

4.For/while/do-while 的区别

 什么时候使用for 或者while ?

For 已知循环次数使用

While 未知循环次数使用

 While 和do-while的区别

 循环流程

While 先进性表达式的判断然后执行代码段

Do-while 先执行代码段在进行表达式的判断

 循环次数

While 循环次数根据条件表达式来

Do-while 不管表达式是否正确，都会执行代码一次

5.for-in

 概念：

循环数组和对象，我们可以使用for ,已知下标循环使用，

如果一个数组或者对象的下标我们不知道，可以使用for-in 来循环

 语法：

For(变量 in 数组/对象){

//代码段

}

说明：

变量：如果循环的是一个数组，那么这个变量就是数组的下标

变量：如果循环的是对象，那么这个变量就是对象里面的操作方法名称

 练习

循环输出数组

循环输出对象的方法

九、函数

1.函数的概念

就是将一些经常用到的代码进行一个封装，多出都用到同一个代码。

一次封装，终身使用

2.函数的定义

function 函数名(参数1，参数2，...){

//封装的代码

}

说明：

声明函数的时候 function 系统关键字，严格区分大小写

函数传递的参数如果是多个，我们使用,号分隔开发

定义函数的时候我们把参数叫做形参，调用函数的时候传递的这个参数是实参

思考：形参和实参的个数不一样会怎么样？

 如果实参的数量小于形参

 如果实参的数量大于形参

开发注意事项

脚下留心：在定义变量的时候，不要和函数重名，如果重名就会覆盖原来的

3.匿名函数

 概念

匿名函数，就是没有名字的函数

 语法

Var fun = function(){

}

必须要有变量来储存函数

 调用匿名函数

调用方法：变量名称+()

匿名函数自调用

调用使用fun(),

演变过程一：

Function(){alert(‘1’);}()

语法不允许这样写

演变过程二、

4.Return 的作用

程序终止返回

终止程序并且返回数据

脚下留心：

5.变量的种类和生命周期

 种类

全局变量：在整个代码段中，都能获取到这个变量直接写变量名称

局部变量：作用范围只能是在函数体内来使用如果说在函数内部使用var 代表变量是局部变量

 生命周期

全局变量：整个代码执行完毕然后程序自动销毁该变量

局部变量：在函数调用完成后，程序自动销毁该变量

6.【新】arguments对象的使用

 描述

它是函数的一个内置对象，里面包含了调用函数是的实参

思考：下面的代码如何优化

如果说在增加参数进行数字统计

 实例

<script>
   //如果在增加参数进行数据统计，我们要修改很多地方不方便
//    function sum(a,b,c,d,e){
//        
//        return a+b+c+d+e;
//    }
   
   
   //arguments
   function sum(){
      num = 0
       for(i=0;i<arguments.length;i++){
           num +=arguments[i];
       }
       return num;
   }
   
   console.log(sum(1,2));
</script>

十、Script的执行过程

1.函数的预加载

说明：

函数的调用，只要是在同一个代码段中，不管是先声明在调用还是先调用在声明，都可以调用。首先整个代码的执行先将变量的定义，函数先加载到内存中去，所有说我们在调用的时候就没有顺序限制了。

问题：函数的调用能不能再声明之前？

2.Script语句执行的流程

 说明：

用户打开网页

首先读取第一个代码段【script】

对代码进行解析【语法检测，变量的声明，函数的加载】

Var i ;

执行代码；

Var i=1;

结束当前代码段

 举例：

3.错误类型：

 思考下述代码直接结果

代码一：执行错误

var num1 = 111;
alert(num1);  //
alert(num2);  //
代码二：解析错误
alert(1);   //
alert(;     //
alert(2);   //

 错误类型：

执行错误：程序运行的时候出现的错误

解析错误：程序进行解析编译的时候出现的语法错误

 总结

执行错误：会影响当前代码段的代码的执行，如果出现执行错误，当前代码段的所有的代码终止运行，不会影响下一个代码段的代码执行。

解析错误：会影响当前代码段的所有代码执行，不会影响下一个代码段的代码执行

 执行流程图：

. DOM

1.1. DOM简介

全称Document Object Model，即文档对象模型。

DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。

浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，

而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，

组建好之后，按照树的结构将页面显示在浏览器的窗口中。

1.2. 节点层次

HTML网页是可以看做是一个树状的结构，如下：

html

|-- head

| |-- title

| |-- meta

| ...

|-- body

| |-- div

| |-- form

| | |-- input

| | |-- textarea

... ... ...

这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。

节点最多有一个父节点，可以有多个子节点。

HTML DOM 定义了访问和操作HTML文档的标准方法。

document

代表当前页面的整个文档树。

访问属性

all

forms

images

links

body

访问方法(最常用的DOM方法)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
// 获取dom 树, 获取document 对象.
var dom = window.document;
// all 获取页面中所有的标签节点 ,注释和文档类型约束.
function testAll() {
      var allArr = dom.all;
      alert(allArr.length);
      for (var i = 0; i < allArr.length; i++) {
      //获取节点名称
      alert(allArr[i].nodeName);
      }
}
// anchors 获取页面中的所有的锚连接.
function testAnchors() {
    var anArr = dom.anchors;
    alert(anArr.length);
}
// froms  获取所有的form 表单对象
function testForms() {
        var formArr = dom.forms;
        alert(formArr.length);
        alert(formArr[0].nodeName);
}
// images
function testImages() {
        var imageArr = dom.images;
        alert(imageArr.length);
}
// links  获取页面的超链接.
function testLinks() {
      var linkArr = dom.links;
      //alert(linkArr.length);
      for (var i = 0; i < linkArr.length; i++) {
      //alert(linkArr[i].nodeName);
      }
      for (var i in linkArr) {
      alert(i);
      }
      }
//testLinks();
// 获取页面的Body
var body = dom.body;
alert(body.nodeName);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body onmousemove="test(this)">
<img src="xxx" alt="这是一个美女"/>
<img src="xxx" alt="这是一个美女"/>
<img src="xxx" alt="这是一个美女"/>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.google.com">百度两下</a>
<a href="http://www.baigu.com">百谷一下</a>
<a name="one"></a>
<a name="two"></a>
<form>
<label>姓名:</label><!--默认不写type 就是文本输入框-->
<input  type="text"/>
</form>
</body>
</html>

1.3. 获取节点对象案例

document.getElementById("html元素的id")

document.getElementsByTagName("标签名")

document.getElementsByName("html元素的name")

示例：

1，得到所有的div元素并显示信息（innerHTML）。

2，得到所有div元素中id为"test"的结果。

Var dom = window.document;
function testByTagName() {
  var iptArr = dom.getElementsByTagName("input");
  for (var i = 0; i < iptArr.length; i++) {
  	alert(iptArr[i].value);
  }
}

// window 对象提供了一个事件, onload 事件 onload(页面加载完毕执行该代码) 是一个事件, 给事件一个方法,

//window.onload = testByTagName;

//2，得到所有标签id为"username"的结果。获取旧value值并设置value值

function testById() {
  var user = dom.getElementById("username");
  alert(user.value);
  user.value = "rose";
  }
//testById();

//3. 获取所有标签name 为like的元素.获取value值.

function testByName() {
	var likeArr = dom.getElementsByName("like");
  for (var i = 0; i < likeArr.length; i++) {
		  alert(likeArr[i].value);
  }
}
testByName();

1.3.1. 案例

显示页面任意一个节点对象的所有子节点的nodeName、nodeType、nodeValue

1.3.2. 属性操作练习

1，写一个form，其中有多个checkbox。

2，获取所有选中的数量。

3，实现全选与全部选的效果。

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 
<script type="text/javascript">
function getSum()
{
/*
需求：通过点击总金额按钮获取被选中的条目的金额的总和，并将总金额显示在按钮右边。
思路：
1，先获取所有的checkbox对象。
2，对这些对象进行遍历。判断哪个对象被选中。
3，对被选中对象的金额进行累加。
4，显示在按钮右边。
*/

var items = document.getElementsByName("item");
var sum = 0;
for(var x=0; x<items.length; x++)
{
if(items[x].checked)
{
sum += parseInt(items[x].value);
}
}
var str = sum+"元";
document.getElementById("sumid").innerHTML = str.fontcolor('red');
}
 
function checkAll(node){
    /*
    需求：通过全选checkbox，将其他条目都选中。
    思路：
    只要将全选checkbox的checked状态赋值给其他的item checked状态即可。
    */
    //var allNode = document.getElementsByName("all")[index];
    var items = document.getElementsByName("item");
    for(var x=0; x<items.length; x++){
        items[x].checked = node.checked;
    }
}
</script>
</head>
 
<body>
 
 
<div>商品列表</div>
<input type="checkbox" name="all" onclick="checkAll(this)"  /> 全选<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
<input type="checkbox" name="all" onclick="checkAll(this)"  /> 全选<br />
<input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span>
 
 
</body>
</html>

1.4. 通过节点关系查找节点

从一个节点出发开始查找：

parentNode 获取当前元素的父节点。

childNodes 获取当前元素的所有下一级子元素。

firstChild 获取当前节点的第一个子节点。

lastChild 获取当前节点的最后一个子节点。

nextSibling 获取当前节点的下一个节点。（兄节点）

previousSibling 获取当前节点的上一个节点。（弟节点）

示例1：

firstChild属性最普遍的用法是访问某个元素的文本：

var text=x.firstChild.nodeValue;

示例2：

parentNode 属性常被用来改变文档的结构。

假设您希望从文档中删除带有 id 为 "maindiv" 的节点：

var x=document.getElementById("maindiv");

x.parentNode.removeChild(x);

1.4.1. 获取节点对象的信息

每个节点都包含的信息的，这些属性是：

nodeType 节点类型

nodeName 节点名称

nodeValue 节点值

nodeType

nodeType 属性可返回节点的类型。

---------------------------------

元素类型节点类型

------------------

元素 1 就是标签元素，例<div>..</div>

文本 3 标签元素中的文本

注释 8 表示为注释

nodeName

nodeName 属性含有某个节点的名称。

--------------------------------

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

nodeValue

对于文本节点，nodeValue 属性是所包含的文本。

对于属性节点，nodeValue 属性是属性值。

对于注释节点，nodeValue 属性注释内容。

nodeValue 属性对于文档节点和元素节点是不可用的。

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//节点和节点之间的关系.
//获取dom树
var dom = window.document;
//获取指定id 的标签节点.
function test() {
        var form = dom.getElementById("form1");
        //获取父节点.
        //alert(form.parentNode.nodeName);
        // 获取子节点(Node 包含 文本,注释,标签)
        var childArr = form.childNodes;
        //alert(childArr.length);
        /*
        for (var i = 0; i < childArr.length; i++) {
        alert(childArr[i]);
        }
        */
        // 获取第一个孩子.
        var first = form.firstChild;
        //alert(first);
        //最后一个孩子.
        var last = form.lastChild;
        //alert(last);
        // 获取下兄弟(获取弟弟)
        var sibling = form.nextSibling;
        //alert(sibling.nodeName);
        // 获取大哥
        var previous = form.previousSibling;
        alert(previous.nodeName);
}
test();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>javascript</title>
</head>
      <body onmousemove="test(this)">
            <a>哈哈</a>
            <form id="form1">
                  <label>姓名:</label>
                  <input type="text" />
            </form>
      </body>
</html>

1.5. 节点操作

1.5.1. 创建新节点

document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(new, child); 添加到elt中，child之前。 // 参数1：要插入的节点参数 2：插入目标元素的位置
elt.removeChild(eChild) 删除指定的子节点

lt;table>和<form>结合效果图：

在HTML/CSS 中，我们经常用HTML来布局和填充内容，用CSS来添加效果，修饰内容和布局，使整个页面变得更好看。

HTML和CSS的配合方法：

即在<head></head>标签内添加CSS样式表的链接：

代码展示如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Make a Table Frame</title>
 <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" >
</head>

CSS选择器

定义：

对带有指定属性的 HTML 元素设置样式。

注意：

只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

功能：

“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

CSS中的选择器有三个：

标签选择器、class类选择器、id选择器

1.标签选择器样式表：a{}、 div{}、table{} ...

{对全局所有的选中类型标签的样式修改}

2.class类选择器样式表： .class{}

{在HTML中每个标签都可以同时绑定多个类名，每个标签都可以设置class；同一个界面中class是不可重复}

3. id选择器样式表： #d1 {}

{每个标签都可有id，每个页面不可重复id，}

【一个HTML标签只能绑定一个id属性,一个HTML标签可以绑定多个class属性】

单纯选择<div>标签的时候是对全局的的（所有的）<div>进行修饰；

选择器优先级：

id选择器>class类选择器>标签选择器

所以有id和class 选择器的标签将不会被覆盖。交叉时是按照优先级覆盖显示的。

<table>部分：电脑配件管理表2018年5月-8月

单纯的HTML 表格表单内容

标题<caption>标签：

表格的标题<caption>的内容填充（HTML）：

<caption> 表格标题</caption>

标题<caption>的样式修饰(CSS)

table.formdata caption
{
	text-shadow: #FF00ff;
	text-align: center;
	padding-bottom: 6px;
	font-weight: bold;
}

其他<table>标签相关内容可参考 HTML中表格的实例应用一文。

<form>部分：

form在网页中主要负责数据采集功能。

一个表单有三个基本组成部分：

（1）表单标签：包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

（2）表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

（3）表单按钮：提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入。还可以用表单按钮来控制其他定义了处理脚本的处理工作。

<input>标签

定义：

<input> 标签规定用户可输入数据的输入字段。

根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等

语法代码：

<input type="value" >

实例代码：

<td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>

关系展示：

<input>中 submit属性和reset属性

实例代码：

<p>

</p>

实例展示：

<input>标签的其他属性值：

<input>标签外是否添加<form>标签？

input标签外是否添加form标签需要按情形区分：

应用场景的区别：

1.所有向后台提交数据（包括原生和ajax提交）的<input>都建议用<form>包裹.

2.如果只是用来做前台交互效果则不推荐使用form包裹。

但提交数据时，其实也可以不用form包裹input标签：

1.如果有form标签，在点击提交铵钮时，浏览器自动收集参数，并打包一个http请求到服务器，完成表单提交。在这一过程中，浏览器会根据method的不同，将参数编码后，放在urI中(get)，或者放在请求的data中(post)。然后发送到服务器。

2.如果没有form，post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url。

<form>表单其他相关内容可参考 HTML中表单的应用实例一文。

最后，附带一下该可输入的EXCEL表格的源码。

HTML code：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Make a Table Frame</title>
 <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" >
</head>
<body image="">
 <form method="psot">
	<table border="1px" class="formdata">
 	<caption>电脑配件管理表2018年5月-8月</caption>
 	<tr>
 		<th></th>
 		<th scope="col">5月</th>
 		<th scope="col">6月</th>
 		<th scope="col">7月</th>
 		<th scope="col">8月</th>
 	</tr>
 	<tr>
 		<th scope="row">Hard Disk</th>
 		<td><input type="text" name="Hard Disk 5月" id="Hard Disk 5月"></td>
 		<td><input type="text" name="Hard Disk 6月" id="Hard Disk 6月"></td>
 		<td><input type="text" name="Hard Disk 7月" id="Hard Disk 7月"></td>
 		<td><input type="text" name="Hard Disk 8月" id="Hard Disk 8月"></td>
 	</tr>
 	<tr>
 		<th scope="row">Mainboard</th>
 		<td><input type="text" name="Mainboard 5月" id="Mainboard 5月"></td>
 <td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>
 <td><input type="text" name="Mainboard 7月" id="Mainboard 7月"></td>
 <td><input type="text" name="Mainboard 8月" id="Mainboard 8月"></td>
 	</tr>
 	<tr>
 		<th scope="row">Case</th>
 		<td><input type="text" name="Case 5月" id="Case 5月"></td>
 <td><input type="text" name="Case 6月" id="Case 6月"></td>
 <td><input type="text" name="Case 7月" id="Case 7月"></td>
 <td><input type="text" name="Case 8月" id="Case 8月"></td>
 	</tr>
 	<tr>
 	 <th scope="row">Power</th>
 	 <td><input type="text" name="Power 5月" id="Power 5月"></td>
 <td><input type="text" name="Power 6月" id="Power 6月"></td>
 <td><input type="text" name="Power 7月" id="Power 7月"></td>
 <td><input type="text" name="Power 8月" id="Power 8月"></td>	
 	</tr>
 	<tr>
 		<th scope="row">CPU Fan</th>
 		<td><input type="text" name="CPU Fan 5月" id="CPU Fan 5月"></td>
 <td><input type="text" name="CPU Fan 6月" id="CPU Fan 6月"></td>
 <td><input type="text" name="CPU Fan 7月" id="CPU Fan 7月"></td>
 <td><input type="text" name="CPU Fan 8月" id="CPU Fan 8月"></td> 
 	</tr>
 	<tr>
 		<th scope="row">Total</th>
 		<td><input type="text" name="Total 5月" id="Total 5月"></td>
 <td><input type="text" name="Total 6月" id="Total 6月"></td>
 <td><input type="text" name="Total7月" id="Total 7月"></td>
 <td><input type="text" name="Total 8月" id="Total 8月"></td>
 	</tr>
	</table>
 <p>
 <input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
 <input type="reset" value= "Reset All" class="btn">
 </p>
 </form>
</body>
</html>

CSS code :

body
{
	font-family: Arial;
	/*background-image: url(image/mainroad.jpg) no-repeat;*/
	background-color: #00ff00;
	background-size: 100%;
}
table.formdata
{
	width: 300px;
	height: 150px;
	border: 2px solid #F00;
	border-collapse: collapse;
	font-family: Arial;
}
table.formdata caption
{
	text-shadow: #FF00ff;
	text-align: center;
	padding-bottom: 6px;
	font-weight: bold;
}
table.formdata th
{
	border:1px solid #be34hc;
	background-color: #E2E2E2;
	color:#000000;
	text-aglin:center;
	font-weight: normal;
	padding: 2px 8px 2px 6px;
	margin: 0px;
}
table.formdata input
{
	width: 100px;
	padding: 1px 3px 1px 3px;
	margin: 0px;
	border:none;
	font-family: Arial;
}
.btn
{
	width:100px;
	background-color: #FF00ee;
	border:1px solid #00f2f2;
	font-family: Arial;
}

本文部分内容来自网络，如有侵权，请联系修改。

在线咨询

上一篇：关于 HTML5 你需要了解的基础知识
下一篇：HTML初学者入门学习教程笔记手册第一部分

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

web前端入门JavaScript笔记之一

习大纲

1.JS概念

2.JS组成部分

3.JS的作用

二、Console对象-控制台输出

1.语法

2.说明

3.作用

4.案例展示

三、变量

1.概念

2.变量的声明

 语法

 声明类型

 变量命名规则

 练习

四、变量数据类型

1.说明

2.基本类型（3种）

3.复合类型（2种）

数组的概念

 操作数组

 多维数组

 操作多维数组

4.特殊类型（2种）

5.打印数据类型

五、JS变量的传值方式

1.赋值传值【拷贝传值】

2.引用传值

六、运算符

1.运算符和表达式的概念

2.算数运算符

 种类

 说明

 课堂练习

3.赋值运算

 种类：

 说明：

4.字符串运算符

 种类：

 说明：

 课堂练习

5.比较运算符

 种类：

 说明：

6.三元运算符【?】

 语法：

 说明：

7.逻辑运算符

七、判断

1.单分支【if】

2.双分支【if-else】

3.多分支【if-else-if】

4.多路选择【switch-case】

八、循环

1.For

2.While

3.do-while

4.For/while/do-while 的区别

 什么时候使用for 或者while ?

 While 和do-while的区别

 循环流程

 循环次数

5.for-in

 练习

九、函数

1.函数的概念

2.函数的定义

3.匿名函数

 概念

 语法

 调用匿名函数

4.Return 的作用

5.变量的种类和生命周期

 种类

 生命周期

6.【新】arguments对象的使用

 描述

<input>中 submit属性和reset属性