JS基础、JS函数与对象、DOM对象

最新推荐文章于 2024-07-25 09:48:00 发布

Just8th

最新推荐文章于 2024-07-25 09:48:00 发布

阅读量278

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/Just8th/article/details/125488266

版权

一、JS基础

1.HTML/CSS/JS的关系

HTML决定网页结构和内容（决定看到什么），相当于人的身体。

CSS决定网页呈现给用户的模样（决定好不好看），相当于穿衣服、化妆。

JS脚本语言实现业务逻辑和页面控制（决定功能），相当于人的各种动作。

2.JS书写方式

行内：

内嵌：

外部：

3.JS中的变量

变量就是一个装东西的盒子，通俗的来说，变量就是存放数据的容器。我们通过变量名获取数据，甚至可以修改数据

4.JS的数据类型

简单数据类型	说明	默认值
Number	数字型，包含整数值和浮点值	0
Boolean	布尔值类型，如true、false，等价与1和0	false
String	字符串类型	“”
Undefined	Var a;声明了变量a但是没有给值，此时a = undefined	undefined
Null	Var a = null；声明了变量a为空值	null

5.JS的分支语句

5.1.if语句：

        if(条件表达式){
                   语句块
        }

2.if......else语句：

           if（条件表达式）{
                   语句块1
        }else{
               语句块2
        }

3.switch语句

           switch（变量）{
                case 表达式1：执行语句；break；
                case 表达式2：执行语句；break；
                .......
        }

6.JS的循环语句

6.1.for语句

for
for(语句1；语句2；语句3){
执行语句块
}

6.2.while语句

           while (条件)
        {
          需要执行的代码
        }

6.3.do.....while语句

           do
        {
          需要执行的代码
        }
        while (条件);

二、JS函数与对象

1.函数

封装了一段可以被重复调用或者执行的代码块，通过这个代码块可以实现大量代码的重复使用，这就叫做函数。

1.1.创建函数

方法一:function 函数名([参数列表]) {
//函数体代码
}

方法二：var 函数名 = function ([参数列表]) {
//函数体代码
}

1.2.函数调用

函数名（[参数列表]）

2.对象

        JavaScript 对象是拥有属性和方法的数据。
        属性：事物的特征
        方法：事物的行为

2.1.创建对象

        方法1：使用字面量创建对象：
                var star = {
                属性1:属性值1,
                属性2:属性值2,
                属性3:属性值3
                方法1:函数1；
                }

        方法2：  利用 new Object 创建对象：
                        var star = new Object();
                        star.属性1=“属性1”；
                        star.属性2=“属性2”；
                        star.属性3=“属性3”；
                        star.方法1=函数1

        方法3：   利用构造函数创建对象：
                function 构造函数名([形参1,形参2,形参3]) {
                  this.属性名1 = 参数1;
                  this.属性名2 = 参数2;
                  this.属性名3 = 参数3;
                  this.方法名 = 函数体;
                }
                var obj=new 构造函数名（[实参1，实参2，实参3]）

2.2访问对象的属性和方法

访问属性：对象.属性名对象[“属性名”]
访问方法：对象.方法名()

三、DOM对象

1.DOM是什么

DOM （ Document Object Model ），叫做文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改html文档的内容和结构。

2.DOM的作用

JavaScript 能够创建动态的 HTML节点
   JavaScript 能够改变页面中的所有 HTML 元素
   JavaScript 能够改变页面中的所有 HTML 属性
   JavaScript 能够改变页面中的所有 CSS 样式
   JavaScript 能够对页面中的所有事件做出反应

3.查询元素的方法

方法	说明	返回值
getElementById(“id值”)	通过 id 查找 HTML 元素	一个元素对象
getElementsByTagName（”name值”）	通过标签名查找 HTML 元素	元素对象集合
getElementsByClassName（”class值”）	通过类名找到 HTML 元素	元素对象集合
querySelector	通过选择器获取第一个对象	一个元素对象
querySelectorAll	根据选择器返回所有对象集合	元素对象集合
body	获取body元素	一个元素对象
documentElement	获取html元素	一个元素对象