js 基础篇归纳(有点多不全的地方请见谅)

<body>
    <div class="box"></div>
    <script>
        for (let a = 0; a < 5; a++) {
                console.log(a);            
        }
    </script>
  
</body>

3.a标签的使用： <a href="javascript:alert()">文本内容</a>

4.外链式：

1.创建一个js命名文件夹

2.创建一个同名文件的js文件

3.在body结尾的子级位置写一对script标签，

在开始标签中用src引入文件相对路径

如下：


<body>
    <div class="box"></div>
    <script src="./js/util.js"></script>
</body>

1.3认识三种输出方式

alert("文本内容")---警告弹窗

document.write("带标签结构的文本")---页面显示内容

console.log---后台打印（非常重要）

1.4es5语法和es6语法区别

es5语法：var 变量名

es6语法：let变量名

定义未赋值的变量打印都是undefined

es5允许重复定义，es6不行

都可以重新赋值

补充一点：常量定义的时候必须赋值，不能重复定义，不能重新赋值

1.5数据的类型

es5数据类型

undefined----数据未定义

number-------数字类型

string-------字符串类型 ""

boolean------布尔类型 true 真的 false 假的

null--------空类型

强制转换字符串为数字类型

parselnt---字符串转数字整型

parseFloat---字符串转数字小数的类型

1.6经常用到的运算符

%---取余运算 10%3=1

++ -- ------自身数据依次+1或-1

+---字符串拼接

+=---累加

es5语法：通过+号拼接

es6语法：`+${变量名}`

示例：

   <div class="box"></div>
    <script>
        let box=document.querySelector(".box")
            let str= `<div>${"好好学习"}`
                str+=`</div>`
            box.innerHTML=str      
    </script>

2.循环语法

2.1三种判断语法结构

单分支语法---满足条件就执行，不满住不管

if（判断条件）{

满足条件运行的代码

}

双分支语法---满足条件就执行满足条件的代码，不满足就执行不满足条件的代码

if（判断条件）{

满足条件运行的代码

}else{

不满足条件运行的代码

}

多分支语句---有两个判断条件以上，满足条件就执行某个满足条件代码的判断语句

if（判断条件）{

满足条件运行的代码

}else if(判断条件){

}else{

上面条件都不满足运行的代码

}

示例：

let a=4
if(a==3){
    a++
}else if(a>6){
    a--
}else{
    a+1
    
}
console.log(a);

2.2常用到的逻辑运算符

!= !==----不等于

==---只判断相同值，不管数据类型

===----不仅要值相同，数据类型也要相同

&& ---并且--所有条件都要同时满足

||----或者--所有条件只要满足其中一个条件就可以执行代码

！---非判断（判断当前值是不是false或者true）

三目运算：判断语句？满足条件运行的代码：不满足条件运行的代码

示例：（后期优化减少代码使用比较多）

    let q=5
    q>7?q++:--q
    console.log(q);

2.3switch的判断

break: 停止所有循环

continue: 跳过这次执行下次

