初级JS

Posted 2020-09-18 法门扫地僧

唐太宗  李世民  杀了大哥 和弟弟  登上的皇位    一个人当皇帝

排他性是指一种物品具有可以阻止其他人使用该物品的特性。

排他性思想：

在程序中但凡是遇到只让自己怎么样，不让别人怎么样的效果，都要用到排他性思想。而排他性思想往往需要使用到for循环进行群控制。

步骤：一定是先排他，再控制自己。

排他思想：  首先先清除所有人，  再剩下我自己。

<script>

    var btns = document.getElementsByTagName("button");

    for(var i=0;i<btns.length;i++) {  // 遍历所有的按钮

        btns[i].onclick = function() {

            // 当我们每次点击， 首先先清除所有人

            for(var j=0;j<btns.length;j++) {

                btns[j].className = "";

            }

            // 剩下我自己

            this.className = "current";

        }

    }

</script>

1.1.1    js 自定义属性

var  index = 10;  变量

var arr = [];

arr.index = 20;   //  自定义属性

本质上，index   和  arr.index  他们 一样 的， 都是变量 。

index   变量      miss   女士   自由自在的 

arr.index  属性     mrs   夫人    index  属于arr  只有在arr 才可以使用

 

1.2   tab栏切换

 我们要想方设法的知道，当前盒子的索引号

1  <script>

2      var btns = document.getElementsByTagName("button");   // 得到了所有的btn

3      var lis = document.getElementsByTagName("li");   // 得到了所有的btn

4      // alert(lis.length);

5      for(var i=0; i<btns.length;i++) {   // 遍历按钮

6           // 给每个小按钮指定一个 索引号

7           btns[i].index = i;

8           btns[i].onclick = function() {

9               // alert(this.index);    索引号 按钮

10              //  清除所有人，剩下我自己   li 也是全部都隐藏  剩下 当前li

11               for(var j = 0;j < btns.length; j++)

12               {

13                   btns[j].className = "";

14                   lis[j].className = "";

15               }

16               this.className = "current";    //  单击的对象

17               lis[this.index].className = "show";   // 留下当前的一个  li  this.index

18           }

19      }

20  </script>

1.3   switch 多分支语句

这个语句和 if   else if  else  if  .....  相等的，但是switch 的效率更好，优先考虑使用。 break;

语法格式：

1    switch(参数) {

2        case “参数1”:

3         语句;

4         break;    //  退出的意思

5         case “参数2”:

6         语句;

7         break;    //  退出的意思

8         .....

9         default:    // 默认的    可以写也可以不写

10          语句;

11      }

最终，就是从多个 case 里面选择一个来执行， 因为有break 退出switch，因此只能执行一次。效率更高。  如果case参数里面都没有，就 执行 default 语句。

注意：  里面的汉字必须要加引号哦！

1.4   选择事件 （下拉列表）

下拉列表 不同于其他的表单，因为他有多个值，  但是只能选择一个 ，

这是时候我们用  选择改变事件   onchange      change 改变     

 select.onchange = function() {}      

后面的屏幕缩放事件也是用onchange 

1.5   页面加载事件

window.onload 是等到页面完全加载完成才会触发事件，页面完全下载后,页面中所有的DOM元素都是可以访问的.这种方式有一个很大的优点:不用考虑DOM元素加载的顺序。

<script>

    window.onload = function() {

        var demo = document.getElementById("demo");

        demo.style.backgroundColor = "red";

    }

</script>

后面追加 push  

push 推  送     从后面推   

push()  从后面追加 内容  

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

var arr = [1,3,5,7];   // 原数组

arr.push(9);  //把 9 添加 arr 的最后面

console.log(arr);   //  13579

a.push(b)      把 b  添加到 a 的最后面       同时 a 变了 

<script>

    var arr = [1,3,5,7];   // 原数组

    arr.push(9);  //把 9 添加 arr 的最后面

    console.log(arr);   //  13579

    console.log(arr.push(11));  // 返回的是数组的长度 6 

    console.log(arr);  // 1.3.5.7.9.11

</script>

 

从前面加内容

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

