JS基础(二)

一、JS中的循环结构

循环结构的执行步骤

1、声明循环变量；

2、判断循环条件；

3、执行循环体操作；

4、更新循环变量

然后，循环执行2-4，直到条件不成立时，跳出循环。

while循环()中的表达式，运算结果可以是各种类型。但是最终都会转为真假，转换规则同if结构；

while循环特点：先判断再执行；

do-while循环特点：先执行，再判断；即使初始条件不成立，do-while循环也至少执行一次。

【for循环】

1、for循环有三个表达式：①声明循环变量②判断循环条件③更新循环变量

三个表达式之间用;分隔

for循环三个表达式都可以省略，但是两个;缺一不可.

2、for循环的执行特点：先判断，再执行；与while相同.

3、for循环三个表达式都可以有多部分组成，第二部分多个判断条件用&& ||连接，第一三部分用,分隔；

[循环控制语句]

1、break：跳出本层循环，继续执行循环后面的语句。

如果循环有多层嵌套，则break只能跳出一层；

2、continue：跳过本次循环剩余的代码，继续执行下一次循环；

①对于for循环,continue之后执行的语句，是循环变量更新语句i++;

②对于while、do-while循环，continue之后执行的语句，是循环条件判断；

因此，使用这两种循环时，必须将continue放到i++之后使用。否则，continue将跳过i++导致死循环。

二、JS中的循环嵌套

[图形题做题思路]

1、确定图形一共有几行，行数即为外层循环的次数；

2、确定每行中，有几种元素组成。有几种元素即表示有几个内层循环；

3、 确定每种元素的个数，这个个数即为每个内层循环的次数。

tips：如果每种元素的个数不固定。

则，找出每种元素的个数，与行号的关系，这个关系表达式，即为内层循环的最大值。

三、JS中的函数

一、JS中的注释

1、 //单行注释

2、 /*多行注释：开头一个*

      */

3、

      /**

      * 文档注释：开头两个*。写在函数上方，在调用函数时，可以看到文档中的描述信息。

      */

【函数的声明及调用】

1、函数的声明格式：

function 函数名(参数1,参数2,……){

            //函数体代码

       return 返回值;

}

 

函数的调用：

①直接调用：函数名(参数1的值，参数2的值，……);[函数名加小括号直接调用]

②实践调用方式：在HTML标签中，使用事件名="函数名()"

         eg:<button onclick="saySth('hahaha','yellow')">点击按钮，打印内容</button>

2、函数的注意事项：

① 函数名必须符合小驼峰法则！！(首字母小写，之后每个单词首字母大写)；

② 函数名后面的()中可以有参数，也可以没有参数，分别称为有参函数、无参函数；

③ 声明函数时的参数列表称为形参列表，形式参数。(变量的名字)

function saySth(str,color){}

调用函数时的参数列表，称为实参列表，实际参数。(变量的赋值)

saySth("今天没下雨","red");

④ 函数的形参列表个数与实参列表个数没有实际关系。

函数参数的个数，取决于实参列表。

如果实参列表的个数小于形参列表，则未赋值的形参，将为undefined。

⑤ 函数可以有返回值，使用return返回结果：

调用函数时，可以使用一个变量接收函数的返回结果。

如果函数没有返回值，则接收的结果为undefined；

function func(){

return"haha";

}

var num=func();//num="haha"

⑥ 函数中变量的作用域

在函数中，使用var声明的变量，为局部变量，只能在函数内部访问；

不使用var声明的变量，为全部变量，在函数外面也能访问；

函数的形参列表，默认为函数的局部变量，只能在函数内部使用。

⑦函数的声明与函数的调用没有先后之分，即，可以在声明函数前调用函数。

eg:func();//声明func之前调用也是可以的。

function func(){}

[匿名函数的声明使用]

1、声明一个匿名函数，直接赋值给某一个事件；

window.onload=function() {}

文档加载时调用函数

2、使用匿名函数表达式。将匿名函数，赋值给一个变量。

声明 var func=function() {}

调用 func();

注意：使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后！！！（与普通函数的区别！！！）

3、自执行函数：

①!function() {}();//可以使用多种运算符开头，但是一般用！

!function(形参列表) {}(实参列表)；

②(function() {}());//使用()将函数及函数后的括号包裹。

③ (function() {})();//使用()只包裹函数部分；

三种写法的特点：

① 使用！开头，结构清晰，不容易混乱，推荐使用；

② 第二中写法能够表明匿名函数与调用的()为一个整体，官方推荐使用。

③ 无法表明函数与之后的()的整体性，不推荐使用；

【函数的内部属性】

1、Arguments对象

①作用：用于储存调用函数时所有实参，当调用函数并用实参赋值时，实际上参数列表已经保存到 arguments数组中，可以在函数中，使用arguments[n]的形式调用，n从0开始。

②arguments数组的个数，取决于实参列表，与形参无关。

但是，一旦第n个位置的形参、实参、arguments都存在时，形参将与arguments绑定，同步变化。

（即，在函数中修改形参的值，arguments也会改变。反之，亦成立。）

 

③arguments.callee是arguments的重要属性。表示arguments所在函数的引用地址：

在函数里面，可以使用arguments.callee()调用函数本身，

在函数内部，调用函数自身的写法，叫做递归。

【递归函数】

递归分为两部分：递和归。以递归调用语句为界限，可以将函数分为上下两部分。

