JavaScript基础学习--01热身

一、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选择器选择的所有元素

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博客

Knockout.Js官网学习(click绑定)

click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和连接a上,但是可以在任意...

11820
来自专栏nice_每一天

如何编写高效的jQuery代码(转载)

1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大。所以有原生方法可以使用的场合,尽量避免使...

8120
来自专栏九彩拼盘的叨叨叨

Vue2.x 写法示例

注意:只在可信内容上使用 v-html,永不用在用户提交的内容上,否则会导致XSS攻击。

22720
来自专栏JetpropelledSnake

Vue学习笔记之Vue指令系统介绍

所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

11040
来自专栏拂晓风起

jQuery中this与$(this)的区别

13320
来自专栏Android干货

小程序实践(十):textarea实现简单的编辑文本界面

14320
来自专栏JavaEdge

2018-07-161 初识JQuery

进入官方网站获取最新的版本 http://jquery.com/download/ ,这里需要注意 jQuery 分 2 个系列版本 1.x 与 2.x,主要...

7810
来自专栏web前端-

JQuery语法

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

11620
来自专栏Modeng的专栏

Vue2.5笔记:Vue中的模版

我们在上一篇说到如何把 Vue 实例中的数据显示到视图中,就会需要用到我们的模版,我们只是简单的使用了一些,模版其实还有很多其他的特性。今天我们就来看看模版的其...

13310
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第四天 jQuery学习

jQuery是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。

17240

扫码关注云+社区

领取腾讯云代金券