// unshift 组

var  arr1 = ["a","b","c"];

arr1.unshift("你好");

console.log(arr1);  // ["你好", "a", "b", "c"]

console.log(arr1.unshift("今天"));  // 返回数组的长度  5

 

删除数组内容

我们可以添加内容，也可以删除内容。

pop()   移除最后一个元素

   pop()  移除最后一个元素    和 push 正好相反   

   返回值 是 返回最后一个值 

   而且它每次，只删除一个，因此他的括号里面是没有参数的。

   返回的是，删除的最后一个元素

#ff0000      rgb

// pop()  删除最后一个元素   并且返回最后一个值

var arrpop = [1,2,3,4,5];

arrpop.pop();  // 删除一次  把 5删掉了   [1,2,3,4]

console.log(arrpop);  // [1,2,3,4]

console.log(arrpop.pop());  // 把 4 删掉   剩下  [1,2,3]  返回的是 4

console.log(arrpop);  // [1,2,3]

 

  删除第一个元素 shift()

 shift  和  unshift 正好相反   

 shift  删除第一个                    上档

 unshift 从第一个开始添加

 shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值

 // shift 删除第一个元素    并且返回第一个值

var arrshift = ["a","b","c"];

console.log(arrshift.shift()); //  a

console.log(arrshift);  // [b,c]

arrshift.shift();  // 吧b  删掉了， 并且返回 b

console.log(arrshift);  // 只剩下一个c

 

  添加     a.push(b)   把b 推到a 的最后面      unshift 前面加

  pop()   后面删    shift()   括号里面没有 参数  只操作一个

连接数组

a.concat(b)     把 a数组和b数组连接   并成一个新数组。  

   concat()

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

   // 连接数组

 var aa = [1,2,3];

 var bb = ["a","b","c"];

 console.log(aa.concat(bb));  // 新的数组 [1, 2, 3, "a", "b", "c"]

 console.log(aa);

 console.log(bb);

join() 将数组转换为字符串

作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。

语法

arrayObject.join(separator)

数组名.join(“分隔符”)

数组转换为字符串

参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

// join  将数组转换为字符串

 var arrjoin = ["2015","12","2"];

 console.log(arrjoin.join("-"));  //  2015-12-2   字符串

 console.log(arrjoin.join("+")); //  2015+12+2

 console.log(arrjoin.join("*")); //  2015*12*2

 console.log(arrjoin);  //  结果是原数组   不影响本数组

split() 将字符串转换为数组

split() 方法用于把一个字符串分割成字符串数组

语法

stringObject.split(separator,howmany)

字符串.split(“字符串的分隔符”，[最大长度]);

参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

howmany 可选。该参数可指定返回的数组的最大长度

// split 将字符串转换为数组

var txt = "2015-12-2";

var text = "中国 山东 威海 小渔村";

console.log(txt.split("-"));

console.log(text.split(" "));

  

javascript 组成

1. 核心（ECMAScript）          

     描述了JS的语法和基本对象。比如变量区分大小写等

2. 文档对象模型（DOM）    重点

     处理网页内容的方法和接口    比如怎么得到某个表单的值 怎么去关闭某个div

3. 浏览器对象模型（BOM）

     与浏览器交互的方法和接口     前进， 后退  弹出窗口   跳转页面

 ECMA  欧洲计算机制造商协会 

DOM  (document object model) 文档对象模型

楼房 盖房子之前 先建模  。    dom  模型  

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。

目的其实就是为了能让js操作html元素而制定的一个规范。

DOM树的根统一为文档根—  document 

 

节点（Node）

由结构图中我们可以看到，整个文档就是一个文档节点。

而每一个HMTL标签都是一个元素节点。

标签中的文字则是文字节点。

标签的属性是属性节点。

一切都是节点……

我们用的最多的就是 元素节点    

 元素 就是 标签  就是标记   就是 div  span  a  .....

 

获取节点

比如页面中有很多的div  span 这些标签  元素  我们怎么得到这些 元素节点呢？  

 所有的div 

 这里有个 div  ID  为  demo的，我们怎么获得 div 元素节点？

