HTML-JaveScript基础

最新推荐文章于 2024-08-14 12:45:22 发布

weixin_45855594

最新推荐文章于 2024-08-14 12:45:22 发布

阅读量159

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45855594/article/details/125500340

版权

一、javescript的概念和作用

简称“JS”，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript可以实现页面的效果切换、动画效果、页面游戏等效果。

二、引入方式

内部式、外部式、行内式。

三、数据类型

number boolean string undefined null

数字类型布尔类型字符串未定义空

三、语句

3.1 分支语句:if条件判断：if的括号内，就是对条件的判断，括号内的值只能是布尔值。在if 条件判断的代码块中，如果满足其中一个条件，只会选择执行一个代码块，然后结束条件判断语句。

if 的使用场景为在范围性的内容判断时使用。

结构：（1）if(条件){

代码块

}

（2）if(条件){

代码块

}else if(){

代码块

}else{

代码块

}

(3) if(条件){

代码块

}else{

代码块

}

3.2 switch语句：是在有特定或者固定值的时候来使用。

结构：switch(){

case 1:语句；break;

case 2:语句；break;

case 3:语句；break;

...............

default:语句；break;

}

3.3循环语句

3.3.1 for循环

结构：for(var i=0;i<i;i++){

循环体

}

3.3.2 while循环：会先进逻辑判断，如果为假则不会执行循环体内的代码。

结构：while(){}

3.3.3 do while 循环：不管括号内的条件是否为真，都会先进行一次循环体内的代码执行。

结构：do{}while()

四、数组

声明方式：例：var num = [1, 2, 3, 4, 5];

五、对象

创建方式

（1）字面量创建

var star = {

属性名：属性值,

方法名:函数(){

}

var people = {
            name: '张三',
            gender: 'male',
            age: 38,
            eat: function () {
                console.log('我可以吃饭了');
            },
            sleep: function () {
                console.log('我可以睡觉了');
            }
        }

（2）new 关键字

var name = new Object();

name.属性名 = 值;

name.方法名 = 函数(){}

var jack = new Person('jack', 28, 'male');
        var Rose = new Person('Rose', 25, 'Female');
        console.log(jack);
        console.log(Rose);
        console.log(Rose.name);

（3）构造函数创建

function Person(name,age,gender){

this.name = "jack";

this.age = 15;

this.gender = male;

}

var jack = new Person;

};

 function Person(name1, age1, gender1) {
            // 下方 第一个 name是该对象的属性， 第二个name是该函数的形参
            this.name = name1;
            this.age = age1;
            this.gender = gender1;
        }

六、DOM操作

6.1含义：DOM,即Document Object Model。简单来说，HTML DOM 定义了访问和操作HTML文档的标准方法。HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

6.2节点分类：文档节点、元素节点、属性节点、文本节点。

6.3查询获取元素的方法

（1）getElementById：通过id获取元素（单个）。

（2）getElementsByTagName：通过标签名称获取元素（多个）。

（3）getElementsByClassName：通过类名获取元素（多个）。

（4）querySelector ：通过我们给定的名称获取第一个元素（单个）。
querySelector可以通过 id、类名、标签名等方式获取到我们的元素，但要加上相应的标识符。

（5） querySelectorAll：通过我们给定的名称获取所有该名称的元素（多个）。
通过标签名、类名、querySelectorAll获取到的元素无论个数都会被存放在数组内，我们要操作元素的时候需要用下标选择到某一元素。

ul class="demo">
        <li>1</li>
        <!-- <li>2</li>
        <li>3</li> -->
    </ul>
    <div>222</div>
    <div></div>


var test = document.getElementsByTagName('li');
        console.log(test);

        var p = document.createElement('p');
        // console.log(document.createElement('p'));
        p.innerText = "你好,p标签";
        console.log(p);
        test[0].appendChild(p)