文本中涉及的一些基础介绍，不是全的。只写一些最常见、最经常使用的，其他的想了解可以自行查找资料。
前言：
script引入
内部引用 script
外部引用 script:src
一、js语法
1.编写语法
（1）区分大小写，建议驼峰式命名
（2）结尾分号可有可无，建议结尾分号添加，更严谨
（3）注释：单行注释// 多行注释/* */
（4）大括号代表代码块{}
2.输出语句
（1）window.alert 写入警告框
（2）document.write 写入html输出
（3）console.log 写入浏览器控制台
3.变量 - var关键字
（1）js是弱语言，没有强类型的概念，可以赋值不同类型。比如var x = 10 后面赋值x = “aaaaa”也是可以的，一个int类型，一个string类型
（2）不能以数字开头，但支持包含数字、字母、下划线、$美元符
（3）作用域比较大，全局变量。
（4）可以重复定义。比如设置var x=10 、var x="aaaa"， 后定义的会覆盖之前的定义
（5）es6新增let和const关键字，let关键字为局部变量，且不允许重复声明。const关键字，用来声明只读变量，不能改变
注意：
var x = 2;
let x = 1;
alert(x);
像这种情况，会报错的。Uncaught SyntaxError: Identifier 'x' has already been declared
4.数据类型、运算符+类型转换、流程控制符
（1）数据类型
- 原始类型
number：整数、小数、NaN
string：字符、'字符'
boolean：布尔
null：空对象
undefined：声明的变量未初始化时
typeof：获取数据类型
注意：
typeof null返回的是Object，null针对的是对象
变量var a申明后不赋值，typeof返回的是undefined
（2）运算符+类型转换
- 运算符
算数运算符 + - * / % ++ --
赋值运算符 = += -= *= /= %=
比较运算符 > < >= <= == != ===全等
逻辑运算符 && || !
三元运算符 a!=null?ture:false
注意：
比较运算符-双等比较过程中会进行类型转换，如果比对类型不同，转换相同类型后在计算比较，全等不会进行类型转换
- 类型转换
字符串类型转换为数字：
如果字符串内容是纯数字，转换为字符串表面值，如果不是纯数字，从第一个数字开始记录，直到不是数字的下标值停止，如果开头第一个不是数字则是转换为NaN
其他类型转换成Boolean：
Number：0和NaN是false，其他值全部都是true
String：空字符串为false ,其他全部为true
Null和Undefined，都转换为false
（3）流程控制符
- 控制符
if else if else
switch
for
while
do while
break
try catch finally
continue
throw
二、js函数
说明：函数（方法）执行特定任务的代码块。
通过function 关键字进行定义。
- 定义1
function add(a,b){
return a+b;
}
var result = add(1,2);
- 定义2
var result = function(a,b){
return a+b;
}
注意：
1.方法 形参不需要定义类型、返回值不需要定义类型。因为js是弱类型语言
2.传参不做限制，可以传n个，方法体取参数申明的个数，声明2个就取前两个
3.通过函数名称直接调用
三、js对象
1.基础对象（重点只关注这3）
（1）Array
- 定义
//方式一
var arr = new Array(元素列表)
var arr = new Array(1,2,3,4)
//方式二
var arr = [元素列表]
var arr = [1,2,3,4]
-
访问
arr[索引] = 值
arr[10]=1 -
特点
1.长度可变
var arr =[1,2,3]
arr[10] = 50
中间未赋值的值，输出为undefined
2.类型可变
var arr =[1,2,3]
arr[8] = 'a'
arr[9] = ture
-
常用属性
length：返回数组中元素的数量 -
常用方法
foreach：遍历数组当中每一个”有值“的元素，并调用一次传入的函数，可以简化：箭头函数：(....)=>{....}
var arr = [1,2,34]
arr.forEach(function(a,b,c){
console.log('a='+a);
console.log('b='+b);
console.log('c='+c);
})
输出顺序 元素、下标、数组。
简化，箭头函数：(....)=>{....}
var arr = [1,2,34]
arr.forEach((a,b,c) => {
console.log('a='+a);
console.log('b='+b);
console.log('c='+c);
});
push
将新元素添加到数组的末尾，并增加数组的长度
splice
从数组中删除元素。开始位置和结束位置。需要注意的是 开始位置为包容，结束位置为不包容
arr.splice(arr.length-1,arr.length)
console.log('a->',arr);
（2）String
一共有两种
- 定义
var string = new String("123")
var string = "123123"
-
常见属性
length 字符串的长度 -
常见方法
charAt 返回指定位置的字符
indexOf 检索指定字符
trim 去除字符两边位置的空格，中间不会去除
substring 字符串截取
（3）JSON
- 自定义对象
申明：
var 对象名称 = {
属性名:属性值,
属性名:属性值,
函数名称:function(形参列表){
alert('111111')
}
}
调用：
对象名称.属性名或者属性方法
- JSON
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
常见方法：
JSON.parse(str); //json字符串转换为js对象
JSON.stringify(jsobject); //js对象转换为jSON字符串
2.浏览器对象模型
说明：BOM浏览器对象模型，他对浏览器中的各个组件进行了封装
-
组成
window 浏览器窗口对象（窗口）
navigator 浏览器对象（应用名称、版本、内核等信息 ）
screen 屏幕对象
history历史记录对象（上一步、下一步等）
location地址栏对象
其中window 和 location为重点关注对象 -
window
获取：直接使用window，其中window.可以省略（window.alert \ alert）
属性：
history：对history对象的只读引用
location：用于窗口或框架的location对象
navigator：对navigator对象的只读引用
history ：对history对象的只读引用
方法：
alert
confirm：
显示带有一段消息的以及确认按钮和取消按钮的对话框。```
confirm('您确认删除该消息吗？') 自带确认删除， 点击确认返回true 取消false
setinterval：
指定周期调用某一个函数，周期性的执行，间隔时间后继续执行
setInterval(() => {
alert('1111')
}, 3000);
setTimeout：
只调用一次，指定时间到达后调用
setTimeout(() => {
//aaaaa
}, 3000);
- location地址栏对象
获取：
window.location 或 location.属性
属性值：
href 设置或返回完全的UR
location.href='https://www.xxxxx.com' 设置后执行时会自动跳转到该地址
3.文档对象模型
说明：DOM文档对象模型，把每个html标签都封装成了一个对象
-
DOM文档对象模型
document 整个文档对象
element 元素对象
attribute 属性对象
text 文本对象
comment 注释对象 -
通过dom和事件监听来控制网页行为，通过dom控制Html中的元素
改变html元素内容
改变html样式
对html dom事件做出反应
添加和删除html元素 -
dom 3c标准
core dom ：所有文档类型的标准模型
xmldom ：xml文档的标准模型
html dom：html文档的标准模型 -
操作点关注
获取元素对象：通过document对象来获取
（1）通过id
document.getElementById('id')
（2）标签名称
document.getElementByTagName('div') 返回数组
（3）name属性值获取
document.getElementByName('name')
（4）class属性获取
document.getElementByClassName('cls')
操作元素对象的属性：
修改图片
<img id="image_lamp" src="/Users/0desktop/1111111.png" alt="" width="200px" height="150px">
var image_lamp = document.getElementById('image_lamp');
image_lamp.src = '/Users/0desktop/22222222222.png';
修改文字+样式
<div class="cls">测试文字1</div>
<div class="cls">测试文字2</div>
var clss = document.getElementsByClassName('cls');
for (let i = 0; i < clss.length; i++) {
const cls = clss[i];
cls.innerHTML += "<font color='red'>追加文字</font>"
}
四、js事件监听
1.常见监听
onclick 鼠标点击事件
onblur 元素失去焦点
onfocus 元素获取焦点
onload 某个页面或图像被完全加载
onsubmit 当表单提交时触发的事件
onkeydown 某个键盘的键被按下
onmouseover 鼠标被移到某个元素之上
onmouseout 鼠标从某元素移开
2.事件绑定
（1）通过标签中的事件属性绑定
<div id="html" class="cls" onclick="on()">html标签绑定</div>
function on() {
alert('我被点击了')
};
（2）通过dom元素属性绑定
var img = window.document.getElementById('image1');
img.onclick = () => {
img.src = image2;
};
（3）案例演示
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例</title>
</head>
<body>
<img id="image_lamp" src="/Users/0desktop/sc_20230906170036.png" alt="" width="200px" height="150px">
<br>
<input onclick="light()" type="button" value="点亮">
<input onclick="nolight()" type="button" value="熄灭">
<br>
<input onfocus="smallLetter()" onblur="bigLetter()" type="text" value="TEST" placeholder="请输入字母" id="edit_content">
<br>
<input class="checkbox" type="checkbox" name="hobby" id="1">电影
<input class="checkbox" type="checkbox" name="hobby" id="2">旅游
<input class="checkbox" type="checkbox" name="hobby" id="3">游戏
<br>
<input onclick="checkAll()" type="button" value="全选">
<input onclick="uncheckAll()" type="button" value="复选">
</body>
</html>
<script>
var image_lamp = document.getElementById('image_lamp');
var edit_content = document.getElementById('edit_content');
var checkboxs = document.getElementsByClassName('checkbox');
function light() {
image_lamp.src = '/Users/0desktop/sc_20230906165739.png';
}
function nolight() {
image_lamp.src = '/Users/0desktop/sc_20230906170036.png';
}
function smallLetter() {
edit_content.value = edit_content.value.toLowerCase();
}
function bigLetter() {
edit_content.value = edit_content.value.toUpperCase();
}
function checkAll() {
for (let i = 0; i < checkboxs.length; i++) {
const element = checkboxs[i];
element.checked = true;
}
}
function uncheckAll() {
for (let i = 0; i < checkboxs.length; i++) {
const element = checkboxs[i];
if (element.checked) {
element.checked = false;
} else {
element.checked = true;
}
}
}
</script>
网友评论