js基础篇一
html 骨架
CSS 血肉
js 行为
JavaScript:是一种运行在客户端(浏览器)的一种编程语言，实现人机交互
弱类型的语言
作用：
-
网页的特效
-
表单验证
-
数据交互(ajax)
js书写的位置
-
行内 写 在开始标签里
-
内部 写在script标签里 （写在</body>的前面）
因为代码是从上向下逐行运行的，如果js代码写在html结构前面，就无法操作DOM里的节点，如果一定要放写在前面，就需要一个加载事件来实现等特页面加载完了再执行
window.onload = function () {
代码
} -
外部 写在后缀是js的文件里
载入外部js
<script src="01-test.js">
// 这里面的代码会被忽略(不会被执行)
alert('欢迎再次来到js课堂');
</script>
注释：
-
单行注释 // ctrl+/
-
多行注释 /* */ alt + shift +a
结束符 分号
-
用英文的分号';'作为结束符
-
可写，可不写(以团队约定 为主)
js输入输出
输出
-
弹窗输出 （在并列的代码中优先执行）
alert('欢迎来到江西南昌'); -
页面输出
document.write('欢迎来到南昌雅腾'); -
控制台输出
console.log('欢迎来到javascript课堂');
输入
-
弹窗输入
console.log(prompt('请输入您的姓名')); -
表单输入
变量
定义：存储数据的容器
变量声明的关键词：let,var,const
关键词let
可以重新赋值，只能先声明后使用,不能重复声明
-
边声明边赋值
let num = 1;//边声明边赋值
console.log(num); -
先声明后赋值
let a;
a = 10;
console.log(a); -
边声明边赋值同时声明多个
let b = 12, c = 25;//边声明边赋值同时声明多个
console.log(b,c); -
先声明后赋值，同时声明多个
let d,e;//先声明后赋值，同时声明 多个
d = 40;
e = 30;
console.log(d,e);
关键词var
可以重复声明(不合理)，可以先使用后声明 (不合理)
var a = 10;
console.log(a);
var a = 30;
console.log(30);
b = 20;
console.log(b);
var b;
关键词const
const声明的变量为常量，不可以重新赋值
const x = 3.14;
数据类型
字面量：在计算科学中，字面量(litera())是计算机描述事/物
方法：typeof 用于检测数据类型
语法：
-
typeof 变量名
-
typeof(变量名)
返回值是数据类型
基础数据类型
-
number 数字型 字面量： 数值
// 数字型 number
let num = 10;
num = 1.23;
console.log(typeof num);
console.log(typeof(num)); -
string 字符串 字面量： '',"",``,
let str = 'abc';
str = "abc";
str = `abc`;//模板字符串，里面可以识别变量
let str1 = `str里的内容是${str}`;
console.log(typeof str);
console.log(str1);-
字符串的方法：
-
split('分隔符') 根据分隔符把字符串拆成数组元素组成数组
const countries = ["中国","美国","英国","法国","巴西","墨西哥"];
let str = countries.join(',');
console.log(str);
let arr = str.split(',');
console.log(arr); -
indexOf('要查找的字符串') 返回值：从前向后找，找到第一个匹配的下标(索引)，如果没有找到返回-1
语法：字符串名.indexOf('要查找的字符串')
-
-
-
boolean 布尔型 true false
let boo = true;
console.log(typeof(boo)); -
undefined 未定义的
javaScript是弱类型的语言，变量只有在赋值之后才能知道变量是什么数据类型,在变量声明后但未赋值时
let a;
console.log(typeof(a)); -
null 空类型
-
function 函数 可以先使用后声明
声明的关键词：function
语法：function 函数名(形参1，...){
执行语言
}
函数调用：函数名()
sayHI();
function sayHI(){
console.log('hi~');
}
console.log(typeof(sayHI));函数赋初始值
// 形参赋初始值方法1
function getSum(x = 0,y = 0){
return x + y;
}
// 形参赋初始值方法2
function getSum(x,y){
x = x||0;
y = y||0
return x + y;
}
// let sum = getSum(2,3);
// console.log(sum);
let sum = getSum();
console.log(sum);匿名函数
匿名函数赋值
// 匿名函数赋值
let fn = function(){
console.log('匿名函数赋值');
}
// 调用:
fn();立即执行函数
立即执行函数前面必须要有结束符
(function(){
console.log('立即执行函数');
})();回调函数
function getSum(x,y){
x = x||0;
y = y||0
return x + y;
}
//求(3+2)*5
// function getJi(a,b,c,fn){
// let sum = fn(a,b);
// return sum * c;
// };
// console.log(getJi(3,2,5,getSum));
function getJi(a,b,c){
let sum = getSum(a,b);
return sum * c;
};
console.log(getJi(3,2,5));箭头函数
语法：let abc = (形参1，...) => {
函数体
}
let abc = (x,y) => {
//函数体
console.log(x + y);
};
abc(4,5);
-
如果只有一个形参，小括号可以省略
let bcd = x => {
console.log(x*x);
}
bcd(5); -
如果函数体只有一句，大括号可以省略
let bcd = x => console.log(x*x);
bcd(5); -
如果 函数体只有一句且是return,return可以省略
let bcd = x => x*x;
console.log(bcd(5));
-
引用数据类型
-
数组 有序的存储一组数据 字面量 []
声明方式：
const arr = new Array(1,2,3,4);// 第一种实例化
const arr = [4,8,'a',true];数组的特点：
-
数组里的每一个数据称为数组元素
-
每一个数组元素都有 一个下标(索引)，且是从0开始
-
第一个数组都有一个长度，length指个是数组元素的个数
-
数组元素最大的下标(索引)为length-1
读取指定下标的数组元素：
数组名[下标]
修改指定下标的数组元素：
数组名[下标] = 新的值
在数组的最后增加一个数组元素
数组名[数组长度] = 新值
arr[arr.length] = false;-
数组的方法
-
forEach()
语法：数组名.forEach(（item（数组元素）,index（索引）) =>{
函数体}）
arr.forEach((element,index) => {
console.log(element);
}) -
push(新元素) 在数组的最后追加一个新元素 返回值 ：追加后数组的长度
语法：数组名.push(新元素)
const stu = ['tom','berry','ketty','rose','jake'];
for(let i = stu.length-1;i >=0; i--){
result.push(stu[i]);
} -
unshift(新元素) 在数组的前面插入一个新元素 返回值：添加后数组的长度
语法：数组名.unshift(新元素)
const stu = ['tom','berry','ketty','rose','jake'];
for(let i = 0;i <stu.length;i++){
result.unshift(stu[i]);
}
console.log(result); -
pop() 删除最后一个数组元素 返回值:被删除的元素
语法：数组名.pop()
let a = result.pop();
console.log(result);
console.log(a); -
shift() 删除数组的第一个元素 返回值：被删除的元素
语法：数组名.shift()
let a = result.shift();
console.log(result);
console.log(a); -
splice(startIndex,num,新的数组元素) 在任意位置删除任意个数或添加任意个数的元素
语法：数组名.splice(startIndex,num,新的数组元素1，...)
返回值：被删除的元素组成的数组
-
startIndex：开始索引 开始删除的索引(包含的)
-
num:删除的数组元素的个数
-
新的数组元素：有多少个新的数组元素直接都写在第二个参数之后
// let a = result.splice(0,1)
let a = result.splice(0,0,'tony','ammy','jerry')
console.log(result);
console.log(a);
-
-
reverse() 返回值：把原数组反转过来的新数组
语法：数组名.reverse()
let a = stu.reverse();
console.log(a); -
join('分隔符') 把数组元素用分隔符连接成一个字符串 返回值：通过分隔符连接 的字符串
语法：数组名.join('分隔符')
const countries = ["中国","美国","英国","法国","巴西","墨西哥"];
let str = countries.join(',');
console.log(str); -
indexOf('要查找的字符串') 返回值：从前向后找，找到第一个匹配的下标(索引)，如果没有找到返回-1 字符串通用
语法：数组名.indexOf('要查找的字符串')
countries = ["中国","法国","美国","英国","法国","巴西","墨西哥"];
a = countries.indexOf('法国');
console.log(a);last
-
lastIndexOf('要查找的字符串') 返回值：从后向前找，找到第一个匹配的下标(索引)，如果没有找到返回-1 字符串通用
语法：数组名.lastIndexOf('要查找的字符串')
countries = ["中国","法国","美国","英国","法国","巴西","墨西哥"];
a = countries.lastIndexOf('法国');
console.log(a); -
includes('要查找的字符串'); 返回值：布尔值，有返回true,反之false 字符串通用
语法：数组名.includes('要查找的字符串')
countries = ["中国","法国","美国","英国","法国","巴西","墨西哥"];
a = countries.includes('英国');
console.log(a); -
filter(fn(callback) 过滤 返回值：符合过滤条件的数组元素组成的新数组
语法：数组名.filter(function(element,index) {
return 过滤条件
})
const deposit = [
{"id":1,"names":"小明", "money":8000},
{"id":2,"names":"小李", "money":9000},
{"id":3,"names":"小张", "money":6000},
{"id":4,"names":"小陈", "money":10000},
{"id":5,"names":"小王", "money":7000},
{"id":6,"names":"小毛", "money":5000},
{"id":7,"names":"小赵", "money":5600},
{"id":8,"names":"小彭", "money":7888},
];
const newDeposit = deposit.filter(item=>item.money >= 7000)
console.log(newDeposit);
-
-
-
对象 以键值对的方式存储的一组数据
-
声明方法
实例化
const obj = new Object({name:'张三',age:18});
console.log(obj);字面量{}
const obj = {
uname:'kety',
age:18,
singsong:function(){
console.log('song');
}
}; -
读取元素的值
console.log(obj.uname);
console.log(obj['uname']); -
修改元素的值
obj.uname = 'tom'; -
新增元素
obj.gender = 'male'; -
删除元素
delete obj.gender; -
方法的调用
obj.singsong();
-
运算
算术运算
+，-，*，/，%，++，--
赋值运算
+=，--，*=，/=，%=，=
比较运算
>,<,>=,<=,==,!=,===,!==
==:只比较值
===：比较值和数据类型
let a = 10;
let str = '10';
console.log(a == str);//true
console.log(a != str);//false
console.log(a === str);//false
逻辑运算
与&&,或||,非!
连接运算
+，只要+的一端是字符串，结果就是字符串
语句
条件语句
语法：
if(条件){
条件成立执行的语句
}else{
}
Math对象
数学对象，有许数学的方法
random()方法
Math.random() 静态方法返回一个大于等于 0 且小于 1 的伪随机浮点数，并在该范围内近似均匀分布，然后你可以缩放到所需的范围。其实现将选择随机数生成算法的初始种子
DOM tree
DOM:document object model 文档对象模型
JS选择器
-
getElementById(id名)
语法： document.getElementById('id名') 通过id名来获取DOM元素
const outer = document.getElementById('outer');
console.dir(outer) -
getElementsByClassName('类名'); 通过类名来获取DOM元素，获得的是一个元素集合(伪数组)，需要读取元素需要遍历集合或用下标读取,获得的是html元素集合，不可以用forEach
语法：document.getElementsByClassName('类名');
const box = document.getElementsByClassName('box');
console.dir(box[0]);
box[0].style.background = 'blue'; -
document.getElementsByTagName('标签名'); 通过标签名来获取DOM元素，获得的是一个元素集合(伪数组)，需要读取元素需要遍历集合或用下标读取,,获得的是html元素集合，不可以用forEach
语法： document.getElementsByTagName('标签名');
const div = document.getElementsByTagName('div');
console.dir(div[0]); -
document.querySelector('CSS选择器') 通过CSS选择器获得DOM元素(只选择一个)
const box = document.querySelector('#outer');
console.dir(box); -
document.querySelectorAll('CSS选择器') 通过CSS选择器获得DOM元素(css选择器能选中多少个，js就能获得多少个) 获得的是一个节点集合 可以用forEach
const box = document.querySelectorAll('.box');
console.dir(box);
box.forEach(item=>console.log(item));
js元素属性的操作
-
元素自有属性及html5之前的自定义属性
-
获得
语法：对象名.属性名
img.title -
设置或修改
语法：对象名.属性名 = '新值 '
img.title = '阳光下的向日葵'
-
-
html5的自定义属性 data-自定义的属性名
-
获得
语法：对象名.dataset.自定义的属性名
console.log(img.dataset.flag); -
设置或修改
语法：对象名.dataset.自定义的属性名 = '新值'
img.dataset.flag = 'off';
-
元素CSS的操作
注：JS只能操作元素的内联(行内)样式
-
获得
语法：对象名.style.css属性名
console.log(box.style); -
设置或修改
语法：对象名.style.css属性名 = '新值'
box.onclick = function(){
if(this.dataset.flag == 'on'){
this.style = 'color:black;font-size:16px;';
// this.style.color = 'black';
// this.style.fontSize = '16px';
this.dataset.flag = 'off';
}else {
this.style = 'color:red;font-size:26px;';
this.dataset.flag = 'on';
}
}
元素类的操作
className
-
获得
语法：对象名.className 返回的是类名的字符串
const outer = document.querySelector('.outer');
console.log(outer.className); -
设置或修改 完全覆盖式的修改
语法：对象名.className = '新的值'
outer.className = 'outer one';
classList
-
获得
语法：对象名.classList 返回值：类名组成的集合
console.log(outer.classList); -
添加类
语法：对象名.classList.add('类名')
如果需要添加 多个，就传多个参数 就可以
outer.classList.add('two','three'); -
删除类：
语法：对象名.classList.remove('类名')
outer.classList.remove('three','two'); -
切换类 同一个类名有或无的切换
outer.classList.toggle('one');
元素的内容的操作
元素内容=>innerHTML
元素内容：指的是从开始标签到结束标签之间的内容
-
获得
语法：对象名.innerHTML
const box1 = document.querySelector('.box1');
console.log(box1.innerHTML); -
设置或修改
语法：对象名.innerHTML = "新的值" 完全覆盖式的修改 会解析标签
box1.innerHTML = "<span>我是span元素<span>";
文本内容 => innerText
-
获得
语法：对象名.innerText
console.log(box1.innerText); -
设置或修改
语法：对象名.innerText = "新的值" 不会解析标签
box1.innerText="<span>我是span元素<span>";
表单内容=>value
-
获得
语法：对象名.value
input.addEventListener('keyup',function(){
console.log(this.value);
}) -
设置或修改
语法：对象名.value = "新的值"
input.value = "关键词";
计(延)时器 setTimeout
过多长时间后做什么
语法：setTimeout(回调函数,延时时长); 返回值 ：当前计时器（包括：setTimeOut和setInterval）的id
let timer = setTimeout(function(){
document.querySelector('.box').style.display = 'none';
},3000)
清除(停止)计时器
clearTimeout(计时器的名称);
计时器 setInterval
每隔多久执行一次
语法：setIntervalt(回调函数,间隔时长); 返回值 ：当前计时器（包括：setTimeOut和setInterval）的id
let i = 0;
let timer = setInterval(function(){
i++;
if(i > 10 ){
clearInterval(timer);
// 清除(停止计时器)
}else{
console.log(i);
}
},1000);
清除(停止)计时器
clearInterval(计时器的名称);
事件
on+事件名 = 函数
事件监听
事件：在编程时系统内发生的动作或发生的事情如：单击，鼠标移入....
事件的监听：让程序检测是否有事件产生，一量有事件触发就立即 调用 一个函数来响应，也称为绑定事件或注册事件
事件监听三要素
-
事件源：哪个DOM元素被事件触发了 谁(who)
-
事件类型：用什么方式触发 如：click,mouseenter... 怎么做？
-
事件调用的函数：要做什么 做什么？
对象名.addEventListener(参数1，参数2，参数3)
-
参数1 事件名 string
-
参数2 回调函数 (用于写事件触发后需要实现的功能的逻辑)
-
参数3 是否有捕获机制 布尔值 false（默认值）冒泡 true :捕获
冒泡：当一个元素的事件被触发时，同样的事件将会在该元素的祖先中依次被触发，这个过程叫冒泡
事件对象：事件的回调函数的第一个参数为事件对象，一般用e,event表示
事件对象里存储着与事件相关的属性和方法
event.stopPropagation();
//阻止事件流(由大到小是捕获，由小到大是冒泡)
委托事件
子元素把本应该绑定在元素本身的事件委托给其祖先元素
const ul = document.querySelector('.box>ul');
const lis = document.querySelectorAll('.box>ul>li');
ul.addEventListener('click',function(event){
even.preventDefault();
// 阻止默认行为
console.dir(event.target)
if(event.target.tagName == 'A'){
lis.forEach(element => {
element.classList.remove('active');
});
event.target.parentElement.classList.add('active');
}
})
浙公网安备 33010602011771号