我们前面学过： 

1. 1.   document.getElementById(“demo”)     id 为标记的    #demo 
2. 2.   document.getElementsByTagName(“div”)   所有的div    div
3. 3.   document.getElementsByClassName(“one”)  所有类名为one 的   .one

 获得类名这个语法 ie678是不支持的。 我们只能自己去写兼容性的写法。

 

  第一层写法：

12         //  分两部分 ，首先是浏览器支持de

13      function getClassName(classname) {   // 形参

14          //  先看看浏览器支不支持

15          if(document.getElementsByClassName) {   // 如果支持这个写法

16              return document.getElementsByClassName(classname);  // 直接返回所有元素

17          }

18          // 下面的语句是ie678 执行

19          // 核心思想   把所有的标签都取过来， 然后一个一个的判断当前元素的类名是不是  classname

20          //是就留下，不是 就走开

21          // alert(11);

22          var arr = [];  //数组用来存储满足条件的 元素

23          var dom = document.getElementsByTagName("*");  // 把所有的标签都取过来 *  所有的

24          for(var i=0;i<dom.length;i++) {  // 开始遍历

25              if(dom[i].className == classname) {    // 判断

26                  arr.push(dom[i]);  // 往  数组后面追加

27              }

28          }

29          return arr;  // 返回总的数组

30      }

 

第二层写法： 

31     //  分两部分 ，首先是浏览器支持de

32      function getClassName(classname) {   // 形参

33          //  先看看浏览器支不支持

34          if(document.getElementsByClassName) {   // 如果支持这个写法

35              return document.getElementsByClassName(classname);  // 直接返回所有元素

36          }

37          // 下面的语句是ie678 执行

38          // 核心思想   把所有的标签都取过来， 然后一个一个的判断当前元素的类名是不是  classname

39          //是就留下，不是 就走开

40          // alert(11);

41          var arr = [];  //数组用来存储满足条件的 元素

42          var dom = document.getElementsByTagName("*");  // 把所有的标签都取过来 *  所有的

43          // 去过所有的标签之后， 把 每一个标签的类名 （字符串） 转换为数组 ， 只有数组才可以遍历

44          for(var i=0;i<dom.length;i++) {  // 遍历每一个标签

45              // 把每一个标签的类名 转换为数组

46              var arrName = dom[i].className.split(" "); // "demo nav test"   = ["demo","nav","test"];

47              // var arrName = ["demo","nav","test"];  // 用来存储每一个 类名的数组

48              for(var j=0;j<arrName.length;j++) {  // 遍历 arrname

49                  if(arrName[j] == classname) { // 判断

50                      arr.push(dom[i]); // 把当前满足条件的元素  给 arr

51                  }

52              }

53          }

54          return arr;  // 返回总的数组

55      }

节点的访问

  DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问    

 

 

 

 

 

 

父级   兄弟    孩子       

 父级  parentNode 

这里特指  父亲  的意思  ， 亲的父亲

就是当前元素的上一级。    就是亲爹   爷爷不算 。

 

<script>

    window.onload = function() {

        var x = document.getElementById("x");   // 事件源

        x.onclick = function() {

            this.parentNode.style.display = "none";  // 关闭的是他的爸爸

        }

    }

</script>

 

 兄弟节点

nextSibling           下一个兄弟     ie 678 写法  

nextElementSibling

previousSibling            上一个兄弟    ie678 

previousElementSibling      谷歌 火狐等  

 

nextSibling 下一个兄弟的意思， 再ie678里面是正常的，但是在谷歌，火狐浏览器里面，默认的下一个兄弟， 是空格或者是换行。 

所以，再谷歌等浏览器里面，我们使用： nextElementSibling   这个单词有效的避免了 下一个兄弟是换行等问题。

综合兼容性的写法：     || 

56    <script>

57      var two = document.getElementById("two");

58      // two.nextSibling.style.backgroundColor = "red";

59      var next = two.nextElementSibling || two.nextSibling;

60      next.style.backgroundColor = "purple";