递：当函数执行上半部分遇到自身的调用语句时，继续进入内层函数，再执行上半部分。直到执行完最内层函数。

归：当最内层函数执行完以后，再从最内层函数开始，逐渐执行函数的下半部分。

 

当最外层函数执行时，遇到自身的调用语句，会进入内层函数执行，而外层函数的后半部分暂不执行。直到最内层函数执行完以后，再逐步向外执行。

[JS代码的执行顺序问题]

JS代码在运行时，会分为两大部分，检查装载和执行阶段。

检查装载阶段：会先检测代码的语法错误，进行变量、函数的声明。

执行阶段：变量的赋值、函数的调用等，都属于执行阶段。

以下代码为例：

console.log(num); //undefined·

var num=10;

 

func1(); //函数可以正常执行

function func1(){}

 

func2(); //函数不能执行，打印func2时显示undefined

var func2=function(){}

原因：

上述代码的执行顺序为：

……………………检查装载阶段……………………

var num;

function func1(){}

var func2;

……………………代码执行阶段……………………

console.log(num);

var num=10;

func1();

func2();

var func2=function(){}

 

三、JS中的DOM操作

---

（一）DOM树节点

---

DOM节点分为三大类：元素节点、属性节点、文本节点；

文本节点、属性节点属于元素节点的子节点。操作时，均需要先取到元素节点，

再操作子节点；可以使用getElement系列方法，取到元素节点。

（二）查看元素节点

---

1、getElementById：通过id取到唯一节点。如果ID重名，只能取到第一个。

     getElementsByName()：通过name属性；

     getElementsByTagName()：通过标签名；

    getElementsByTagName()： 通过class名；

 

>>> 获取元素节点时，一定要注意：获取节点的语句，必须在DOM渲染完成之后

        执行。可以有两种方式实现：① 将JS代码写在body之后；

                                                      ② 将代码写到window.onload函数之中

>>> 后面三个getElements，取到的是数组格式。不能直接添加各种属性，而应该

       取出数组的每一个单独操作。

       例如：getElementsByName("name1")[0].onclick=function

（三）查看/设置属性节点

---

1、查看属性节点：getAttribute("属性名");

2、设置属性节点：setAttribute("属性名","新属性值");

>>> 查看和设置属性节点，必须先取到元素节点，才能使用。

（四）根据层次获取节点

---

1、 .childNodes：获取元素的所有子节点。包括回车等文本节点。

       .children：获取当前元素的所有元素节点（只获取标签）。

 

2、 .firstChild：获取元素的第一个字节点。包括回车等文本节点。

      .firstElementChild：获取元素的第一个字节点。不包括回车等文本节点。

      .lastChild：获取元素的最后一个字节点。包括回车等文本节点。

       .lastElementChild：获取元素的最后一个字节点。不包括回车等文本节点。

 

3、 .parentNode：获取当前节点的父节点。

 

4、 .previousSibling：获取当前节点的前一个兄弟节点；包括回车等文本节点。

       .previousElementSibling：

 

5、 .nextSibling：获取当前节点的后一个兄弟节点；包括回车等文本节点。

       .nextElementSibling：

 

6、 .getAttributes：获得当前节点的所有属性节点。

（五）创建并新增节点

---

1、 document.createElement("标签名")：创建节点。需要配合setAttribute设置各种新

       属性

2、 父节点.appendChild(新节点)：末尾追加方式插入节点

3、 父节点.insertBefore(新节点，目标节点)：在目标节点前插入新节点

4、 被克隆节点.cloneNode(true/false)：克隆节点

>>> 传入true：表示克隆当前节点，以及当前节点的所有子节点；

>>> 传入false：表示只克隆当前节点，而不克隆子节点；

（六）删除或替换节点

---

1、 父节点.removeChild(被删节点)：删除父节点中子节点；

2、 父节点.replaceChild(新节点，老节点)：使用新节点，替换到老节点。

五、HTML-DOM

---

（ 一）表格对象

---

1、rows属性：返回表格中的所有行，是一个数组格式；

2、insertRow(index)：在指定位置插入一行，index从0开始；

3、deleteRow(index)：删除指定一行，index从0开始

（二）行对象

---

1、cells属性：返回这一行中的所有单元格，是一个数组格式；

2、rowIndex属性：返回这一行是表格中的第几行，从0开始；

3、insertCell(index)：在这一行指定位置，插入一个单元格，index从0开始；

4、deleteRow(index)：删除这一行的指定单元格，index从0开始

（三）单元格对象

---

1、cellIndex属性：返回这个单元格是本行的第几个，从0开始；

2、innerText  innerHTML  align  className

var table=document.getElementById("table");
        function addRow(){
            var index = table.rows.length-1;//取到倒数第二行的索引值
            var newRow=table.insertRow(index);//插入一个新行并返回

            var name=prompt("请输入书名");
            var cell0=newRow.insertCell(0);//插入一个新单元格并返回
            cell0.innerText=name;

            var money=parseFloat(prompt("请输入价格"));
            var cell1=newRow.insertCell(1);//插入一个新单元格并返回
            cell1.innerText=money.toFixed(1)+"元";//money.toFixed(1)保留一位小数。
            getSum();
        }

        function delRow(){
            if (table.rows.length>2) {
                table.deleteRow(table.rows.length-2);
            }else{
                alert("憋删了，没啦！");
            }
            getSum();
        }