JavaScript基础学习--01热身

Demos：   https://github.com/jiangheyan/JavaScriptBase 

 

一、js大致思路：

1、完成静态HTML+CSS

2、过一遍整体的大致js思路

3、按照从上到下的，从有至无的顺序完成js编写（包括先写大致轮廓，再细化细节部分）

4、调试代码     

 

 

二、要点：

1、html编写时最好保持结构一致，达到代码清晰易维护的目的

 

2、js事件委托的运用

 

3、简化代码，当同一段代码出现两次以上的时候，考虑写成函数形式

 

4、button按钮最好用a标签制作，减少input(submit),不必要的表单提交

 

5、js中变量的合理利用

 

6、href="javascript:;" 和 href=""以及href="#"的区别：

    "＃"包含了一个位置信息,默认的锚点是＃top 也就是网页的上端,a href ="#" 不会刷新页面，会回到页面顶部。

    a href ="" 默认打开的还是当前页面，会刷新一下重新打开。

    而javascript:void(0) 仅仅表示一个死链接

    这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首,    而javascript:void(0) 则不是如此,所以调用脚本的时候最好用void(0)

    注意点：要执行某些处理，但是不整体刷新页面的情况下，可以使用void    (0),但是在需要对页面进行refresh的情况下

 

7、window.onload = function(){} 能改变代码执行顺序，待HTML页面执行完成之后再执行此部分的内容

 

8、元素移除的方法：

     display:none; 

     visibility:hidden; 

     width/height(0); 

     透明度（opacity）;  

     left/top;       

     白色div遮盖； 

     margin(负值或超大)……

 

9、事件：鼠标事件、键盘事件、系统事件、表单事件，元素添加事件的方法：（obj.事件名）

 

10、函数：不会主动执行，调用方法：直接调用abc();  事件调用 元素.事件名=函数名/匿名函数

 

11、获取元素的方法：

     a.     var oDiv = document.getElementById('id');     //命名方法：o标示一个元素对象object，a表示一堆元素对象array

     b.     var aLi = [ document | obj ].getElementsByTagName('标签名');    

          （1）获取的时候是以数组的形式给出，所以即使该元素只有一个，也必须写成obj.getElementsByTagName('div')[0]; 的形式。

          （2）是动态方法（在开头处寻找元素，在中间动态创建元素，在末尾输出元素，得到的结果是所有的），区于getElementById，是静态方法，若在寻找元素的行以前没有找到元素，后面重新创建元素将会找不到。

     b.     H5新增方法， 缺陷：1、兼容性不太好（IE8以下不兼容）。2、非动态实时（动态创建的元素不会被选中）。3、使用包含选择器时，会包含祖先元素在内。

          document.querySelector('css selector');     匹配指定 CSS 选择器的第一个元素     eg. document.querySelector('#div, .class, div');

          document.querySelectorAll(css selector');     匹配指定CSS选择器选择的所有元素