前端-js
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）上