61  </script>

  注意： 一定先写  nextElementSibling  ，因为谷歌认识nextSibling，但是谷歌会报错，所以我们优先执行 nextElementSibling 。

 第一个和最后一个孩子

 第一个和最后最后一个孩子很特殊的。  站在父亲的角度来考虑问题，这里的孩子，其实特指 儿子。 亲儿子 

 firstChild    第一个孩子        lastChild  最后一个孩子

 以上 是   ie 6 7 8

firstElementChild    谷歌和火狐等浏览器的写法。

兼容性的写法：

<script>

  var father = document.getElementById("father");

    // father.firstChild.style.backgroundColor = "gray";

    var first = father.firstElementChild || father.firstChild;

    var last = father.lastElementChild || father.lastChild;

    first.style.backgroundColor = "gray";

    last.style.backgroundColor = "gray";

</script>

 

  孩子们

我们想要得到所有的孩子 ， 所有的， 亲生儿子 。  其他的孙子辈的不算。

1. 1.  childNodes    得到所有的亲孩子节点      嫡出      w3c 推荐使用的  。

      但是会有一些问题。    再谷歌等浏览器里面， 会把 折行 也看做是一个孩子。

  

     这样做，是不可以的，  因为我们得到它的所有孩子的目的是为了遍历， 我们得想一个办法？

     nodetype 这个属性的作用是用来检测 元素节点类型的。   

      <a href=”http://www.biadu.com” >  百度 </a> 

 其中 a  我们成为  元素节点       href  成为属性节点    百度 文字节点

      平时我们只需要操作元素节点。

 

      nodeType  ==  1  表示 的是 元素节点      记住   元素就是标签

      nodeType  ==  2  表示是属性节点   了解

      nodeType  ==  3  是文本节点   了解

<script>

    var demo = document.getElementById("demo");

    // alert(demo.childNodes.length);

    var nodes = demo.childNodes;  // 获取了所有的孩子节点  包含 div  包含 换行等等 7

    for(var i=0;i<nodes.length;i++) {

        if(nodes[i].nodeType == 1) {

            nodes[i].style.backgroundColor = "red";

        }

    }

</script>

 

2. children         这个是庶出       ie 发明的   我们现在用最多的。 几乎没有兼容性 。  其他浏览器都支持

     children  获得是某个盒子里面所有的 元素节点。   提倡使用

  只获得标签。

     因为children  再 ie678 里面  包含注释节点    要注意一下。 可以避免开的。

    <script>

    var demo = document.getElementById("demo");

    // alert(demo.children.length);

    var child = demo.children;   // demo 里面所有的 标签

    alert(child.length);

    child[0].style.backgroundColor = "red";   // 第一个孩子

    child[child.length-1].style.backgroundColor = "red";   // 最后一个孩子

</script>

 

DOM节点操作  ★★★

我们的元素节点很多是动态生成的。

比如 ：  轮播图 下面的小圆点 ，是根据 图片的张数动态生成的。

DOM节点操作 ， 添加 删除   克隆     创建  .....

上面我们讲的都是属性，  第一个孩子  孩子们   颜色  大小  

下面我们开始讲的，  我们创建节点  等等 都是操作 带有动词的特性，都是方法。  是方法带有括号。

创建节点  createElement

没有的，我们可以给它生成 ， 创建节点是从无到有的过程，不同于 显示和隐藏。  

var test = document.createElement("div");  // 创建了一个新的div 

 

 document.createElement(“标签名”) 

document.createElement("span")   创建新span标签

创建完毕，要添加到我们的dom 页面中。

 添加节点

添加节点就是把我们创建的节点 放到某个地方 。

1. appendChild()           append 追加的意思       追加一个子节点
   a.appendChild(b);   把b放到 a 的里面 并且是 a的孩子们最后面 
      后追加 。  b 一定是a 的孩子 。  必须的 

 

2. insertBefore()

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

     insertBefore() 方法 ，如果不是在末尾插入节点，而是想放在特定的位置上，用这个方法，该方法接受2个参数，第一个是要插入的节点，第二个是参照节点，返回要添加的元素节点

  如果 第二个参数 为null   则默认插入到后面  不能省略

