JavaScript-2

数组

数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式



image

数组的遍历

 

求数组中最大的值



创建数组

JS 中创建数组有两种方式:

  • 利用 new 创建数组
var 数组名 = new Array() ;
var arr = new Array();   // 创建一个新的空数组

  • 利用数组字面量创建数组
//1\. 使用数组字面量方式创建空的数组
var  数组名 = [];
//2\. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

  • 数组的字面量是方括号 [ ]
  • 声明数组并赋值称为数组的初始化
  • 这种字面量方式也是我们以后最多使用的方式
    数组元素的类型
    数组中可以存放任意类型的数据,例如字符串,数字,布尔值等
var arrStus = ['小白',12,true,28.9];

索引 (下标) :用来访问数组元素的序号(数组下标从 0 开始)。

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]); 

遍历数组

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

  • 数组中新增元素
    数组中可以通过以下方式在数组的末尾插入新元素:
  数组[ 数组.length ] = 新数据;



函数

函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

  • 声明函数
// 声明函数
function 函数名(参数列表) {
    //函数体代码
}

  • function 是声明函数的关键字,必须小写
  • 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum(小驼峰)
  • 调用函数
函数名();  // 通过调用函数名来执行函数体代码

  • 调用的时候千万不要忘记添加小括号
  • 口诀:函数不调用,自己不执行
    注意:声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码
  

  • 函数的参数
image

return 语句

返回值:函数调用整体代表的数据;函数执行完成后可以通过return语句将指定数据返回 。

// 声明函数
function 函数名(){
    ...
    return  需要返回的值;
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

  • 在使用 return 语句时,函数会停止执行,并返回指定的值
  • 如果函数没有 return ,返回的值是 undefined

函数的两种声明方式

  • 自定义函数方式(命名函数)
    利用函数关键字 function 自定义函数方式
// 声明定义方式
function fn() {...}
// 调用  
fn();  

  • 函数表达式方式(匿名函数)
    利用函数表达式方式的写法如下
 var fn = function(num){
            console.log("匿名函数被调到"+num)
        }
        fn(100);

对象

什么是对象?

  • 在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
  • 属性:事物的特征,在对象中用属性来表示(常用名词)
  • 方法:事物的行为,在对象中用方法来表示(常用动词)
    为什么需要对象?
    保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。
    如果要保存一个人的完整信息呢?例如,将“张三疯”的个人的信息保存在数组中的方式为:
  var arr = [‘张三疯’, ‘男', 128,154];

上述例子中用数组保存数据的缺点是:数据只能通过索引值访问,开发者需要清晰的清除所有的数据的排行才能准确地获取数据,而当数据量庞大时,不可能做到记忆所有数据的索引值。为了让更好地存储一组数据,对象应运而生:对象中为每项数据设置了属性名称,可以访问数据更语义化,数据结构清晰,表意明显,方便开发者使用。

 var obj = {
            "name":"张三丰",
            "sex":"男",
            "age":128,
            "weight":154,
        }

创建对象的三种方式

  • 利用字面量创建对象
花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法;{ } 里面采取键值对的形式表示 

  • 键:相当于属性名
  • 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)
    代码如下:
  

  • 利用 new Object 创建对象
 

  • 利用构造函数创建对象
  • 构造函数:是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
    构造函数的封装格式:
function 构造函数名(形参1,形参2,形参3) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}

构造函数的调用格式

var obj = new 构造函数名(实参1,实参2,实参3)

注意事项

  1. 构造函数约定首字母大写。
  2. 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
  3. 构造函数中不需要 return 返回结果。
  4. 当我们创建对象的时候,必须用 new 来调用构造函数。
 

遍历对象

for...in 语句用于对数组或者对象的属性进行循环操作。
其语法如下:

for (变量 in 对象名字) {
    // 在此执行代码
}

法中的变量是自定义的,它需要符合命名规范,通常我们会将这个变量写为 k 或者 key。

 

内置对象

JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象, 前面两种对象是JS 基础 内容,属于 ECMAScript; 第三个浏览器对象属于 JS 独有的, JS API 讲解内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法),内置对象最大的优点就是帮助我们快速开发
JavaScript 提供了多个内置对象:Math、 Date 、Array、String等

  • Math对象
    Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用 Math 中的成员。

    image
  • 日期对象
    Date 对象和 Math 对象不一样,Date是一个构造函数,所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间
    使用Date实例化日期对象

  • 获取当前时间必须实例化:

var now = new Date();

获取指定时间的日期对象

var futture= new Date('2020/10/1');

注意:如果创建实例时并未传入参数,则得到的日期对象是当前时间对应的日期对象,使用Date实例的方法和属性

image
  

instanceof 运算符

instanceof 可以判断一个对象是否是某个构造函数的实例

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false

Web API

Web API 主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果

DOM 介绍

文档对象模型(Document Object Model,简称DOM),是 W3C 组织推荐的处理可扩展标记语言(html或者xhtml)的标准编程接口。
W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM是W3C组织制定的一套处理 html和xml文档的规范,所有的浏览器都遵循了这套标准。

DOM树

image

DOM树 又称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前的页面。

  • 文档:一个页面就是一个文档,DOM中使用document表示
  • 节点:网页中的所有内容,在文档树中都是节点(标签、属性、文本、注释等),使用node表示
  • 标签节点:网页中的所有标签,通常称为元素节点,又简称为“元素”,使用element表示

script放在body和放在head的区别

放在body中:在页面加载的时候被执行
放在head中:在被调用时被执行
原因:
1、浏览器是从上到下解析HTML的。
2、放在head里的js代码,会在body解析之前被解析;放在body里的js代码,会在整个页面加载完成之后解析。
js应该放哪:
1、head中:需调用才执行或事件触发执行的脚本,可以保证脚本在调用之前被加载
2、body中:当页面被加载时执行的脚本,通常被用来生成页面内容

根据ID获取

语法:document.getElementById(id)
作用:根据ID获取元素对象
参数:id值,区分大小写的字符串
返回值:元素对象 或 null

案例

 
2020-08-17

根据标签名获取元素

语法:document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名') 
作用:根据标签名获取元素对象
参数:标签名
返回值:元素对象集合(伪数组,数组元素是元素对象)



H5新增获取元素方式

image

    
    Title


盒子1
盒子2

获取特殊元素(body,html)

image


事件基础

JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。

事件三要素
  • 事件源(谁):触发事件的元素
  • 事件类型(什么事件): 例如 click 点击事件
  • 事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数


常见的鼠标事件

image

操JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象的属性实现的)作元素

  • 改变元素内容(获取或设置)

    image

    innerText和innerHTML的区别

  • 获取内容时的区别:
    innerText会去除空格和换行,而innerHTML会保留空格和换行

  • 设置内容时的区别:
    innerText不会识别html,而innerHTML会识别



常用元素的属性操作

image

表单元素的属性操作

image

表单元素中有一些属性如:disabled、checked、selected,元素对象的这些属性的值是布尔型。




样式属性操作

image
  • 方式1:通过操作style属性

    image



    
    Title
    


你可能感兴趣的:(JavaScript-2)