switch (传入判断条件) {

case 比较精确值1:

满足条件的代码

break;

case 比较精确值2:

满足条件的代码

break;

case 比较精确值3:

满足条件的代码

break;

示例：

let a = 4
switch (a) {
    case 1:
        console.log(a);
        break;
    case 3:
        console.log(a);
        break;
    case 4:
        console.log(a);
        break;
    default:
        console.log(a);
        break

}

2.4循环

循环的四要素：

1设置一个循环计数变量

2设置计数变量的变化范围

3设置循环结构体

4循环中要执行的代码

循环结构：

for(let 变量名=1；变量名<=计数最大值；变量名++){

循环中执行的代码

}

示例：

for (let a = 0; a <6; a++) {
console.log(a);    
}

2.5.认识while 和 do-while的循环原理

while的循环语法结构：

for (let a=1;a<=10;a++) {

console.log(a)

}

let a=1

while (a<=10) {

console.log(a)

a++

}

do---while的循环语法结构：

let a=1

do {

console.log(a)

a++

} while (a<=10)

3.函数

函数的作用：把我们写的常用的代码或者一段比较复杂可以实现更细节动画效果的代码用函数封装起来，在需要的地方，调用函数执行操作就可以了，优化代码的结构体

【注意】一次封装，无限调用

3.1函数定义的两种方式

声明式;

function 函数名（）{

封装代码

}

调用执行

函数名()

表达式：

let 变量名=function(){

封装代码

}

调用执行

变量名

示例：

let a=6
function fun(){
    if(a>0){
        console.log("a大于零");
    }
}
fun()

// 1.	编写函数实现返回1 - n之间所有整数和

function fun(){
    let a = prompt('输入一个数')
    a = parseInt(a)
    let sum=0
    for(let b=1;b<=a;b++){
        sum+=b
      
    }
    console.log(sum);
}
fun()

3.2认识全局作用域和局部作用域

全局作用域：在全局下定义的变量就是全局变量

全局变量可以在任意作用域使用

局部作用域：在局部作用域下定义的就是局部变量

我们在局部作用域下使用变量的时候优先找局部变量，其次找全局变量

【注意】我们目前把函数之内的区域叫做局部作用域，函数以外的区域叫全局作用域

3.3熟悉形式参数

形式参数：我们要在局部作用域使用的一个数据容器，因为不知道真实数据的内容，所以放个容器，具体的内容由实际参数提供，实际就是拿全局变量换一个身份在局部里面使用，避免全局和局部变量的重名操作。

实际参数：就是在函数调用执行的时候在括号中按照顺序传入全局变量的值

特点：

1形式参数可以有一个以上，不过按照从左往右的顺序接受实际参数的值

2形式参数可以赋值一个默认值，当有默认值的形式参数，你就算不给他传递实际数据，它也会按照默认数据执行操作

示例：

let a=2;
let q=4
let w=6
let h=9
function fun1(n,t,y){
    a=30
    console.log(a);
    console.log("a----"+n);
    console.log("q---"+t);
    console.log("w___"+y);
    
}
fun1(a,q,w)

3.3返回值return

当我们需要另一个函数中使用当前函数中的局部变量，就必须使用return把值返回到全局操作

特点：

1.return必须写在函数的局部代码最后

2.多个值返回必须打包成数组或对象一次性返回全局

示例：

// 返回值
function funz(){
    let b=20
    return b;
}

let b=funz()
function funn(){
    a=90
    console.log(a+5+b);
}
funn()

4.数组

4.1什么是数组

数组：数据集中打包处理的一种的数据结构

数组的定义：

实例化： let arr=new Array()

字面量：let arr=[]

4.2数组的增删改查

添加数据：

1.直接添加：arr=[添加数据1，添加数据2，添加数据33，...]

2.通过索引添加：arr[索引值]=添加数据

【注意】索引添加最好按照顺序添加不要出现断层

3.通过内置函数push()：arr.push(添加数据)

4.查询数组中的具体数据：let 变量=arr[索引值]

5.数组中数据的修改：arr[要修改的索引值]=修改的数据

6.数组中的数据删除：arr.splice(要删除的数据的索引，从这里删除的数据长度)

以上示例：

let arr=[1,2,3,4]
// 添加数组值
arr[4]=7
console.log(arr);
// 添加数组值
arr.push(9)
console.log(arr);
// 查询数组值
let a=arr[4]
console.log(a);
// 修改数组值
arr[2]=6
console.log(arr);

let arr1=[1,2,3,4,5,6]
console.log(arr1);
// 删除数组值
arr1.splice(1,2)
console.log(arr1);

4.3for循环遍历数组

【注意】设置的计数变量必须从0开始，最大值用arr.length获取并且不能写等于

示例：


let arr1=[1,2,3,4,5,6]
// 循环遍历
for(let a=0;a<arr1.length;a++){
    console.log(arr1[a]);
}

常用的属性：arr.length----数组中数据的长度

常用的方法：arr.push(添加值1，添加值2，...) arr.splice(要删除的数据的索引，从这里删除的数据长度)

了解：

forEach()-----数组的遍历方法

concat---数组拼接

pop()---从右往左依次删除一个数据

shift()---从左往右依次删除一个数据

unshift()---从右往左添加数据

slice(开始索引（包含）,结束索引(不包含))----截取数组

4.4二维数组认识

arr[数组的索引][数组里面的索引]

let arr = [
    [1, 2, 3, 4, 5],
    ["a", "b", "c", "d", "e"],
    [11, "aa", true, false]
]
//第二个数组里面的第四个值 打印的值为e
console.log(arr[1][4])

5.对象

万物皆对象

5.1对象的定义方式

对象概念：有很多的属性和方法的集合

对象定义方式：

实例化： let obj=new object()

字面量：let obj=[]

键对值----对象中存储数据的结构体

语法结构：let obj={ 键名1：数据1，键名2：数据2}

5.2对象的数据添加

1.在大括号中直接添加键值对

2.通过键名添加对应值

obj.键名=数据

示例：

let arr={a:1,b:2,c:3}
arr.d=4
console.log(arr);

3.对象的查询

let 变量=obj.键名

示例：

let arr={a:1,b:2,c:3}
let a1=arr.a
console.log(a1);

4.对象的修改

obj.键名=数据

示例：

let arr={a:1,b:2,c:3}
arr.a=6
console.log(arr);
console.log(arr.a);

5.对象的删除

delete obj.键名

示例：

let arr={a:1,b:2,c:3}
delete arr.c
console.log(arr);

5.3对象的遍历循环

for..in 遍历循环

示例：

let arr={a:1,b:2,c:3}
for (key in arr) {
            console.log(arr[key])
        }

【注意】

在for..in 遍历中，key代表的是所有的对象中保存数据的键名，但是只限于单独使用，但是要获取所有的值的遍历，在for..in中就必须写成obj[key]的状态，这样key才会变为obj中的各个键名，否者，只会被当作在对象中有一个键名就叫key的值获取

5.4string对象

1.indexof('查询的字符'，开始匹配索引)----检查字符串中是否包含这个字符

【注意】

如果找到，会返回这个字符所在的索引值，找不到就返回-1

开=开始匹配值代表的是从哪个位置开始匹配查询，不写就从头开始

示例：

let a='aegergopebjhnoabjknaig'
console.log(a.indexOf('g',0));
//2
console.log(a.indexOf('v',0));
//-1

2.substr和substring-----字符串截取

substr（开始索引，截取长度）

substring（开始索引，结束索引+1）

示例：

//字符串截取
let str="spjgroiuwejhiwesjrobsro"
console.log(str.substr(3,3))
console.log(str.substring(3,6));
// lastIndexOf 找到这个字符所在最后一个的长度
console.log(str.lastIndexOf('r'));//20
//找到这个字符最后所在的长度并打印从它开始到结束的字符串
console.log(str.substring(str.lastIndexOf('b')));

5.5number对象

toFixed(num)------约分小数位数

示例：

let a=23.234235
console.log(a.toFixed(3));

5.6math 对象

ceil()----向上取整

floor()----向下取整

round()----四舍五入

示例：

let a=3.222
//向上取整
console.log(Math.ceil(a));
//向下取整
console.log(Math.floor(a));
//四舍五入
console.log(Math.round(a));

random()---随机数

let num =Math.floor(Math.random()*(最大值-最小值 +1)+最小值)

示例：

let nameArr=[1,3,4,5,6]  
// 根据数组长度范围生成随机数
 let i = Math.floor(Math.random() * nameArr.length);

5.6date对象

//获取当前时间
let data = new Date();
let dataString = "现在是北京时间：" + data.toLocaleString();
// 现在是北京时间：2022/5/20 20:03:09

6.BOM

BOM的顶层对象---window

6.1window对象的直系内置函数方法---3个方法函数

1.延时计时器----过来设置时间以后执行的代码

setTimeout(function(){

执行代码

}，设置的时间（毫秒为单位）)

示例：

setTimeout(function () {
         console.log("好好学习");
//两秒后提示
        },2000)

2.间隙计时函数----每过一段时间就会运行代码一次，如果不关闭就一操作下去

let time=setInterval(function(){

执行代码

}，设置的时间（毫秒为单位）)

3.clearInterval (变量) 停止

取消指定的setInterval函数将要执行的代码

示例：


//定义的一个数
let a=5
time=setInterval(function(){
    // 每过一秒减少1
    a--
    // 判断a>0就打印
     if(a>0){
        console.log(a);

     }
    //  否者停止打印
     else{
         //停止
        clearInterval(time)

     }
    
},1000)

6.2认识window中子级某系对象的方法

history---浏览器的历史记录

length-----浏览网页的记录

back()----返回上一个页面---（重点）

forward()----前进下一个一面

go(1)-------到指定的某个页面（正数前进，负数后退）

<button id="back">返回上一个页面</button>
<button id="forward">前进到下一个页面</button>
<button id="go">到达指定的页面(正数前进，负数后退))</button>
//历史对象的操作
console.log(history,length);
let back=document.getElementById("back")
let forward=document.getElementById("forward")
let go=document.getElementById("go")
back.onclick=function(){
    // history---浏览器的历史记录 一共打开了多少网页
    // 返回上一个页面
    history.back()
}
forward.onclick=function(){
    // 前进到下一个页面
    history.forward()
}
go.onclick=function(){
    // 到达指定的页面(正数前进，负数后退))
    history.go(-3)
}