demo.appendChild(newDiv);

var newSpan = document.createElement("span");

demo.insertBefore(newSpan,newDiv);  // 1 参数  插入的子节点   2 参数 参照节点

  属性的相关设定

getAttribute(“属性”)    get  获得   attribute  属性的意思   获得属性值

demo.getAttribute(“id”)   可以获得 demo的id名字 是 demo 

setAttribute(“属性”,”值”)   设置属性值      

demo.setAttribute(“class”,”box”);    给demo 添加一个 class 为  box  

demo.className = “box”  等价的

removeAttribute(“属性名”) ;    删除某个属性

demo.removeAttribute(“class”)   就把demo 的class 属性删掉了

其中 以上写法， ie67.不支持.

兼容性写法： 

    demo.className = “one” ;

 cssText 

 cssText  可以更改多个属性设置

 

 删除节点  removeChild()

  删除子节点   

a.removeChild(b)    删除a 里面的 孩子 b 节点 。

   克隆 节点 (cloneNode)  

用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）

<script>

    var demo = document.getElementById("demo");

    // demo.cloneNode(true);  // 克隆节点

    demo.parentNode.appendChild(demo.cloneNode(true));

</script>

获取日期和时间

getDate()               获取日 1-31      

getDay ()              获取星期 0-6     

getMonth ()             获取月 0-11

getFullYear ()           获取完整年份（浏览器都支持）

getHours ()          获取小时 0-23

getMinutes ()            获取分钟 0-59

getSeconds ()            获取秒  0-59

getMilliseconds ()   获取毫秒         1s  =  1000ms

getTime ()            返回累计毫秒数(从1970/1/1午夜)    时间戳

1.6   定时器之 setInterval

 

我们页面中有很多的效果，是自己的运动的。 这个是用什么做的呢？

for 循环的效果，但是他一下子就执行完毕，我们看到这个轮播图有什么效果，每隔n秒 ，就运动一次，是有规律的。

手机有闹铃， 每天的 8：30分， 闹铃就会响。  定闹铃 。

我们js 里面也可以定闹铃， setInterval 

window.setInterval(“执行的代码串”,间隔时间);

大部分情况下， window 都是省略  。 

意义：  每隔一定时间，就会去执行一次 代码串。  永不停歇 。 连续型。

setInterval("console.log(‘你好吗‘)",1000);

  后面的时间   单位是  毫秒       1000 ms     ==  1s 

每隔 1秒就去调用一次  console.log 这个语句,  只不过直接写语句会非常少，我们大部分都是用函数来代替。

1.  setInterval(“fun()”,1000); 

2.  setInterval(fun,1000);     //  最为常用  

3.  setInterval(function() {},1000)

 总结： 

      必须说明，定时器的一个重要用途就是它可以不断刷新某个区域！ 不在初始化中执行； 而且是有时间可控的。

1.6.1    设定自己的时间

我们再2015年12月12日 做一个活动 ， 就要开始倒计时 。 

设定目标时间 才对 。

var endTime = new Date(“2015/12/12 17:30:00”)

1.6.2    得到过去的毫秒数

我们计算机里面时间，都是用毫秒来计算的。 精确。

我们计算机的时间是从 1970年1月1日  开始 的。

累加的毫秒数

var date = new Date();

console.log(date.getTime());

console.log(date.valueOf());

console.log(Date.now());

console.log(+new Date());

1.7    倒计时

我们计算的是还剩下多少时间。   2015年12月12

用将来的时间  -  现在的时间  ===  剩下的时间 

我们的思路 ： 把他们转换为 毫秒    各种计算。   

总结：  

  用将来时间的毫秒数 （2015.12.12距离 1970年1.1 的毫秒数） 减去

现在时间的毫秒数    ==  一共 还剩下多少毫秒。

我们前面学过那些运算符。

 

一元操作符 ++， -- ，+ -        加加 减减   正号 负号   +a   -a

 

逻辑操作符   !    &&      ||  

 

基本运算符  +, -, *, /, %

 

关系操作符 >, <, >=, <=, ===, ==, !=, !==

 

