Js笔记一

Posted 2020-10-30 xun98

第一章：

编写js的流程：

1. 先布局html、CSS；
2. 修改页面元素样式；
3. 确定事件，编写事件，
4. 根据事件，编写ＪＳ；
5. 响应操作，修改页面元素样式

第二章

       Javascipt 基础

　　１．     变量类型：number ,string ,Boolean ,function ,object ,undefined;

　　２．     变量类型转换（显示类型）：

　　num1=parseFloat(oTxt1.value); 把()里的值转换为Float类型;

　　num2=parseInt(oTxt2.value); 把()里的值转换为Int类型;

　　３．     变量类型转换（隐式类型）：

　　var a=5; var b=”5”; var c=”2”;

　　先转换类型，再比较：alert(a==b);  “==”

　　不转换类型，直接比较:alert(a===b);  “===”

　　不转换 alert(b+c);  “52”

　　先转换类型，再运算: alert(b-c); ”3“

　　４．     变量作用域：

　　全局变量：放在函数体外部的变量，所有函数都可以调用和赋值；

　　局部变量：放在函数体内部，只可此函数调用和赋值，其他函数定义相同的变量名不冲突；函数属平行关系

　　５．     闭包：子函数可以使用父函数里定义的函数，父函数>子函数

　　６．     运算符：%    var a=20; a%3=2;

　　７．     隔行变色（运算符 求模的应用）

　　var aLi=document.getElementsByTagName("li");

 

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

               {

                      if(i%2==0)

                      {

                             aLi[i].style.backgroundColor = "#aaa";

                      }

                      else

                      {

                             aLi[i].style.backgroundColor = "#eee";

                      }

 

                       }

　　８．     Switch ：

　　switch(变量)

　　{  

　　case 变量值：

　　语句块；break;

　　…

　　default:

　　语句块；

　　}

　　９．   break和continue的区别

　　break:跳出全部循环；

　　continue:跳出本轮循环

　　１０．     真假：

　　Boolean: ture ，false

　　数值类型： 非0数字是真，数字0是假

　　字符串： 非空字符串是真，空字符串是假

　　object:  非空对象是真，空对象null是假

   　　undefined是假

　　１１．  array和Jason

　　array里可以定义多个数值，从0开始，array=[1,2,3]; array[0]=1;

　　array有length

　　Jason={a:1;b:2;c:3};  没有length

　　for(var i in jason)

          {

                 alert(jason[i]);

              }

　　　　1   2   3

　　１２.    可变参argument

　　argument是一个数组，存放所有的参数,将其他       参数里的值组成数组 sum(1,2,3)  argument[0]=1; argument[1]=2; argument[2]=3;

　　１３.    参数个数不同，函数执行功能不同

　　gsstyle(oDiv,"backgroundColor","#f00");

　　arguments[0].style[arguments[1]];

　　１４．   提取非行间样式:

　　提取非行间样式的方式只能用Id的方式：

　　IE:arguments[0].currentStyle[arguments[1]];

　　ForeFox:getComputedStyle(arguments[0],false)[arguments[1]]);

　　１５.    数组基础

　　var arr=[1,2,3];

　　arr.push(4);  1,2,3,4 在数组末尾添加元素;

　　arr.pop();   1,2 去掉末尾的元素，返回前面的元素;

　　arr.shift();  2,3 去掉第一个元素，返回后面的元素;

　　arr.unshift(0); 0,1,2,3 在数组第一个元素前面插入元素;

　　arr.sort()； 排序;

　　arr.join(“/”)   1/2/3 数组里每个元素插入 “/” ;

第三章

      动态计时器：拥有时分秒 例如：00:10:10

           HTML排列图片，定义图片样式；

      function tick(){  

　　/获取系统时间：/

　　var oDate=new Date();

　　var str=toDbl(oDate.getHours())+toDbl(oDate.getMinutes())+toDbl(oDate.getSeconds());

　　/构建出image标签的src属性的取值，从而确定出时分秒的每一位应该使用哪一张图片；/

　　var aImage=document.getElementsByTagName("img");

　　/利用for循环获得图片变换/

　　aImage[i].src="image/"+str.charAt(i)+".jpg";}

　　setInterval(tick, 1000);  //设置定时器，每隔一秒调用tick函数构建图片的src属性值

       tick(); //为了处理页面加载的时6位时分秒全显示0的问题

　　定时器:

　　　 var 计时器名＝setInterval(tick,1000);

      　　清除定时器：clearInterval(计时器名);

                            clearTimeout(计时器名)；

第四章：

     　　offsetLeft的应用：轮播图

     　　 挂历应用：

　　　　初始化所有的li的css样式为默认值

                            {

                                   aLi[i].className=‘‘;

                            }

                            this.className=‘active‘;  //将当前的li的CSS样式处理为活动状态

　　　　选项卡应用

第五章：

      　　childNodes返回的是子节点的集合，是一个数组的格式，会把空格和换行当成节点信息

    　　  parentNode获取当前元素的父元素:

　　　   alert(oUl.parentNode)

     　　 offsetParent获取所有父节点

      　　firstChild获取第一个子元素

      　　firstElementChild获取第一个子节点