JS基础知识

时间：2023-04-29 18:07:00 bt3六盘水仪表变送器

文章目录

- - JavaScript
  - - 一、简介
    - 二、JS是脚本语言
    - 三、JS的用法
    - - 直接写入HTML输出流
      - 对事件的反应
      - 改变HTML的内容
      - 改变HTML图像
      - 改变HTML文字样式
    - 四、JS输出
    - 五、JS语法
    - 六、JavaScript HTML DOM（DOM操作-节点操作
    - - 1、操作标签
      - 2、操作HTML
      - 3、DOM事件
      - 事件
        
        绑定事件的方法
        
        常见事件类型：
    - 七、JavaScript Browser 对象实例（BOM操作）
    - - 1 widows基本操作
      - 2 弹框
      - 3 JS中的定时器

JavaScript

一、简介

JavaScript简称JS，JS广泛应用于网页、小程序、APP中。

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

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

二、JS是脚本语言

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

三、JS的用法

HTML中的JS代码必须位于之间，可以放在或者中；也可以JS代码单独写成后缀名称js文件，再通过引入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>

<script> a1=document.getElementsByTagName('a') // a1[0].innerText='HTMLCSS' a1[0].innerHTML='HTMLCSS' // 节点.属性=属性值--向节点中添加或修改属性 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" 元素中的所有  元素
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> //创建  元素: var para = document.createElement("p"); //为 
 元素创建一个新的文本节点： var node = document.createTextNode("这是一个新的段落。"); //将文本节点添加到  元素中： 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">删除1button>
<button id="bt2" class="btn1">删除2button>
<button id="bt3" class="btn1">删除3button>
<button id="bt4" class="btn1">删除4button>
<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()">弹框1button>
<script> function message1(){ 
             alert('添加成功') } script>

第二类弹框

confirm

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

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

第三类弹框

prompt()

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

<button 元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

JS基础知识

文章目录

相关文章