前端-js-CSDN博客

本文链接：https://blog.csdn.net/weixin_48605536/article/details/132451193

js

作用

控制网页的行为

JS的书写语法

1. 大小写敏感

2. 结尾分号可有可无

3. // 单行注释
/* */ 多行注释

4. {}代表代码块

JS声明变量的关键字

var 全局变量

let 局部变量

const 常量

JS控制语句哪些会返回false

0 NaN “”Null Undefined

数据类型

number：数字（整数、小数、NaN(Not a Number)）
string：字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是 undefined

typeof函数

返回变量的数据类型

typeof 数据

运算符

== 会进行类型转换

只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较

=== 不会进行类型转换

不光比较值，还要比较类型，如果类型不一致，直接返回false

JavaScript弱数据类型的语言

- 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。

- 返回值也不需要声明类型，直接return即可

JS中的函数

函数定义的两种方式

function 函数名(参数1,参数2..){
要执行的代码
}

var functionName = function (参数1,参数2..){
//要执行的代码
}

JS中的对象

Array

语法格式

var 变量名 = new Array(元素列表);

var 变量名 = [ 元素列表 ];

属性

获取数组长度 length

方法

遍历数组

数组名.foreach()

只会遍历有值的元素

ES6中，引入箭头函数的写法，arr.forEach((e) => {
console.log(e);
})

添加元素到末尾

数组名.push()

删除元素

数组名.splice( , )

参数1：表示从哪个索引位置删除

参数2：表示删除元素的个数

String

语法格式

var 变量名 = new String("…") ;

var 变量名 = "…" ;

属性

获取字符串长度 length

方法

获取指定角标的字符        charAt

获取指定字符串的索引        indexOf

去除字符串两端的空格        trim

字符串截取        subString

JSON

定义json

JavaScriptObject Notation，JavaScript对象标记法。

格式

var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){}
};

键值对的格式

键必须用字符串

值

字符串        加引号
数字        直接写
数组        []
对象        {}

调用

属性对象名.属性名

函数对象名.函数名()

JSON对象和JSON字符串的互相转换

对象转字符串 JSON.stringify(json对象)

字符串转对象 JSON.parse(字符串对象)

BOM

浏览器对象模型

Window浏览器窗口对象
Navigator浏览器对象
Screen屏幕对象
History历史记录对象
Location地址栏对象

BOM对象

window

警告框        alert()

对话框        confirm("要弹出的文本内容")

周期性执行的定时任务        setInterval(fn,毫秒值)

        fn:函数，需要周期性执行的功能代码

        毫秒值：间隔时间

一次性执行的定时任务        setTimeout(fn,毫秒值)

location

设置或获取url href

DOM

文档对象模型

- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象

DOM技术主要作用

- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素

使用document对象获取Element元素对象

通过id获取        getElementById()
通过标签获取    getElementsByTagName()
通过name获取   getElementsByName()
通过class获取    getElementsByClassName()

小知识
               div标签对象的innerHTML属性来修改标签的内容
                   div名.innerHTML = "要改的文本内容";
               修改img标签对象的src属性值
                   img.src = "img/on.gif";
               改变checkbox为选中状态
                   先遍历复选框,并将值拿出来,给一个常量常量名.checked = true;

事件监听

事件绑定的函数，只有在事件被触发时，函数才会被调用。

事件的绑定方式

方式一：在HTML标签中使用属性绑定事件
               第一步<input type="button" id="btn1" value="事件绑定1" οnclick="on()">
               第二步<script>
                function on(){
                alert("按钮1被点击了...");
                }
                </script>

方式二：使用DOM的属性进行绑定事件

第一步<input type="button" id="btn2" value="事件绑定2">
第二步document.getElementById('btn2').onclick = function(){
alert("按钮2被点击了...");
}

常见事件

鼠标单击事件                onclick
元素失去焦点                onblur
元素获得焦点                onfocus
页面或图像完成加载   onload
表单提交 onsubmit
键盘的键被按下 onkeydown
鼠标移动到元素上        onmouseover
鼠标从元素上移开        onmouseout

小知识

切换大小写

获取到的var的变量名.value = var的变量名.value.toLowerCase();//toUpperCase();大写

MVVM的前端开发思想

(Model-View-ViewModel)
           - Model: 数据模型，前端中通过请求从后台获取的数据
           - View: 视图，用于展示数据的页面的html+css搭建的页面，但是没有数据
           - ViewModel: 数据绑定到视图，将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上

查看更多作品

了解更多请查看w3school官网