[JavaScript知识库] JavaScript 学习笔记

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript 学习笔记 -> 正文阅读

[JavaScript知识库]JavaScript 学习笔记

JavaScript是什么?

JavaScript是一门世界上最流行的脚本语言.

HTML决定网页的内容

CSS决定网页的样式和呈现方式

JS决定网页的行为

第一个js程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/qj.js"></script>
</head>
<body>

</body>
</html>

/*alert('hello,world');*/
var num = 10;
if (num> 10){
    alert('10');
}else if (num > 8){
    alert('8');
}

浏览器控制台指令

//浏览器弹窗显示数据
alert(num)
//浏览器控制台显示数据
console.log(num)

数据类型

数字类型   123
浮点数类型  123.12
科学计数法 1.123e3
负数 -99
NaN
无限大 Infinity
字符串 "asc" 'asc'
布尔型  true false
逻辑运算 && II !
比较运算符 > < == != ===(绝对等于)
注意: NaN === NaN(NaN不等于任何,包括自己)
isNaN 判断这个数是否是NaN

null 空
undefined 未定义
数组
var arr = [1,a,'a',"a",true];
对象
"use strict" 每次必加 严格检查机制
let 局部变量
var 全局变量
const 常量

json的使用

var user = {
    name : '张三',
    age: 10,
    sex: '男'
}
var job = JSON.stringify(user);

var job1 = JSON.parse('{"name":"张三","age":3}');

DOM节点

document.getElementsByTagName("h1");
document.getElementById('p1');
document.getElementsByClassName('p2')
var father = document.getElementById('p1');
var children = father.children;
father.innerText="adfcsad";
father.innerHTML="<h1>哈哈哈</h1>";
father.style.color = "red";
father.style.fontsize="20px";
//移除节点
father.removeChild("p1");
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);
var newp = document.createElement('p');
newp.id = 'p3';
newp.innerText= "hello world";
//向后插入节点
list.appendChild(newp);
//向前插入节点
list.insertBefore('p2');

注意:删除和插入多个节点的时候,children是动态变化的

jQuery

Download jQuery | jQuery

 <script src="lib/jquery-3.6.0.js"></script>

<p>哈哈哈哈</p>

$('p').click();

$(function () {
    $('p').click(function (e){
        $('#p1').innerText='123456';
    })
})