美文网首页
2018-06-22

2018-06-22

作者: 伴她_7984 | 来源:发表于2018-06-25 11:05 被阅读0次

    javascript之路

    01-认识JavaScript

     初始JavaScript

    JavaScript是一种直译脚本语言,是一种动态类型,弱类型,基于原型的语言

    前端三层结构层-html,表现层-CSS,行为层-JavaScript

    JavaScript通常用来操作HTML页面,响应用户操作,验证数据等等

    Java和JavaScript的关系,jQuery和JavaScript的关系

    JavaScript是布兰登·艾奇在1995年5月份创建

    ECMAScript:语法规则,一个标准,JavaScript的实现;DOM:(一个对象)提供方法让JavaScript来操作html的标签节点;BOM:提供方法,以便于JavaScript操作浏览器

    二.JavaScript代码写在哪里?

    写在html页面中.外部引入,写在标签里面 

    1)html页面中:标签里面 

    2) 外部引入:` 

    3) 标签中:

    三.写JavaScript需要注意什么?

    严格区分大小写

    语法字符半角字符

    完整语句后面用;结束

    缩进对齐

    四.弹窗与调试

    常用调试方法 

    1) alert(“内容”); 

    2) console.log(“内容”);

    几种不好看的系统弹窗 

    1) alert(“你好”); 

    2) confirm(“确定?”); 

    3) prompt(“请输入你的姓名:”);

    五.获取元素,注册事件,产生行为

    获取的元素.事件 = 反应;

    获取元素(这里元素也叫节点/DOM对象) 

    1) 通过元素ID获取

    document.getElementById('元素ID名')

    2) 注册事件

    document.getElementById('元素ID名').onclick

    3) 反应,行为

    document.getElementById('元素ID名').onclick =function(){

    alert("你好!");

    }

    六.JS注释

    //单行注释

    /* 多行注释 */

    七.获取元素的几种常用方式

    常见元素获取

    document.getElementById()//通过ID获取,获取某一个元素,所有浏览器兼容

    document.getElementsByClassName()//通过class类名获取,获取是一组,不支持IE8及以下

    document.getElementsByTagName()//通过标签名获取,获取是一组,所有浏览器兼容

    document.getElementsByName()//通过name获取,获取是一组,很少用,所有浏览器兼容

    document.querySelector()//通过css选择器获取,获取第一个元素,支持IE8及以上

    document.querySelectorAll()//通过css选择器获取,获取所有满足这个选择器的一组元素,支持IE8及以上

    特殊元素获取

    document.documentElement//HTML标签获取

    document.head//head标签获取

    document.title//title标签获取

    document.body//body标签获取

    操作HTML内容(这不是事件) 

    操作标签元素的HTML内容,就是一个行为

    document.getElementById("元素ID名").innerHTML ="我是通过JS来增加的";

    innerHTML 不解析标签

    innerText 解析标签 

    document.getElementById("wrap").innerHTML =  "<a href=' ' >百度</a>"

    document.getElementById("wrap").innerText =  "<a href=' '>谷歌</a>"

    八.JS DOM0级事件的简单认识

    事件

    方法 / 函数

    this

    九.定义变量

    关键词 变量名 = 值; => 就是把右边的值赋值给左边的变量名,变量名是自己取的

    变量命名规则 

    1)严格区分大小写 

    2)见名之意 

    3)不能以数字开头 

    4)不要使用中文变量名 

    5)不能使用关键字和保留关键字 

    6) 可以使用数字 , 字母 , _ , $

    ES5定义变量,关键词var 

    在JavaScript中,{},if,for这些里面的都称之为块级作用域

    varmood;//声明不赋值

    varmood1 = happy;//声明再赋值

    varmood1 = sad;//同层级多次重复声明同一个变量没有意义

    1)可以重复申明变量,而且是合法的,并且是无害 

    2)同一个变量名可以多次赋值 

    3)可以在代码块内修改代码块之外声明的变量

    varmyVar ="zhaoge";

    functionfn(str){

    returnmyVar ="goudan"+ str;

    }

    fn("dada");

    console.log(myVar);

    4) 在全局范围内都有效

    varmyVar = [];

    for(vari =0; i <10; i++) {

    myVar[i] =function(){

    console.log(i);

      }

    }

    myVar[6]();

    5) 存在生命提升(在声明这个变量之前使用这个变量也是有效的) 

    6) var声明变量会被提到的三条规则

    不要把var语句放在代码块中

    不要把var语句放在循环体中

    每个函数都使用单一的var语句

    ES6定义变量,关键词let,const 

    使用let声明变量:

    异同:用法相同,不同在于let声明的变量只在代码块中生效(也就是块级作用域,后面详细的讲)

    1) 只在let命令所在的代码块内有效

    2) let声明的变量是定义在块内,但这个变量也可以作用在这个块的子块中

    3) let声明变量时,不允许相同的作用域名重复声明同一个变量

    4) 在同一个作用域不能和var声明同一个变量名

    5) 不存在生命提升,也就是说let声明的变量只有声明了才能使用

    注意:就算外层代码块已经用var声明了同一个变量名,在子块里面用let再次声明这个变量名,在这个字块里面也是不能提前使用的.这种现象称之为暂时性死区(TDZ)

    5) 用let声明的变量块内和块外相同变量名互不影响 

    使用const声明变量(常量): 

    const声明变量,其实是声明的常量,一旦使用const声明,常量的值就不能改变

    1) 改变常量值不起作用,重新复制也不会生效

    2) 和let一样只在自己的块级作用域内有效

    3) 不可重复声明同一个变量名

    4) 必须声明就赋值,不能先声明,后面用的时候再去赋值

    5) 不会有变量提升

    6) 块外和块内的相同变量名互不影响

    十二.常见事件(记住)

    了解一些基础事件

    鼠标事件

    事件事件名

    onclick左键单击

    ondblclick左键双击

    onmouseover / onmouseenter(推荐使用)鼠标移入

    onmouseout / onmouseleave(推荐使用)鼠标移除

    onmousedown鼠标按下

    onmousemove鼠标移动

    onmouseup鼠标抬起(鼠标松开)

    onmousetextmenu右键单击

    键盘事件

    事件事件名

    onkeydown / onkeypress按键按下

    onkeyup按键抬起

    系统事件

    事件事件名

    onload加载完成之后

    onerror加载出错后

    onresize窗口调整大小时

    onscroll滚动时

    表单事件

    事件事件名

    onfocus获取焦点后

    onblur失去焦点后

    onchange改变内容后

    onreset重置后

    onselect选择后

    onsubmit提交后

    相关文章

      网友评论

          本文标题:2018-06-22

          本文链接:https://www.haomeiwen.com/subject/lfklyftx.html