JS基础知识_jsuhk-CSDN博客

本文链接：https://blog.csdn.net/qq_44087994/article/details/125820092

JavaScript

一、简介

JavaScript简称JS，JS是互联网中最流行的脚本语言，广泛运用与网页、小程序、APP中。

JS是web开发必学的语言之一：

HTML定义了网页的内容
CSS描述了网页的布局
JS控制了网页的行为

二、JS是脚本语言

JS是轻量级的编程语言
JS是可插入HTML页面的代码
所有现在的浏览器都可执行JS代码

三、JS的用法

HTML中的JS代码必须位于<script></script>之间，<script></script>可以放在<body>或者<head>中；也可以将JS代码单独写成一个后缀名为js的文件，再通过<script></script>引入html文件

直接写入HTML输出流

document.write("<h1>这是一个标题</h1>")
document.write("<p>这是一个段落。</p>")

对事件的反应

onclick：点击事件

<button type="button" onclick="alert('欢迎!')">点我!</button>

改变HTML的内容

<script>
    function myFunction(){
        x=document.getElementById("demo");  // 找到元素
        x.innerHTML="Hello JavaScript!";    // 改变内容
    }
</script>
<button type="button" onclick="myFunction()">点击这里</button>

改变HTML图像

<img src="./img/cat_open.png" alt="" id="photo">
<input type="submit" value="更改图片"
onclick="document.getElementById('photo').src='./img/cat_close.png'">

改变HTML文字样式

<p id='style'>段落</p>
<input type="submit" value="华丽的" onclick="document.getElementById('style').style='color:pink;font-size:20px;'">

