博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript 小结
阅读量:4297 次
发布时间:2019-05-27

本文共 2880 字,大约阅读时间需要 9 分钟。

JavaScript 小结

JavaScript 是一门轻量级脚本语言,其是可以插入 HTML 文档中由浏览器执行的代码,与 Java 无关。将 JavaScript 代码插入 HTML 文档中,需要将代码使用标签 <script> </script> 进行包裹,而后其可以放在 HTML 文档中的任意位置。

JavaScript 输出数据

方法 含义
window.alert() 弹出警告框
document.write() 向 HTML 文档写入内容,若在文档加载完毕后再调用该方法,则会覆盖文档的内容
document.getElementById(“elementID”).innerHTML 向指定的 HTML 元素中写入内容
console.log() 向控制器中写入内容

JavaScript 变量类型

JavaScript 变量类型有 String、Number、Boolean、Array、Object,这些变量均是对象,声明一个变量就是创建了一个对象,如下:

var name = new String;var count = new Number;var isClose = new Boolean;var person = new Object;var persopns = new Array;

undefined 表示变量不含值,通常使用 null 清空变量的值。

使用未声明的变量,其会被默认为全局变量。
所有的变量都属于 window 对象。

JavaScript 对象

javaScript 对象是变量的容器,键值对的集合。键,称为对象的属性,值,则是对象的属性值。属性值可以是任意的 JavaScript 变量类型,也可以是方法定义。即 JavaScript 对象的方法是以属性值的形式存储在对象属性中的,在使用这种属性时,添加括号表示调用方法,如下:

HTML 常见事件

事件 含义
onchange 元素改变
onclick 鼠标点击
onmouseover 鼠标在元素上移动
onmouseout 鼠标移开元素
onkeydown 键盘按键按下
onload 加载完成

通常,当界面加载完成,或图片加载完成后,可执行 JavaScript 代码,如下:

//在 HTML 标签中定义元素内容加载完成后要执行的方法//在 JavaScript 中定义界面加载完成后要执行的方法window.onload = function(){
···};//图片加载

JavaScript 严格模式

通常,JavaScript 解释器在解释 JavaScript 代码的过程中会将变量与方法的声明提升至代码的头部进行解释,所以对于先使用,后声明的代码,执行时并不会出错。

但是,当使用 "use strict"; 指令使得 JavaScript 处于严格模式时,使用未经声明的变量,便会出错。该指令除了放在脚本开头外,也可以放在函数的开头,表示该函数使用严格模式。

JavaScript 函数

在 JavaScript 中,使用关键字 function 来声明定义函数。

  • 常见的声明方式

    function functionName(parameter1,parameter2,···){
    ···}//调用functionName(a,b,···);
  • 匿名函数

    var func = function(parameters){
    ···}//调用var result = func(parameters);
  • 构造函数

    var func = new Function("parameter1","parameter2","···");//调用var result = func(a,b);
  • 自调用函数

    (function(){···})(); //匿名自调用函数
  • 内嵌函数

    function funcA(){
    ··· function funcB(){
    ···} funcB(); ···}
  • 闭包,利用嵌套函数能够访问上层函数变量的特性,来实现函数多次调用时访问同一个变量的目的

    var add = (function () {
    var counter = 0; return function () {
    return counter += 1;}})();add();add();add();//多次调用 counter 的值持续累加

HTML DOM

DOM(Document Object Model)文档对象模型,浏览器加载页面时,会创建相应的文档对象模型,根据该模型,JavaScript 可以操作 HTML 的元素及其属性,改变其 CSS 样式,并监听页面中的事件从而作出反应。DOM 的基本用法如下:

方法名 含义 样例
getElementById() 通过 id 查找页面中的元素 var x = document.getElementById(“testDiv”);
getElementsByTagName() 通过标签查找页面中的元素 var y = x.getElementsByTagName(“p”);
getElementsByClassName() 通过类名查找页面中的元素 var x = document.getElementsByClassName(“test”);
write() 文档输出流 write(Date());
innerHTML 改变元素内容 document.getElementById(“p1”).innerHTML=”hello world!”
element.attribute = propertyValue 修改元素的属性值 document.getElementById(“img”).src=”test.png”
element.style.property = propertyValue 修改元素的样式 document.getElementById(“p1”).style.color=”red”

为元素添加监听事件:element.addEventListener(event, function, useCapture);

  • event 是事件类型(click、mousedown 等)
  • function 是事件发生时调用的函数
  • useCapture 使用冒泡模式(false),或捕获模式(true),对于相同的事件,冒泡模式下,内部元素先响应,捕获模式下,外部元素先响应

添加多个事件,后添加的事件不会覆盖前面添加的事件

移除元素的监听事件:element.removeEventListener(event, function);

  • event 是事件类型(click、mousedown 等)
  • function 是事件发生时调用的函数

转载地址:http://uxdws.baihongyu.com/

你可能感兴趣的文章
C语言常量与变量
查看>>
C语言实型数据(浮点数)
查看>>
C语言数据类型转换
查看>>
C语言指针变量作为函数参数
查看>>
C语言局部变量和全局变量
查看>>
C语言变量的存储类别
查看>>
C语言结构体指针变量作函数参数
查看>>
C语言动态存储分配
查看>>
MSP430中断原理分析
查看>>
display几点解释
查看>>
详解SPI中的极性CPOL和相位CPHA
查看>>
各类总线传输速率
查看>>
有关分散加载文件scatter的理解 关键是加载域 加载地址与执行域地址的 处理
查看>>
RO,RW,ZI 和scatter file详解(转载)
查看>>
Coap协议学习笔记
查看>>
谈"http get和post的区别"
查看>>
Java虚拟机学习笔记(一)——JVM运行时数据区和常见内存错误
查看>>
Java浅拷贝和深拷贝
查看>>
HTTP协议基础(HTTP 1.1)
查看>>
从字节码看Java中for-each循环(增强for循环)实现原理
查看>>