location---定位对象

href---访问路径地址

location.href=‘路径地址’

示例：

 <button id="ww">网站</button>
//定位对象
let ww=document.getElementById("ww")
ww.onclick=function(){
    // 网页上的地址
    // location.href="http://www.baidu.com"
    // 自己编写的网页
    location.href="index1.html"
}

7.DOM

7.1DOM获取标签的方法

原生四种方法：

document.getElementById(id值)

document.getElementsByClassName(类名)

【注意】获取由于是多个标签（一个也一样）会以伪数组的形式

返回标签，我们要用的时候一定要使用索引来获取

document.getElementsByName（）-----通过name名字获取input标签

document.getElementsByTagName（）---通过标签名获取标签

h5中的获取方法-----（推荐使用）

document.querySelector(选择器)---获取指定一个标签

document.querySelectorAll(选择器)---获取匹配所有标签（伪数组）

示例：

 <div id="b">12</div>
    <div class="e">23
        <input type="text">
    </div>  <div class="e">23
        <input type="text">
    </div>
    <div class="w">23</div>
    <button id="but">按钮</button>
    <script src="./index.js"></script>

let b=document.querySelector("#b")
console.log(b);
let v=document.querySelectorAll(".e")
console.log(v);

7.2js对css的细节操作

1.文本： innerHTML----给指定标签添加文本内容（可以识别字符串中的标签）