```

四、JS输出

window.alert()弹出警告窗
document.write()将内容写到HTML文档中, 仅仅向文档输出写内容
innerText()操作指定标签和子标签内部文字
innerHTML()操作指定标签内部文字
console.log()写入到浏览器控制台

<body>
	<a href=""><b>百度</b>一下</a>
</body>
<!-- 向a标签中添加href属性 -->
<script>
	a1=document.getElementsByTagName('a')
    // a1[0].innerText='HTML<b>CSS</b>'
    a1[0].innerHTML='HTML<b>CSS</b>'
    // 节点.属性=属性值--向节点中添加或修改属性
    a1[0].href='https://www.baidu.com'
    a1[0].target='_blank'
    console.log(a1[0])
    a1[0].className='a2'
</script>

五、JS语法

注释

js中使用单行注释//和多行注释/* */

变量

变量名必须以字母开头，区分大小写

//全局变量  变量名=值
num=1
//函数中的局部变量  var 变量名=值
var num2=2
//{}中的局部变量  let 变量名=值
let num3=3
//常量 const 变量名=值
const stu='1234'

运算符

(1)数学运算符： +、-、*、/、%、**

console.log(2/3)
console.log(2%3)
console.log(2**3)

(2)比较运算符： >、<、>=、<=、==、!=

console.log(10>20) //false
console.log(2==3)//两边的元素转换成字符串是否相等  false
console.log(2!=3)//两边的元素转换成字符串是否不相等
// === 直接判断两边数据是否相等  !==直接判断两边数据是否不相等
(3)赋值运算符：=、+=、-=、*=、/=、**=、%=、
(4)逻辑运算符：&&与 ||或  !非

函数

函数定义：函数将重复的代码封装起来以便重复调用，作用是降低代码的冗余度，其次是将执行某一功能的代码封装起来更容易让人理解

定义函数：
```
function 函数名(){
    函数体
}
```
调用函数：
```
函数名(实参列表)
```

分支结构

语法1： 
if(条件语句){
    代码块
}else{
    代码块
}
语法2(多分支结构)：
if(条件语句){
    代码块
}else if(条件语句){
    代码块
}else if(条件语句){
    代码块
}...{
    代码块
}else{
    代码块
}

分支结构else可以省略不写

三目运算符：

python：结果1 if 条件 else 结果2
java、c、js：条件?结果:结果2-条件成立结果1 不成立结果2

循环

（1）for-in 循环取的是序列中每个元素的下标，通过序列[下标]的形式将元素取出
```
for(变量 in 序列){
    代码块
}
```
（2）while 循环
```
while(条件语句){
    代码块
}
```

六、JavaScript HTML DOM（DOM操作-节点操作）

HTML DOM(文档对象模型)：通过HTML DOM可以访问JS HTML文档的所有元素

JavaScript 提供了一个document：指向的是HTML，在JS中通过document可以获取页面内容对应的标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YVnUHkj8-1657954817077)(0712JS基础知识.assets/1657710940028.png)]

DOM操作具体内容：对节点的增删查

1、操作标签

直接获取标签

a. 通过id属性值获取标签

document.getElementById(id属性值)

b.通过class属性值获取标签

document.getElementByClassName(class属性值)

c. 通过标签名获取标签

//查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

获取父节点

获取指定节点的父节点
```
节点.parentElement
```

获取子节点

节点.children--获取指定节点的所有子节点
节点.firstElementChild--获取指定节点的第一个子节点
节点.lastElementChild--获取指定节点的最后一个子节点节点

添加节点

创建新的节点 document.createElement(标签名)
创建新的文本节点  document.createTextNode("内容")
节点1.appendChild(节点2)--在节点1的最后添加节点2  两者为父子关系
节点1.insertBefore(节点2，节点3)--在节点1中,在节点3的前面添加节点2  节点1是父节点，节点23是兄弟

例子1：

<script>
    //创建 <p> 元素:
    var para = document.createElement("p");
	//为 <p> 元素创建一个新的文本节点：
    var node = document.createTextNode("这是一个新的段落。");
	//将文本节点添加到 <p> 元素中：
    para.appendChild(node);

	//最后，在一个已存在的元素中添加 p 元素。
	//查找已存在的元素
    var element = document.getElementById("div1");
	//添加到已存在的元素中:
    element.appendChild(para);
</script>

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
</div>
 
<script>
    var para = document.createElement("p");
    var node = document.createTextNode("这是一个新的段落。");
    para.appendChild(node);

    var element = document.getElementById("div1");
    var child = document.getElementById("p1");
    element.insertBefore(para, child);
</script>

删除节点
```
标签.remove()
```

2、操作HTML

改变HTML属性

document.getElementById(id).attribute=新属性值

改变HTML样式

document.getElementById(id).style.property=新样式

3、DOM事件

DOM使JavaScript有能力对HTML事件做出反应

事件

事件绑定能让网页内容对人类的指定行为做出反应

事件的三要素：事件源，事件，事件驱动程序
绑定事件的方法

(1) 在标签内部给事件源的事件属性赋值
```
<标签名 onclick='事件驱动程序'></标签>
```
注意：函数中this指向的是window

(2) 在js中给标签对应节点的事件属性赋值
```
事件源节点.οnclick=事件驱动程序对应的函数
```
注意：事件驱动程序对应的函数必须是普通函数的函数名或者是匿名函数。函数中 this指向的是事件源

(3).在js中通过节点对象的addEventListener绑定事件
```
事件源节点.addEventListener(事件名称，事件驱动程序对应的函数)
```
注意：这里的事件名去掉前面的on 函数中的 this指向的是事件源

常见的事件类型：

(1). 鼠标相关事件

onclick点击  
onmouseover鼠标悬停  
onmouseout 鼠标离开

	<!--鼠标悬停事件  -->
<button id="b1" type="button">来点我呀</button>
<script>
	bt1=document.getElementById('b1')
    bt1.onmouseover=function(){
        this.innerText='点不了吧'
        this.style.color='blue'
    }
    bt1.onmouseout=function(){
        this.innerText='点我呀'
    }
</script>

	<!-- 鼠标删除事件 -->
<button id="bt2" class="btn1">删除1</button>
<button id="bt2" class="btn1">删除2</button>
<button id="bt3" class="btn1">删除3</button>
<button id="bt4" class="btn1">删除4</button>
<script>
	function del(){
			this.remove()
		}
    btn=document.getElementsByClassName('btn1')
    for (index=0;index<4;index++){
        btn[index].onclick=del
    }
</script>

(2). 键盘相关事件

onkeydown/onkeypress 某个键按下对应的事件  
onkeyup 某个键按下后弹起来对应的事件

注意:键盘相关事件在绑定的时候必须通过js标签或者js节点对象绑定(方法2/方法3)，才能在函数中添加事件对应的参数

<input id="input1"  onkeypress="keypress()" onkeydown="" />
<script>
	input1=document.getElementById('input1')
    input1.onkeypress=function(evt){
        console.log(evt)
    }
</script>

(3). 值改变事件

 onchange 用于检测下拉列表选项发生改变的时候

通过获取select标签中的value属性。

<select id="city" name="city" id="">
    <option value="成都">成都</option>
    <option value="西安">西安</option>
    <option value="上海">上海</option>
    <option value="北京">北京</option>
</select>
<script type="text/javascript">
    city=document.getElementById('city')
    city.onchange=function(){
        console.log(city.value)
    }
</script>

七、JavaScript Browser 对象实例（BOM操作）

1 widows基本操作

打开一个新窗口&关闭新窗口

<input type="submit" value="打开新窗口" onclick="openwindow2()">
<input type="submit" value="关闭新窗口" onclick="close2()">
<script>
    // 打开浏览器新窗口
    function openwindow2(){
        w2=window.open('https://www.baidu.com')
        w2.moveTo(500,200)
    }
    function close2(){
        w2.close()
    }
</script>

滚动到指定内容处

<input type="submit" value="滚动到页面底部" onclick="to_bottom()">
<div style="height: 5000px;"></div>
<p>页面底部</p>

<script>
    // 实现页面滚动 应用-瀑布式加载页面
    function to_bottom(){
        y=0
        y_max=5000
        while(y<=y_max){
            y+=1000
            // scrollTo(x,y)
            window.scrollTo(0,y)
        }

    }
</script>

2 弹框

第一类弹框

alert()

只有提示和确定按钮

<button onclick="message1()">弹框1</button>
<script>
	function message1(){
        alert('添加成功')
    }
</script>

第二类弹框

confirm

有提示信息(问题)，确定按钮(返回值为true)和取消按钮(返回值为false)

<button onclick="message2()">弹框2</button>
<script>
	function message2() {
    result = confirm('是否删除整个数据')
    if (result == true) {
		
    } else {

	}
</script>

第三类弹框

prompt()

有确定按钮(返回值是输入框中内容) 和取消按钮(返回值null)

<button onclick="message3()">弹框3</button>
<script>
	function message3(){
        prompt('请输入你的名字')
    }
</script>

3 JS中的定时器

JavaScript中的定时器分为两种：Interval and Timeout

Intetval 定时器的开始和关闭

创建定时器：setInterval(函数，时间)–每隔指定时间自动调用函数直到定时器关闭才不在运行

关闭定时器：clearInterval(定时器对象)
Timeout 定时器的开始和关闭

创建定时器：setTimeout(函数，时间)–相当于定时炸弹，发生之后就没有了

关闭定时器：clearTimeout(定时器对象)–‘拆炸弹’

练习

练习1：方块的上下移动：

<body>
    <div id="box1" style="background-color: aqua;width: 100px;height: 100px;position: absolute;top: 10px;"></div>
</body>
<script>
    top1 = 10
    dtop=0
    t1=setInterval(function() {
        // 拿到盒子
        top1 += 10
        div=document.getElementById('box1')
        divTop=parseInt(div.style.top)

        if (divTop<innerHeight-100) {
            div.style.top = top1 + 'px'
        }
        else{
            clearInterval(t1)
            dtop=divTop
            console.log(dtop)
            t2=setInterval(function(){
                dtop-=10
                div=document.getElementById('box1')
                div.style.top=dtop+'px'
                if(dtop<10){
                    clearInterval(t2)
                }
            },100)
        }
    }, 100)
</script>

练习2：页面跳转

<body>
    <span></span>
    <span>秒跳转到百度</span>
</body>

<script>
	function test() {
		//操作标签中的内容 
		span = document.querySelector("span");
		time = 1;
		span.innerHTML = time;
		//使用匿名函数
		timer=setInterval(function() {
			time--;
			span.innerHTML = time;
			if (time === 0) {
				//先停止
				clearInterval(timer);
				//跳转页面
				// location.href = "https://www.baidu.com";
				w1=window.open('https://www.baidu.com','_blank')
			}
		}, 1000);
	}
	test();
</script>