js基础第四天-白红宇

js基础第四天

阅读量：5268 次

发布时间：2019-06-14

本文共 6360 字，大约阅读时间需要 21 分钟。

多个tab栏切换class封装

两个小循环（比较少用）

以前所学：for（初始化；条件；增量）{}

新的：while() 当 do{} while{}

while(条件){ 语句 }

只要条件满足，就一直执行

var j = 1; while(j<=100) {
       sum1+=j;      j++; } console.log(sum1);

结果5050

如果用for的话，一般主要是用for

var sum = 0, sum1 = 0, sum2 = 0; for(var i=1;i<=100;i++) {
       sum = sum + i; } console.log(sum);

结果5050

do{} while()语句

var k = 1; do {
       sum2 += k;      k++; } while(k<=100); console.log(sum2);

结果5050

while（）与do（）while（）的区别是什么？

do（）while（）先执行后判断，至少执行一次。

while（）先判断，如果不符合就不进行，如果符合再执行。不一定，有可能一次也不执行。

switch多分支语句

switch跟if else几乎是一样的，但是效率会更高。可以优先考虑switch。

switch(参数)

{

case 参数1：

语句；

break；退出的意思

}

{

case 参数2：

语句；

break；退出的意思

}

{

default；默认（这句可有可不有）

语句；

}

下拉菜单事件onchange

星座运势案例

这个案例的重点是选择下拉列表，有三个元素跟着一起改变。其中包含精灵图，以及星星的长度变化。

   
    
           
     
      星座运势
     
      
     
                
      
                     
       
              
       
                          
                          
        
          今日运势:                      
                                                                          
        
              
       
          
      
          
      
                     这几天的财运都很强，但是危机总在不知不觉之中发生了，例如：因为太过乐观而误判情势，导致投...[详细]

数组的常用方法

添加数组

push()方法可以向数组的末尾添加一个或多个元素，并返回新的长度。

var arr = [1,3,5]; arr.push(7,9);  // 把 7 9 放到 arr 数组的后面 console.log(arr);

结果是[1,3,5,7,9]

unshift()可向数组的开头添加一个或更多元素，并返回新的长度。

var demo = [1,3,5]; demo.unshift(0); console.log(demo);

结果是[0,1,3,5]

注意：

var dom = [1,3,5]; console.log(dom.push(7));  // 返回的是 数组的长度

结果是4，因为返回的是数组的长度。

删除数组内容

pop()删除最后一个元素，返回值是返回最后一个值。

var arrdele = [1,3,5]; console.log(arrdele.pop());  //返回的是 5 arrdele.pop();  // 删除3 console.log(arrdele);   //  结果  1

shfit()删除第一个元素，返回值是第一个值

var arrdele = [1,3,5]; arrdele.shfit();  // 删除3 console.log(arrdele);   //  结果  3,5

连接两个数组

concat()该方法用于连接两个或多个数组，它不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

aa.concat(bb);

var aa = [1,3,5];  var bb = ["a","b"]; console.log(aa.concat(bb));     /*结果[1,3,5,"a","b"]*/

join()把数组转换为字符串（常用）

arrayObject.join(separator)

数组名.join(符号) +-*/都可以转换。

var txt = ["aa","bb","cc"]; console.log(txt.join("*"));

结果aa*bb*cc

例子：var arr = [1,2,3,4];

var test = arr.join(“-”);

console.log(test) 1-2-3-4

var arr = [1,2,3,4];

arr.join(“*”);

注意：console.log(arr); [1,2,3,4] 为什么不变了，因为输出的是数组，数组是不变的，如果赋予一个变量承载，那么这个变量是改变的。

split()把字符串转换为数组（常用）

var txt = "aa-bb-cc"; console.log(txt.split("-"));

结果是[aa,bb,cc]

DOM(重点)

文档对象模型，处理网页内容的方法和接口。

DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能够让js操作html元素而制定的一个规范。

DOM树

节点

getElementById() id 访问节点

getElementsByTagName() 标签访问节点

getElementsByClassName() 类名有兼容性问题

主流浏览器支持 ie 67 8 不支持怎么办？我们自己封装自己的类。

封装自己的class类（以后用的多，要多写）