存: 元素 innerHTML=文本取：let 变量=元素.innerHTML

示例：

<button id="but">按钮</button>
let btn=document.querySelector("#but")
//获取按钮二字
let b= btn.innerHTML 
console.log(b);
//把按钮变成请稍后按我
btn.innerHTML = "请稍后按我"

2.属性：

元素.属性名 = "属性值"

元素.className = "类名1 类名2..."

示例：

<div id="b">12</div>
let btn=document.querySelector("#but")
    // 用js添加id
    div.id = "big"
    div.className = "aaa ddd bbb"
    // 失去点击效果
    btn.disabled = "disabled"

3.改变css:

元素.style.样式名1（驼峰命名） = "样式值1"

元素.style.样式名2（驼峰命名） = "样式值2"

let btn=document.querySelector("#but")

//改变样式
btn.style.color = "red"
btn.style.fontSize = "50px"
btn.style.width = "200px"
btn.style.height = "200px" 
btn.style.background = "black"

7.3html和body标签的获取方式

html: document.documentElement

body: document.body

示例：

 <ul class="list">
        <li>234</li>
        <li class="a">534</li>
        <li>5344</li>
    </ul>
<li class="b">2777</li>
获取html
let html1=document.querySelector("html")
console.log(html1);
重点记
let html=document.documentElement
console.log(html);
获取body
let body1=document.querySelector("body")
console.log(body1);
重点记
let body=document.body
console.log(body);

7.4其他获取标签节点的方法

熟练：---(重点)

parentNode-----获取当前标签父级

previousElementSibling---上一个兄弟及标签

nextElementSibling---下一个兄弟及标签

了解：

firstElementChild---获取父级下第一个子级标签

lastElementChild---获取父级下最后一个子级标签

children------获取所有的父级下的子级标签

firstChild

lastChild

childNodes

示例：

<ul class="list">
        <li>234</li>
        <li class="a">534</li>
        <li>5344</li>
</ul>
<li class="b">2777</li>
// 获取父级下第一个子级标签
let li=document.querySelector(".list")
console.log(li.firstChild);
// 重点记
console.log(li.firstElementChild);

//获取父级下最后一个子级标签
let li1=document.querySelector(".list")
console.log(li1.lastChild);
// 重点记
console.log(li1.lastElementChild);

//获取当前标签父级
let li3=document.querySelector('.a')
console.log(li3.parentNode);
//获取上一个兄弟级标签
let li2=document.querySelector('.a')
console.log(li2.previousElementSibling);
// 获取下一级兄弟级标签
console.log(li2.nextElementSibling);

7.5标签的js增删改查

createElement()-----创建标签元素对象

