简介
JavaScript
一种轻量级的脚本语言，用来编写控制其他大型应用程序的脚本。
一种嵌入式语言。只适合嵌入更大型的应用程序环境，调用宿主底层的API。
JavaScript的核心语法部分相当精简，分为两部分。
1、基本语法构造
2、标准库。
除此之外就是调用的宿主环境提供的额外API（只能在该环境使用的接口）
例如：浏览器
浏览器控制类：操作浏览器
DOM类：操作网页的各种元素
Web类：实现互联网的各种功能
使用领域
（1）、浏览器的平台化
（2）、Node
（3）、数据库的操作
（4）、跨移动平台
（5）、内嵌脚本语言
（6）、桌面应用程序
语法
变量声明
//可控的使用区域
var num = 1;
//定义了就成了成员变量
num = 1;关于JavaScript的变量以及语法和Java都是大同小异的
JavaScript的var声明后是指代的所有的类型的
JavaScript判断两个值是否相等的方法
==和===
==判断两个值是否相等
===判断两个值的类型和值是否都相等
控制语句
控制语句也和Java的相同
数值类型
数值类型与Java有些不同
NaN：非数字，主要出现在字符串未解析成数字的场合。
undefined：表示数据找不到或者没有初始化
Infinity：如1/0会显示infinity，表示无穷
对象
JavaScript同Java一样也是面对对象的，是他们的核心。
在JavaScript里对象就是一组“键值对(key-value)”，是一种无须的数据集合。
var obj = {
foo:"hello",
bar:"World"
};in运算符
用于检查对象是否包含某个属性，包含就返回true，否则返回false
遍历
for (var i in obj) {
console.log(obj[i]);
}
for( var i = 0;i<10;i++){
console.log(i);
}增强for不同
而普通for的遍历是与Java一样的
数组
定义
var arr = [1,2,3,4,5];
var arr1 = [];
a[0] = 6;
a[1] = 5;
a[2] = 4;
a[3] = 3;
a[4] = 2;
a[5] = 1;用法与Java雷同
函数
1、概述
函数的3种声明方式
1、function命令
function print(s) {
console.log(s);
}2、函数表达式
var print = function(s) {
console.log(s);
};
//调用
print();3、Function构造函数
var add = new Function(
'x',
'y',
'return x + y'
);
// 等同于
function add(x, y) {
return x + y;
}函数可以调用自身，这就是递归（recursion）。
下面就是通过递归，计算斐波那契数列
function fib(num) {
if (num === 0) return 0;
if (num === 1) return 1;
return fib(num - 2) + fib(num - 1);
}
fib(6)；得到第六个元素：8
在函数里没有重载，调用时是按顺序调用。
BOM
定时器功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="testSetTimeout()">开一个定时器</button>
<button onclick="clearTime()">取消定时器</button>
<button onclick="testSetInt()">循环定时器</button>
<button onclick="clearSetInt()">取消循环定时器</button>
</body>
<script>
//window是顶级对象，在js中可以默认不用书写
//警告框
// window.alert("123");
// //确认框
// var flag = window.confirm("确认删除吗？");
// console.log(flag);
// //带输入框的提示弹出框
// var str = window.prompt("请输入一个月份");
// console.log(str);
var num ;
var num2 ;
var num3 ;
function testSetTimeout(){
//setTimeout
num = setTimeout(function () {
alert("这是在5秒后会弹出的框");
},5000);
num2 = setTimeout(function () {
alert("这是在5秒后会弹出的框");
},5000);
num3 = setTimeout(function () {
alert("这是在5秒后会弹出的框");
},5000);
}
function clearTime() {
console.log(num);
clearTimeout(num);
console.log(num2);
clearTimeout(num2);
console.log(num3);
clearTimeout(num3);
}
function testSetInt() {
num = setInterval(function () {
alert("这是一个延迟3秒执行的循环定时器");
},3000);
}
function clearSetInt() {
clearInterval(num);
}
</script>
</html>DOM
JavaScript操作的是网页的接口，文档对象模型。
作用：
将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（如：增删等）。
节点node
DOM的最小单位。文档的树形结构（DOM树）。
七种类型
Document：整个文档的顶层节点
DocmentType：doctype标签（<!DOCTYPE html>）
Element：网页的各种HTML标签<body>、<a>...
Attribute：网页元素的属性（class = "right"）
Text：标签之间包含的文本
Comment：注释
DocumentFragment：文档的片段
Node.nodeType
nodeType返回一个整数值，表示节点类型
对应类型
确定节点类型时通常使用nodeType方法
Node.nodeName
返回节点名
dom操作
document是整个html文件的顶级节点，要获取html中的节点，必须同过document对象来获取
查询
id getElementById() 通过id查询一个节点
类 getElementsByClassName() 通过class属性查询相对应节点
getElementsByTagName() 通过标签名查询所有节点
选择器 querySelector 通过选择器获取一个节点
querySelectorAll 通过选择器获取所有节点
获取文本节点
innerHTML 获取的是当前节点下的所有子节点和文本节点
innerText 获取的是当前节点下的所有文本节点
修改文本节点
innerHTML 删除当前节点下的所有节点，添加上赋值的字符串为文本节点
innerText 删除当前节点下的所有文本节点，添加上赋值的字符串为文本节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
color: black;
}
a[href="https://www.163.com"]{
color: red;
}
#div3{
width: 100px;
height: 100px;
}
.r{
background-color: red;
}
.g{
background-color: green;
}
.y{
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1" class="mm">
<a href="https://www.baidu.com" title="aa"><span>*</span>百度</a>
</div>
<div class="mm">
<ul>
<li><a href="https://www.163.com"><span>*</span>网易</a></li>
<li><a href="https://www.163.com">网易</a></li>
<li><a href="https://www.qq.com">腾讯</a></li>
<li><a href="https://www.qq.com">腾讯</a></li>
<li><a href="https://www.qq.com">腾讯</a></li>
</ul>
</div>
<div id="div3" class="r"></div>
<div>
<button onclick="getById()">通过id获取节点</button>
<button onclick="getByClass()">通过class属性获取所有节点</button>
<button onclick="getByTagName()">通过标签获取所有节点</button>
<button onclick="getByQuery()">通过选择器获取一个节点</button>
<button onclick="getByQueryAll()">通过选择器获取全部节点</button>
<button onclick="getInner()">获取文本节点-innerHTML</button>
<button onclick="getText()">获取文本节点-innerText</button>
<button onclick="changeInner()">修改文本节点-innerHTML</button>
<button onclick="changeText()">修改文本节点-innerText</button>
<br>
<button onclick="changeClass()">修改节点class属性</button>
</div>
</body>
<script>
/*
dom操作
document是整个html文件的顶级节点，要获取html中的节点，必须同过document对象来获取
查询
id getElementById() 通过id查询一个节点
类 getElementsByClassName() 通过class属性查询相对应节点
getElementsByTagName() 通过标签名查询所有节点
选择器 querySelector 通过选择器获取一个节点
querySelectorAll 通过选择器获取所有节点
获取文本节点
innerHTML 获取的是当前节点下的所有子节点和文本节点
innerText 获取的是当前节点下的所有文本节点
修改文本节点
innerHTML 删除当前节点下的所有节点，添加上赋值的字符串为文本节点
innerText 删除当前节点下的所有文本节点，添加上赋值的字符串为文本节点
*/
function getById() {
//通过对象的ID来获取id=div1的节点 --> getElmentById(ID值)
console.log(document.getElementById("div1"));
}
//HTMLColletion 对象除了有节点之外还有其他属性和方法
function getByClass() {
// console.log(document.getElementsByClassName("mm"));
//通过对象的类名来获取class=mm的节点 --> getElementByClassName(class值)
var coll = document.getElementsByClassName("mm");
//通过增强for遍历获取的元素
for (var i in coll){
//打印coll里包含的元素
console.log(coll[i]);
}
}
function getByTagName() {
// var coll = document.getElementsByTagName("div");
// 打印下标为0的节点
// console.log(coll[0]);
//通过对象的标签名来获取<div></div>标签的节点 --> getByTagName(标签名)
console.log(document.getElementsByTagName("div"));
}
function getByQuery() {
//通过对象的标签a来获取其中href='https://www.163.com'的第一个节点-->qureySelector(标签名[属性=属性值])
console.log(document.querySelector("a[href='https://www.163.com']"));
}
//nodeList 对象 除了查询的所有节点之外还有其他属性和方法
function getByQueryAll() {
//通过对象的标签a来获取<a></a>的所有节点
console.log(document.querySelectorAll("a"));
// var nodes = document.querySelectorAll("a");
// for(var i in nodes){
// console.log(nodes[i]);
// }
}
//获取文本节点
function getInner() {
//获取a标签中href='https://www.163.com'的第一个节点
var node = document.querySelector("a[href='https://www.163.com']");
//打印节点中的所有节点信息
console.log(node.innerHTML);
}
function getText() {
//获取a标签中href='https://www.163.com'的第一个节点
var node = document.querySelector("a[href='https://www.163.com']");
//打印节点中的文本信息
console.log(node.innerText);
}
//修改文本节点
function changeInner() {
//获取a标签中href='https://www.163.com'的第一个节点
var node = document.querySelector("a[href='https://www.163.com']");
//更改所有节点为文本节点4399
node.innerHTML = "4399";
}
function changeText() {
//获取a标签中href='https://www.163.com'的第一个节点
var node = document.querySelector("a[href='https://www.163.com']");
//更改文本节点为4399
node.innerText = "4399";
}
function changeClass() {
//根据ID获取div3的节点
var node = document.getElementById("div3");
//延时定时器
setInterval(function () {
//当class=r时，把class设置为y
if (node.getAttribute("class")=="r"){
node.setAttribute("class","y");
//当class=y时，把class设置为g
}else if(node.getAttribute("class")=="y"){
node.setAttribute("class","g");
}else{
//当class=其他时，把class设置为r
node.setAttribute("class","r");
}
//延时2000毫秒
},2000);
}
</script>
</html>Window对象模型
Navigate浏览器信息
window.open 打开新窗口
窗口名.close 关闭该窗口
screen显示屏幕信息
availWidth 浏览器的宽度
availHeight 浏览器的高度
History历史
window.history.back() 返回上一个页面
history.go(num) 跳转到第num个页面（需要先有历史记录）
Loction主机信息
与Java的URL类是类同的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var fam ;
function openNew() {
//window.open 新开窗口
fam = window.open("https://www.baidu.com");
console.log(fam.document);
}
function closeNew() {
//窗口名.close 关闭新开的窗口
fam.close();
//window.close不能关闭本窗口
// window.close();
}
function browser() {
//浏览器名称
console.log(navigator.appName);
//浏览器版本号
console.log(navigator.appVersion);
//浏览器代号
console.log(navigator.appCodeName);
}
function screens() {
//浏览器显示屏宽度
console.log(screen.availWidth);
//浏览器显示屏高度
alert(screen.availHeight);
}
function gotoF() {
//跳转历史页面3
history.go(3);
}
function historyNum() {
//历史页面数
console.log(history.length);
}
function loc() {
//完整URL
console.log(location.href);
//主机地址
console.log(location.host);
//主机名
console.log(location.hostname);
//协议
console.log(location.protocol);
//端口号
console.log(location.port);
}
function showImg() {
//通过ID 设置img标签的src=img/1.jpg，进行显示
document.getElementById("img").setAttribute("src","img/1.jpg");
}
function fl() {
//刷新
location.reload();
}
function flt() {
//把页面替换成输入地址的页面
console.log(location.replace("https://blog.csdn.net/weixin_44077840"));
}
</script>
</head>
<body>
<button onclick="openNew()">打开新的窗口</button>
<button onclick="closeNew()">关闭新的窗口</button>
<button onclick="browser()">浏览器信息</button>
<button onclick="screens()">浏览器屏幕信息</button>
<button onclick="gotoF()">跳转子页面3</button>
<button onclick="historyNum()">跳转子页面3</button>
<a href="window_son1.html">跳转子页面</a>
<button onclick="loc()">地址信息</button>
<button onclick="showImg()">显示图片</button>
<button onclick="fl()">刷新</button>
<button onclick="flt()">跳转</button>
<img src="" alt="" id="img">
</body>
</html>
JavaScript的常用知识点总结完了！！！^-.-^！！！~~~
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