原理：我们要取出所有的盒子，利用遍历的方法，通过每一个盒子的className来判断，如果相等就留下。

封装一个class类（简单版），最后得出所要求的class类的个数。封装后可以键一个js文件，存进去以后直接调用。

完善版（当类名中一个class是多个类名组成该如何取）

如果是取盒子里面的长类名，那么要使用id父亲来进行

判断真假

我们用条件语句来判断5大数据类型中的真假；
数据	结论
数字类型	所有数字都是真，0是假
字符串	所有字符串都是真，’ ’串是假
对象	所有对象都是真，null是假
未定义	undefined是假，没有真

节点关系

父节点：parentNode（常用）

demo.parentNode.appendChild(demo.cloneNode());把demo复制一份，然后放到自己爸爸的孩子里，也就是给自己添加一个兄弟。

关闭二维码案例：

兄弟节点

nextSibling 下一个兄弟亲的 ie 678 认识

nextElementSibling 其他浏览器认识的

previousSibling 上一个兄弟 ie 678 认识

previousElementSibling 其他浏览器认识的

我们想要兼容我们可以合写 || 或者（ie和其他浏览器都兼容，one的下一个兄弟div的颜色为红色）必须先写正常浏览器，最后在写ie678

var div = one.nextElementSibling || one.nextSibling; div.style.backgroundColor = "red";

下一个兄弟例子：

子节点（很少用）

firstChild 第一个孩子 ie678

firstElementChild 第一个孩子正常浏览器

var one.firstElementChild || one.firstChild;

lastChild 最后一个孩子 ie678

lastElementChild 最后一个孩子正常浏览器

常用的方式，子节点

childNodes 选出全部的孩子

childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点（嫡出）

火狐谷歌等高本版会把换行也看做是子节点。nodeType==1就只会获取元素节点，不把换行也当成是子节点了。

拓展nodeType==2属性节点，nodeType==3文本节点

常用（重要）

children选取所有孩子，只包括元素节点。庶出，但是最好用。

DOM节点操作

新建节点，插入节点，删除节点，克隆节点

创建节点：

var div = document.createElement(“li”); 比如新创建一个li标签（节点）

插入节点：（只能创建子节点）

appendChild(); 添加子节点，添加孩子。并且放在最后面。如果之前有子节点，那么就在这个节点之后，再插入一个子节点。

insertBefore(); 插入谁谁谁的前面

insertBefore(插入的节点，参照节点);

如果第二个参数，也就是参照节点为null，那么则默认这个新生盒子放到最后面。怎么参照节点为null呢？在没有参照节点的时候用null。

childrens[0]意思是第一个孩子

childrens[0] == firstChild 虽然相等，但是firstChild第一个空格也能算出来，会出错，所以使用childrens[0]代表第一个元素节点更好。最后意思是把test放在最前面。

删除节点

removeChild(); 只能删除孩子节点。

克隆节点

cloneNode(); 复制节点

括号里面可以跟参数，如果里面是true，则深层复制，除了复制本盒子，还复制子节点。如果false，则浅层复制，只复制本节点，不复制子节点。

function tab(obj){}

tab(“a”);

tab(“b”);

tab(“c”);

这样的形式，在想多个盒子相互不影响，要单个控制调用的时候用，一般用ID给他们分开。封装tab栏切换函数。例子：多个tab栏切换。

function $(id){}

当有一个动作时，例如选择或者点击时，有很多的id类会有样式或者其他的变化，可以使用id的调用方法。

对于动态添加节点，可以先把整体样式做出来，然后再做添加节点，原本的类以及可以自动生成的删除即可。

转载于:https://www.cnblogs.com/yiningfamily/p/4976386.html

你可能感兴趣的文章

1.2 基础知识——关于猪皮（GP，Generic Practice）

UVA 10529-Dumb Bones（概率dp）

查看>>

关于IE和火狐，谷歌，Safari对Html标签Object和Embed的支持问题

查看>>

MyEclipse DB Browser使用图文全攻略

查看>>

poj3320 Jessica's Reading Problem（尺取思路+STL）

查看>>

A - Vasya and Socks

查看>>

项目管理、设计开发、代码管理、bug管理工具介绍