let 变量名 = document.createElement("标签名“)

appendChild()----把一个标签元素作为另一个父级元素的子级添加

父级标签.appendChild(添加的子级标签)

replaceChild()-----修改元素

父级标签.replaceChild(替换，被替换子级)

removeChild()-----删除元素

父级元素.removeChild(删除的子级标签)

示例：

<ul class="list">
<li>234</li>
<li class="a">534</li>
<li>5344</li>
</ul>
<li class="b">2777</li>
// 创建标签createElement
let div=document.createElement("div")
div.style.color="red"
div.style.textAlign="center"
div.style.width="200px"
div.style.height="200px"
div.style.background="yellow" 
div.innerHTML="内容"
div.style.lineHeight="200px"
// appendChild(div)把一个标签元素作为另一个父级元素的子级添加
document.body.appendChild(div)
//修改
let list=document.querySelector(".list")
let li4=document.querySelector(".a")
let li6=document.querySelector(".b")
// 交换
list.replaceChild(li6,li4)
// 删除
list.removeChild(li4)

7.6认识事件的四要素

事件的四要素：

1.要有事件源

2.注册对应的事件类型

3.事件的执行代码和结构体

4.事件对象

格式：

标签元素（事件源）.on+事件类型 = function (event) {

//触发事件执行代码块

event.方法

}

委派事件示例：

  <table>
            <tr>
                <td>源码时代小店</td>
                <td>源宝</td>
                <td>026-88888888</td>
                <td>敲代码</td>
                <td><button class="but">删除</button></td>

            </tr>  
</table>  
let table = document.querySelector('table')
//找到大父级做点击事件
    table.onclick = function (e) {
        console.log(e.target.className);
//判断父级下面的子级或者后代级的类名
        if (e.target.className == "but") {
            e.target.parentNode.parentNode.remove()

        }

    }

三种注册方式：

常用注册方式：----（重点）

标签元素（事件源）.on+事件类型 = function () {

//触发事件执行代码块

}

js的嵌入式注册事件：----不推荐使用

<标签名 on+事件类型="函数的调用"></标签名>

对应的函数定义写在外链式的js中

监听添加事件：-----（重点）

标签元素.addEventListener("事件类型",function () {

//触发事件执行代码块

})

【注意】

如果只做一个事件常用和监听都可以使用，

如果要做同样的多个事件，必须选择监听实现

示例：

   <div class="di">点我呀！</div>
   <input class="inp" type="text">
   <div class="ts"></div> 
   let di=document.querySelector(".di")
    di.onclick=function(){
        alert(250)
    }
    // 监听事件提示的内容会按照顺序出现
    di.addEventListener("click",function(){
        alert("嗨")
    })
    di.addEventListener("click",function(){
        alert("你是个猪")
    })

7.7常用的事件

onclick-----点击事件

onmouseover--鼠标移入事件

onmouseout--鼠标移出事件

input框：

oninput-----及时输入及时激活

onblur------失焦事件

onchange----输入改变触发事件

示例：

<input class="inp" type="text">
//input框
let inp=document.querySelector(".inp")
let ts=document.querySelector(".ts")

//判断输入的长度
inp.oninput=function(){
    if(inp.value.length<=6){
        ts.style.color="red"
        ts.innerHTML="输入的长度不够"
    
    }else{
        ts.innerHTML=""
    }
}

//鼠标移入事件
inp.onmouseover=function(){
    inp.style.border="2px solid #4e6ef2"
}
inp.onmouseout=function(){
    inp.style.border="2px solid #ccc"
}
}

onload-----窗口加载事件

window.onload = function () {

js的全部代码

}

【原理】

我们在写外链式的js文件的时候，以后先必须写出窗口加载函数，然后把所有js代码写在这个函数的function中那么当你把script放入head中，它会预先让标签加载出来以后在执行内部的js代码防止获取标签失败

示例：

// 窗口事件-—-----一定要写
window.onload=function(){

}

小秃头学编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 基础篇归纳(有点多不全的地方请见谅)

1.js基础语法1.1js的认识js---JavaScript(脚本语言)作用：初期使用它来实现数据结构的梳理，数据的收发（ajax）作业面的交互动画效果js的三大组成部分ECMAcript---es语法（js的基础语法规范）2015年前---es5语法2015年后---es6语法（简单好写---现在的主流框架）BOM---浏览对象模型DOM---文本对象模型1.2js的四种使用方法1.内嵌式：<div onclick="alert()">文本内容&l
复制链接

扫一扫