条件操作符 （三元运算符） a ?  b :  c 

 

赋值运算符 +=, -=, *=, /=, %=         a+=2    a = a+2 ;

 

逗号运算符 ,         var a=10,c=10;

优先级

1    ()

2    !、-、++、--          一元

3    *、/、%

4    +、-

5    <、<=、<、>=    

6    ==、!=、===、!==、

7    &&

8    ||

9    ?:

10   =、+=、-=、*=、/=、%=        赋值        计算完毕，再给值

几个面试题

var aa  =   0&&1;

alert(aa)    0

var bb =  1&&0;

alert(bb);    0

var cc =  1&&10;

alert(cc);  10

与 && 使用规则 

a&&b      

  如果 a 为假       则返回a 的值     0&&1   返回0

  如果a 为真，     则返回 b 的值    1&&10  返回 10 

var a = 1 && 2 && 3;

console.log(a);   3

var b = 0 && 1 && 2;

console.log(b);  0

var c = 1 && 0  && 2;

console.log(c);  0

或 ||  运算规则

 a || b

  如果a 为假   则返回的是  b 的值  。

  如果a 为真   则返回的是  a 的值 （自己的值）

console.log(0||1);

console.log(1||0);

console.log(1||5);

console.log(5||1);

   var first = father.firstElementChild  ||  fathter.firstChild;

 

 var a = 0 || 1 || 2;

 var b = 1 || 0 || 3;

 console.log(a),console.log(b);

 

var a = 3 && 0 || 2;

var b = 3 || 0 &&  2;

var c= 0 || 2 && 3;

alert(a),alert(b),alert(c);

结果是：   一定先算 &&  后 算 ||       2  3  3 

  0 && 1  ==  0       0 与 任何数 都的 0 

  0  || 1   = =  1         0 或 任何数 都的 任何数

最后：

var a = 1+4&&3

var b = 0&& 3+1；

var c= 1 || 2 && 5-1;

alert(a),alert(b),alert(c);

d = d>10 ? -d : d    

转换为字符串 (理解)

我们前面学过转换为字符串 

1. + ””  转换为字符串    var num = 10;  console.log(“num”)；  console.log(num+ “”); 

2. String()  构造函数    String(num);

3. toString()，内置转换方法（进制基数）

     var num = 10;   console.log(num.toString());

console.log(demo.toString(2));    // 把 demo 里面值 转换为 2进制

  根据位置返回字符（重点）

1 charAt，获取相应位置字符（参数： 字符位置）

注释：字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

2 charCodeAt获取相应位置字符编码（参数： 字符位置）  索引号

charAt()方法和charCodeAt()方法用于选取字符串中某一位置上的单个字符

区别：

charCodeAt()方法，它并不返回指定位置上的字符本身，而是返回该字符在Unicode字符集中的编码值

 

 

 

my name is andy   big5  gb2313       unicode      

var txt = "abcdefg";

alert(txt.charAt(3));  // 返回 索引号3 的 字符    d

var demo = "今天是周末";

alert(demo.charAt(2));  //   返回   是

alert(txt.charCodeAt(3));  // 返回的是相应的 字符 的 unicode 编码

alert(demo.charCodeAt(2));

根据字符返回位置(重点)

 

 1 indexOf，从前向后索引字符串位置（参数： 索引字符串）

从前面寻找第一个符合元素的位置  找不到则返回 -1

 2 lastIndexOf，从后向前索引字符串位置（参数：索引字符串）

从后面寻找第一个符合元素的位置

找不到则返回 -1

从后面往前面找， 找到后，索引号 数的时候从前面往后数

 

 他们是根据字符返回位置 。

  aa.jpg    aa.jpeg 

 var  aa = “abcdefg”       aa.indexOf(“c”) ; 

 

62  <script>

63      function $(id) {return document.getElementById(id)}

64      $("btn1").onclick = function() {

65          //  asdf.indexOf("a");

66             alert($("all").value.indexOf($("index").value));

67      }

68      $("btn2").onclick = function() {

69          //  asdf.indexOf("a");

70             alert($("all").value.lastIndexOf($("index").value));

71      }

