一、JavaScript简介
独立的语言，浏览器具有jJavaScript解释器；JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
二、基础常识
1、代码存在形式
代码注释：（1）单行：// （2）多行：/* */
（1）HTML的Head中
<1> 直接写内容
<!--这个type可写可不写-->
<script type="text/javascript">
alert("dream");
</script>
<2> 指定文件路径
<script src="js文件路径"></script>
（2）放在body中
PS：JS代码需要放置在body的最下面，且可以在浏览器的终端console中调试运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--内容-->
<script src="js文件路径"></script>
</body>
</html>
2、变量
name = 'dream' ###全局变量
var name = 'dream' ###局部变量（函数）
三、基本数据类型
1、布尔类型（小写）
== ###比较值相等
!= ###不等于
=== ###比较值和类型相等
!=== ###不等于
|| ###或
&& ###且
2、数字
<script>
MyAge = 23;
MyHeight = "128";
// 转换成float类型
TransformFloat = parseFloat(MyHeight);
// 转换成数字类型
TransformInt = parseInt(MyHeight);
</script>
3、字符串(在浏览器console调试)
str1 = "dream";
str1.charAt(索引);
str1.substring(起始位置,结束位置);
str1.length 获取字符串长度
str1 = " dre am ";
str1.trim(str1); ###移除两边空白
str1.trimLeft(str1); ###移除左边空白
str1.trimRight(str1); ###移除右边空白
str1 = "dream";
str1.concat(value,...); ###拼接
str1.indexOf(string,number); ###子序列位置
str1.lastIndexOf(string,number); ###子序列位置
str1.slice(start,end); ###切片
str1.toLowerCase(); ###转换为小写
str1.toUpperCase(); ###转换为大写
str1.split(分隔符,显示个数); ###分割
4、数组
li = [1,2,3,4] ###定义数组
li.length ###数组长度
li.push(元素) ###尾部追加元素
li.pop() ###弹出最后一个元素
li.unshift(元素) ###头部插入元素
li.shift() ###移除头部元素
li.splice(开始,删除数量,value,...) ###插入、删除或替换元素
li.splice(n,0,value) ###指定位置插入元素
li.splice(n,1,value) ###指定位置替换元素
li.splice(n,1) ###指定位置删除元素
li.slice(start,end) ###切片
li.reverse() ###反转
li.join() ###将元素连接成一个字符串
li.concat(value,...) ###连接数组
li.sort() ###排序
5、字典
d = {key:value,...} ###定义字典
四、for循环
我们不难可以看出，循环时的元素是
索引！！！
1、第一种方法
（1）for循环数组
li = [10,20,30,40]
for(var i in li){
console.log(i,li[i]);
}
（2）for循环字典
d = {a:1,b:2,c:3}
for(var i in d){
console.log(i,d[i]);
}
2、第二种方法
注意：此方法不支持字典的循环，字典是无序的，key也无法表示！！！
li = [10,20,30,40]
for(var i=0;i<li.length;i=i+1){
console.log(i,li[i])
}
五、条件语句
1、if条件语句
符号说明：
==：值相等
===：值和类型都相等
&&：等于python中的and
||：等于python中的or
if(条件){
}else if(条件){
}else{
}
2、switch条件语句
id='3';
switch(id){
case '1':
console.log(1);
break;
case '2':
console.log(2);
break;
default:
console.log('other');
break;
}
eg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="1" onclick="Fun('1')">
<input type="button" value="2" onclick="Fun('2')">
<input type="button" value="3" onclick="Fun('3')">
<script>
function Fun(aa) {
switch (aa) {
case '1':
console.log(1);
break;
case '2':
console.log(2);
break;
default:
console.log(other);
break;
}
}
</script>
</body>
</html>
六、函数
1、普通函数
function 函数名(x){
}
函数名(value)
2、匿名函数
### 平常写法
function 函数名(x) {
return x+1
}
setInterval("dunc()",500);
---------------------------
### 匿名函数
setInterval(function(){
console.log(1);
},500)
3、自执行函数
创建函数并且自动执行！！！
(function(x){
console.log(x);
})(1)
七、定时器
var t1 = setInterval(function(){},5000); ###5s执行一次
clearInterval(t1); ###清除Interval定时任务
var t2 = setInterval(function(){},5000); ###执行到时，等待5s在执行且执行一次
clearTimeout(t2); ###清除Timeout定时任务
1、定时生成一个弹框
<script>
setInterval("执行代码",间隔时间)
// 创建一个定时器，3S
setInterval("alert('dream');",3000);
</script>
2、Timeout删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="1"></div>
<input type="button" value="按钮" onclick="Fun();"/>
<script>
function Fun() {
document.getElementById('1').innerText = '已删除';
//3s后自动清空
setTimeout(function (){
document.getElementById('1').innerText = '';
},3000);
}
</script>
</body>
</html>
3、生成console.log
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function fun(){
console.log(1);
}
// 创建一个定时器，3S
setInterval("fun()",3000);
</script>
</body>
</html>
4、实现字符循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="1">你好，JavaScript</div>
<script>
function fun(){
//根据ID获取标签内容
var tag = document.getElementById('1')
//获取标签内部内容
var content = tag.innerText;
var first = content.charAt(0)
var other = content.substring(1,content.length)
var newstr = other + first
tag.innerText = newstr
}
// 创建一个定时器
setInterval("fun()",300);
</script>
</body>
</html>
八、Dom选择器
1、查找标签
（1）直接查找
document.getElementById() ###根据id回去标签
document.getElementsByName() ###根据name属性获取标签集合
document.getElementsByClassName() ###根据class属性获取标签集合
document.getElementsByTagName() ###根据标签名获取标签集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="1">id:1</div>
<input name="dream" />
<div name="dream">name</div>
<div class="c1">class:c1</div>
<a>a</a>
</body>
</html>
（2）间接查找
parentElement ###父节点标签元素
children ###索引子标签
firstElementChild ###第一个子标签元素
lastElementChild ###最后一个子标签元素
nextElementSibling ###下一个兄弟标签元素
previousElementSibling ###上一个兄弟标签元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>
<div></div>
<div>1</div>
</div>
</div>
<div>
<div>
<div></div>
<div id="2">2</div>
</div>
</div>
<div>
<div>
<div></div>
<div>3</div>
</div>
</div>
</body>
</html>
2、操作标签
（1）文本内容操作
<1> innerText（文本）和innerHTML（全部内容）
### 获取标签的文本
标签.innerText
标签.innerHTML
### 重新赋值
标签.innerText = ""
标签.innerHTML = ""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="1">
dream
<a>
<span>ya</span>
</a>
</div>
</body>
</html>
<2> value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="1">
dream
<a>
<span>ya</span>
</a>
</div>
<input id="2" type="text"/>
<select id="3">
<option value="11">四川</option>
<option value="12">重庆</option>
<option value="13">浙江</option>
</select>
<textarea id="4"></textarea>
</body>
</html>
input：
value获取当前标签中的值！！！
select：
获取选中的value值，selectedIndex获取index！！！
textarea：
value获取当前标签内的值！！！
<3> 搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字" />
<!--新版本的浏览器，不兼容之前的浏览器-->
<input type="text" placeholder="请输入关键字" />
</body>
<script>
//光标在输入框内
function Focus() {
var tag = document.getElementById('1');
var val = tag.value;
if (val == '请输入关键字'){
tag.value = "";
}
}
//光标移出输入框
function Blur() {
var tag = document.getElementById('1');
var val = tag.value;
if (val.length == 0){
tag.value = '请输入关键字';
}
}
</script>
</html>
（2）样式操作
<1> className和classList
对整体操作！！！
tag.className ###整体操作
tag.classList.add('样式名') ###添加指定样式
tag.classList.remove('样式名') ###删除指定样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="1">dream</div>
</body>
</html>
用法：
<div onclick='fun();'>按钮</div>
<script>
function fun(){
}
</script>
eg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 0;
background-color: #b3d271;
opacity: 0.8;
z-index: 8;
}
.c2{
position: fixed;
width: 400px;
height: 200px;
background-color: bisque;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
z-index: 9;
}
</style>
</head>
<body>
<input type="button" value="添加" onclick="ShowHide()">
<div id="1" class="c1 hide"></div>
<div id="2" class="c2 hide">
<input type="button" value="取消" onclick="InHide()"/>
</div>
<script>
function ShowHide() {
document.getElementById('1').classList.remove('hide');
document.getElementById('2').classList.remove('hide');
}
function InHide() {
document.getElementById('1').classList.add('hide');
document.getElementById('2').classList.add('hide');
}
</script>
</body>
</html>
<2> .style
更加细腻的操作！！！
tag.style.方法 = ''；
eg.
.style.color = 'blue';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="1">dream</div>
</body>
</html>
（3）属性操作
attributes ###所有属性
setAttribute(key,value) ###设置属性
removeAttribute(key) ###删除属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="1" style="background-color: #0f9e60;" >dream</div>
</body>
</html>
（4）创建标签，并添加到HTML
二种方法：1、字符串形式 2、对象方式（document.createElement）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="Add1();" value="添加1" />
<input type="button" onclick="Add2();" value="添加2" />
<div id="1">
<p><input type="text" /></p>
</div>
<script>
function Add1() {
//创建标签
var tag = "<p><input type='text' /></p>";
//四个参数：'beforeBegin'、'afterBegin'、'beforeEnd'、'afterEnd'
document.getElementById('1').insertAdjacentHTML('beforeEnd',tag);
}
function Add2() {
//创建标签
var tag = document.createElement('input');
tag.setAttribute('type','text');
tag.style.fontSize = '20px';
//创建p标签并把input放入
var tagP = document.createElement('p');
tagP.appendChild(tag);
document.getElementById('1').appendChild(tagP);
}
</script>
</body>
</html>
（5）提交表单
任何标签通过DOM都可以提交表单！！！
document.getElementById(表单id).submit();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="1" action="http://www.baidu.com">
<input type="text" />
<!--input提交方式-->
<input type="submit" value="提交" />
<!--其他标签通过js提交-->
<a onclick="submitForm();">submit</a>
</form>
<script>
function submitForm() {
document.getElementById('1').submit();
}
</script>
</body>
</html>
（6）checkbox
### 获取值
checkbox对象.checked
### 设置值
checkbox对象.checked = true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 0;
background-color: #b3d271;
opacity: 0.8;
z-index: 8;
}
.c2{
position: fixed;
width: 400px;
height: 200px;
background-color: bisque;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
z-index: 9;
}
</style>
</head>
<body>
<input type="button" value="添加" onclick="ShowHide()">
<input type="button" value="全选" onclick="CheckAll()">
<input type="button" value="取消" onclick="Cancel()">
<input type="button" value="反选" onclick="Reverse()">
<table border="1">
<!--表头-->
<thead>
<tr>
<th>勾选</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<!--内容-->
<tbody id="tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>dream</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>dreamya</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>DM</td>
<td>女</td>
<td>18</td>
</tr>
</tbody>
</table>
<div id="1" class="c1 hide"></div>
<div id="2" class="c2 hide">
<input type="button" value="取消" onclick="InHide()"/>
</div>
<script>
function ShowHide() {
document.getElementById('1').classList.remove('hide');
document.getElementById('2').classList.remove('hide');
}
function InHide() {
document.getElementById('1').classList.add('hide');
document.getElementById('2').classList.add('hide');
}
function CheckAll() {
var tr_list = document.getElementById('tb').children;
for(var i=0;i<tr_list.length;i++){
var list_value = tr_list[i];
var checkbox = list_value.children[0].children[0];
checkbox.checked = true;
}
}
function Cancel() {
var tr_list = document.getElementById('tb').children;
for(var i=0;i<tr_list.length;i++){
var list_value = tr_list[i];
var checkbox = list_value.children[0].children[0];
checkbox.checked = false;
}
}
function Reverse() {
var tr_list = document.getElementById('tb').children;
for(var i=0;i<tr_list.length;i++){
var list_value = tr_list[i];
var checkbox = list_value.children[0].children[0];
if (checkbox.checked == true){
checkbox.checked = false;
}else {
checkbox.checked = true;
}
}
}
</script>
</body>
</html>
目录切换：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
width:60px;
background:green;
color: antiquewhite;
}
</style>
</head>
<body>
<div class="item">
<div id="1" class="header" onclick="ChangeMenu(id);">目录一</div>
<div class="content">
<div>内容一</div>
<div>内容一</div>
<div>内容一</div>
</div>
</div>
<div class="item">
<div id="2" class="header" onclick="ChangeMenu(id);">目录二</div>
<div class="content hide">
<div>内容二</div>
<div>内容二</div>
<div>内容二</div>
</div>
</div>
<div class="item">
<div id="3" class="header" onclick="ChangeMenu(id);">目录三</div>
<div class="content hide">
<div>内容三</div>
<div>内容三</div>
<div>内容三</div>
</div>
</div>
<script>
function ChangeMenu(id) {
var tag = document.getElementsByClassName('item')
for(var i=0;i<tag.length;i++){
document.getElementsByClassName('item')[i].children[1].classList.add('hide');
}
var current_menu = document.getElementById(id)
current_menu.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>
九、其他
1、序列化
JSON.stringify(li) ###序列化
JSON.parse(str) ###反序列化
2、转义
encodeURI() ###转义URI中的字符
decodeURI() ###解码URI中的字符
encodeURIComponent() ###转义URI组件中的字符
decodeURIComponent() ###解码一个URI组件中的字符
escape() ###转义字符串
unescape() ###解码字符串
3、eval
函数计算JavaScript字符串，并把它作为脚本代码来执行。
eval("1+2") ###结果为3
4、时间
var d = new Date()
d.getXXX ###获取
d.setXXX ###设置
5、作用域
- 以函数为作用域（除let），和python类似
- 函数的作用域在函数未调用之前已经创建
- 函数的作用域存在作用域链，并且也是在被调用之前创建
- 函数内函数变量声明提前
（1）验证第一条：
function func() {
if (1==1){
var name = 'dream';
}
console.log(name);
}
func()
（2）验证第二条：
x = "1"
function func() {
var x = '2';
function func1(){
console.log(x);
}
return func1;
}
var res = func()
res()
（3）验证第三条：
x = "1" //最后调用
function func() {
var x = '2'; //在调用
function func1(){
var x = '3'; //最先先调用
console.log(x);
}
func1()
}
func()
（4）验证第四条：
function func() {
console.log(x);
var x = '1';
}
func()
6、面向对象
1、this代指对象(python self)
2、创建对象时，new 函数()
function F(name) {
this.name = name;
}
var obj = new F('dream');
obj.name
原型：
function F(name) {
this.name = name;
}
F.prototype = {
'sayName': function () {
console.log(this.name)
}
}
var obj = new F('dream');
obj.name
obj.sayName()
7、输出框和URL
（1）输出框
console.log ###控制台输出
alert ###弹出框
confirm(提示信息) ###确定框，返回值true和false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="Console" onclick="Fun();"/>
<input type="button" value="Alert" onclick="Fun1();"/>
<input type="button" value="Confirm" onclick="Fun2();"/>
<script>
function Fun() {
//console中能看到输出1
console.log(1);
}
function Fun1() {
alert('dream');
}
function Fun2() {
//确定返回true，取消返回false
var a = confirm('确定要删除嘛？');
console.log(a);
}
</script>
</body>
</html>
（2）刷新跳转URL
location.href ###获取URL
location.href = "url" ###重定向
location.reload() ###重新加载
8、事件
onclick
onblur
onfocus
绑定事件二种方式：
1、直接标签绑定 onclick=’xx()‘
2、先获取Dom对象，然后再绑定
document.getElementById('x').onclick
document.getElementById('x').onfocus
1、第一种绑定方式
<input id='1' type='button' onclick='fun(this)'>
function fun(self){
//self 当前点击的标签
}
2、第二种绑定方式
<input id='1' type='button'>
document.getElementById('1').onclick = function(){
//this 代指当前点击的标签
}
3、第三种绑定方式
<input id="1" type="button" value="按钮" />
var tag = document.getElementById('1');
tag.addEventListener('click',function () {console.log('111');},false);
（1）Dom0写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="200px">
<tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>3</td></tr>
<tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>3</td></tr>
<tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
function t1(n) {
var value = document.getElementsByTagName('tr')[n];
value.style.background = 'red';
}
function t2(n) {
var value = document.getElementsByTagName('tr')[n];
value.style.background = '';
}
</script>
</body>
</html>
（2）Dom1写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="200px">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
var value = document.getElementsByTagName('tr');
var lenValue = value.length;
for(var i=0;i<lenValue;i++){
value[i].onmouseover = function() {
//谁调用此函数等于此this，因为作用域因此要用this
this.style.backgroundColor = 'red';
}
value[i].onmouseout = function() {
//谁调用此函数等于此this
this.style.backgroundColor = '';
}
}
</script>
</body>
</html>
（3）第三种写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="1" type="button" value="按钮" />
<script>
var tag = document.getElementById('1');
tag.addEventListener('click',function () {
console.log('111');
},false);
tag.addEventListener('click',function () {
console.log('222');
},false);
</script>
</body>
</html>
（4）事件之捕捉和冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main {
background-color: red;
width: 200px;
height: 400px;
}
#content {
background-color: blue;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<div id="main">
<div id="content"></div>
</div>
<script>
var myMain = document.getElementById('main');
var myContent = document.getElementById('content');
//点击蓝色区域：false（冒泡）:content、main true（捕捉）：main、content
myMain.addEventListener('click',function () {
console.log('main');
},true);
myContent.addEventListener('click',function () {
console.log('content');
},true);
</script>
</body>
</html>
9、词法分析
active object ===》 AO
1、形式参数
2、局部变量
3、函数声明表达式
eg.
1、形式参数：
AO.age = undefined;
AO.age = 3;
2、局部变量：
AO.age = undefined;
3、函数声明表达式：
AO.age = function()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function t1(age) {
console.log(age);
var age = 24;
console.log(age);
function age(){};
console.log(age);
}
t1(3)
</script>
</body>
</html>
结果：
ƒ age(){}
24
24
扫一扫
855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
