JavaScript基础

78 阅读3分钟

简介

JavaScript 是 Web 的编程语言。

java和JavaScript并没有关系。

java是强类型语言,而JS是弱类型语言。

强类型即定义变量的时候,类型已经确定不可改变。而弱类型可以

主要特点:

  • 交互性
  • 安全性(不允许直接访问本地硬盘)
  • 跨平台性(可以解释js的浏览器都可以执行,和平台无关)

变量

变量类型:

  • 数值类型:number
  • 字符串类型:string
  • 对象类型:object
  • 布尔类型:boolean
  • 函数类型:function

ps:typeof()可以获取变量的类型。

JavaScript里特殊的值:

  • undefined:未定义初始值,返回都为undefined
  • null:空值
  • NAN:非数字。非数值。

变量定义格式:

var 变量名; //返回undefined
var 变量名 = 值;  //返回值

关系运算

等于:== 值的比较

全等于:=== 除了做值的比较,还会比较类型

12 == "12"  // true
12 === "12"  // false

数组

格式:

var 数组名 = [];

与 java 数组区别:JavaScript数组能通过下标赋值从而扩容。其他用法差不多。

例如:

var arr = [];
arr[2] = 12;
//arr.length会等于3。其中arr[0],arr[1]的值为undefined。

函数

定义方法

方法一:

function 函数名(形参){函数体}

方法二:

var 函数名 = function(形参){函数体}

例子:

//无参
function fun(){}
//有参函数一
function fun2(a,b){
    return a + b;
}
//有参函数二
var fun3 = function(a,b){
    return a + b;
}

注意:

  • 有参函数不用指定参数类型。
  • 需返回值时,直接return即可。

arguments

arguments 是一个对应于传递给函数的参数的类数组对象。

function func1(a, b, c) {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
};
func1("1", 2, null);

输出结果:

> "1"
> 2
> null

自定义对象

Object

对象的定义:

var 变量名 = new Object();   //实例化对象
变量名.属性名 = 值;           //定义一个属性
变量名.函数名 = function(){}; //定义一个函数

对象的访问:

变量名.属性名/函数名();

花括号{}

对象的定义:

var 变量名 = {
    属性名:值,             //定义一个属性
    属性名:值,             //定义一个属性
    函数名:function(){}   //定义一个函数
};

事件

常用的事件

onload:加载完成事件

onclick:单击事件

onblur:失去焦点事件

onchange:内容发生改变事件

onsubmit:表单提交事件

DOM模型

常用方法

document.getElementById(elementId)

通过标签的 id 属性查找标签的 dom 对象,elementId 是标签的 id 属性值。

document.getElementByName(elementName)

通过标签的 name 属性查找标签 dom 对象,elementName标签的 name 属性值。

document.getElementByTagName(tagName)

通过标签名查找标签 dom 对象,tagName 是标签名。

document.createElement(tagName)

通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名。

三个查询方式都是页面加载完成后进行的。

注意 :三种查询方式,首选getElementById,其次是getElementByName,最后是getElementByTagName。

节点的常用属性

childNodes :获取当前节点的所有子节点

firstChild:获取当前节点的第一个子节点

lastChild:获取当前节点的最后一个子节点

parentNode:获取当前节点的父节点

nextSibling:获取当前节点的下一个节点(兄弟节点)

previousSibling:获取当前节点的的上一个节点(兄弟节点)

className:获取或设置标签的 class 属性值

innerHTML:获取/设置起始标签和结束标签中的内容

innerText:获取/设置起始标签和结束标签中的文本