72  </script>

 url 编码和解码（了解）

URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字 符，从而让浏览器能够接受和理解。

 var url = “http://www.itcast.cn?name=andy”

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码

decodeURIComponent() 函数可把字符串作为 URI 组件进行解码

<script>

    var url = "localhost:itcast.cn? name=andy";

    var str = encodeURIComponent(url);  // 编码的过程

    console.log(str);

    console.log(decodeURIComponent(str));   

</script>

截取字符串(重点)

我们从一串字符里面， 取某几个 。  截取字符串

concat 连接字符

var txt = “123”;

console.log(txt.concat(“abc”));

slice

slice，截取字符串（参数：1，截取位置【必须】，2终结点）

 

asdf.slice(2);     //   df

意思：  从 索引号2 的位置 开始截取，如果没有结束位置，则会一直截取到最后。

asdf.slice(2,3)   // d  

结束位置，   从最左边数的个数    这里从a开始数 3个 。

asdf.slice(-1) //    f

负号 表示 从右边开始往左边取    -1 就是取最后一个  -2 就是取最后两个的意思。

substr

 substr，截取字符串（参数：1，截取位置【必须】，2截取长度）

截取的长度   从当前位置开始数   截取的长度

 asdf.substr(2,2);   //  df   第一个2 从 索引号2 开始取， 第2个2

从当前开始数2个。

 substr(-1)   负值是有兼容性问题的。  ie8以下的版本  会直接返回所有字符串。  所以，我们不建议使用 substr负值 。

 兼容性onButtonClick("btn8",div1.substr(div1.length-1,1));

substring

substring 同slice 

 

  但是如果 有两点不同就是 会有参数比较大小

  substring(6,3)   它会自动转  substring(3,6)

  substring则干脆将负参数都直接转换为0   全部取过来

 

 “12345678”.slice(2,5)      345    

 “12345678”.substr(2,5)      34567

小数位数(了解)

var PI = 3.141592653; 

console.log(PI.toFixed(2)); 

保留两位小数    后面小数会四舍五入

转换大小写

1 toUpperCase，转换为大写（参数：无）

2 toLowerCase，转换为小写（参数：无）

数值函数

var max = Math.max(4,2,6,7,8,3);

var min = Math.min(4,2,6,7,8,3);

如果max函数没有给出任何参数，返回-Infinity

如果有NaN或者非数字类型的参数，返回NaN

alert(Math.max(1,3,4,‘10‘));

 

alert(Math.max(1,3,4,‘10abc‘));

alert(Math.max(1,3,4,NaN));

alert(Math.max(1,3,4,undefined));

第一个是 10  后面三个都是  NaN      只有里面 不是数值型的， 返回的结果 就是 NaN.

 

 

 

定时器之 setTimeout

 我们前面学了 setinterval  现在学习  setTimeout

 setTimeout 才是真正意义上的  定时炸弹。  就结束了

 

 

setInterval(fn,1000)   每隔1秒 就执行一次 fn 函数

setTimeout(fn,1000)  1秒钟之后，去执行一次 fn 函数， 就over了 。  一次性的。

<script>

     function $(id) { return document.getElementById(id);}  // id函数

     function hide(id) {   // 隐藏函数

         $(id).style.display = "none";

     }

     function show(id) {

         $(id).style.display = "block";

     }

     setTimeout(closeAd,5000);

     function closeAd() {

         hide("left");

         hide("right");

     }

</script>

深层看去两定时器的区别

 

js  页面跳转语句  BOM

window.location.href = “http://www.itcast.cn”;

 递归调动（重点）

 

函数自己调用自己，我们成为递归调用。   一定要写退出条件，否则死循环。

 

setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒.

而setInterval却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。

  arguments.callee （重点）

arguments.callee

返回正被执行的 Function 对象。

在使用函数递归调用时推荐使用arguments.callee代替函数名本身。

 

停止定时器

clearInterval(定时器的名字);

clearTimeout(定时器的名字); 

clearInterval(timer);  // 先清除以前的定时器

timer = setInterval(function() {}