javascript（11.18）
1.导入
<!-- 外部样式-->
<script src="js/tt.js"></script>
2、快速入门
2.1、定义变量
-
局部变量定义都使用let去定义
let i=10;
不区分数据类型，都是number型
- number
var num=1; //所有的变量类型都是var
123 //123 整数
1223.88
1.234e3//1234 科学计数法
-90 //-90负数
NaN//not a number
infinty//表示无限大
-
比较运算符
= 赋值 == 比较，值一样类型不一样，也会判断为true === 绝对等于，必须类型一样值一样，才会是true -
isNaN(34567)//可以判断一个数是不是NaN类型 NaN===NaN //false,NaN与所有的数都不相等，包括它自己 -
尽量避免使用浮点数运算，存在精度问题！
console.log((1/3)===(1-2/3))//false console.log(Math.abs((1/3)-(1-2/3))<0.000000001)//true -
null和undefined
null //空 undefined//未定义的
2.2、对象
每个属性之间用逗号隔开
var person={
name="qingjiang",
age=6,
tags=["web","hi","uw","..."]
}
2.3、条件控制
与java相同
2.4、严格检查模式
必须声明在第一行
'use strict' //预防JavaScript的随意性导致的问题
2.5、严格区分大小写
2.6、调试JavaScript程序
console.log( ) 在浏览器的控制台打印变量
3、数据类型
3.1、字符串
- 转义字符
console.log('a\'') //a'
\n //换行
\t //tab
\u4e2d //中 u####表示Unicode字符
\x41 //ASCII
-
多行字符串编写
//tab键上面的符号 let er= `nihao world javascript ` -
模板字符串
let name="qingjiang"; let msg=`你好呀，${name}` -
字符串不可变
var student="student"
console.log(student.length)
//7
student[0]=1
console.log(student)
//student student[0]=1赋值失败
-
大小写转换
//这里是方法 student.toUpperCase() student.toLowerCase() -
截取字符串(包头不包尾)
student.substring(1)// tudent 从第一个字符串截取到最后一个 student.substring(1,3) //tu
3.2、数组
-
Array可以包含任意的数据类型
-
数组可变，且数组长度可变
-
indexOf，通过元素 获得 下标索引
例如：arr.indexOf(0.2) //1
-
slice（）截取数组的一部分，返回一个新数组，同样包头不包尾
-
push，往数组中压元素，即在数组末尾增加元素
-
pop，弹出数组中的元素
-
unshift（）往头部添加元素
-
shift（）弹出头部的元素
-
排序arr.sort（arr）
-
元素反转reverse（）
-
contat（）字符串拼接
var arr1={1,0.2,3,‘hello’,5.9,6}
console.log(arr1)
VM473:1 (6) [1, 0.2, 3, 'hello', 5.9, 6]
arr1.length=10
10
console.log(arr1)
VM568:1 (10) [1, 0.2, 3, 'hello', 5.9, 6, 空 ã4]//！！！！！数组大小发生改变
arr
(7) [0, 1, 2, 3, 4, 5, 6]0: 01: 12: 23: 34: 45: 56: 6length: 7
arr.pop()
6
arr
(6) [0, 1, 2, 3, 4, 5]//即将6弹出去了
arr.push('a','b')
8
arr
(8) [0, 1, 2, 3, 4, 5, 'a', 'b']
arr.concat([7,8,9])
(11) [0, 1, 2, 3, 4, 5, 'a', 'b', 7, 8, 9]
3.3、对象
3.3.1、创建对象
多个属性之间，逗号隔开
var 对象名={
属性名：属性值，
属性名：属性值，
属性名：属性值
}
3.3.2、动态增删属性
delete person.name;
3.3.3、in, hasOwnProperty()
- 判断属性值是否在这个对象中
'age'in person;//true
'toString' in person; //true,继承思想
- 判断一个属性是否是这个对象自身拥有 的 hasOwnProperty()
person.hasOwnProperty('toString')
flase;
person.hasOwnProperty('age')
true
3.4、流程控制
-
for循环
与java类似
-
forEach循环
let arr=[0,1,2,3,4,5,6,7];
arr.forEach(function (value){
console.log(value)
})
-
for…in 将索引值遍历出来
-
for…of 遍历数组
let arr=[0,1,2,3,4,5,6,7]; // arr.forEach(function (value){ // console.log(value) // }) for (var index in arr ){ if(arr.hasOwnProperty(index)){ console.log(arr[index]) } }
3.5、Map和Set
- map
var map=new Map([['tom','100'],['jack',90],['mary',89]]);
var name=map.get('tom');
console.log(name);
map.set('小丽',99);
- set
var set=new Set([2,3,4,1,1,1])
console.log(set)
VM494:1 Set(4) {2, 3, 4, 1} //会去重
set.delete(3)
true
console.log(set)
VM562:1 Set(3) {2, 4, 1}
set.add(6)
console.log(set.has(3)) //判断是否包含3
3.6、迭代（iterator）
- for…of 遍历map，set
for(var x of map){
console.log(x)
}
VM567:2 (2) ['tom', '100']
VM567:2 (2) ['jack', 90]
VM567:2 (2) ['mary', 89]
VM567:2 (2) ['小丽', 99]
4.函数
4.1、定义函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
4.2、调用函数
abs(10)
参数问题：可以不传参数，返回undefined
-
可以手动抛出异常
if(typeof x!=='number'){ throw 'Not a Number'; }//不存在参数 -
arguments代表传递进来的所有参数，是一个数组
function abs(x){ console.log("x=>"+x); for(var i=0;i<arguments.length;i++){ console.log(arguments[i]); } }结果
abs(1,2,33,45,55,634,2,34,563,45,67) x=>1 1 2 33 45 55 634 ... -
rest参数（arguments升级版）遍历参数
function abs(a,bb,...rest){ console.log("a=>"+a); console.log("bb=>"+bb); console.log(rest); }//会将后续输入的所有数放入一个数组中
4.3、变量的作用域
-
在JavaScript中，var是有作用域的。假设在函数体中声明，则在函数体外不可使用
-
内部函数可以访问外部函数的成员，而外部不可以访问内部
function abs(){ var x=1; function ab(){ var y=x+1; //2 } var z=x+y; //未被定义 } -
在JavaScript中，所有的变量都在最开头定义，便于维护。如果定义在后面，js会自动提升，但不会给它赋值。
-
JavaScript只有一个全局变量，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到 ，就会向外查找，如果在全局范围内都没有找到，就报错
规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，会产生冲突。如何减少冲突
//唯一的全局变量
var kuangapp={};
//定义全局变量
kuangapp.name="kuangshen";
kuangapp.add=funcation(a,b){
return a+b;
}
- ES6引入了常量关键值，const
4.4、方法
方法就是把函数放在对象的里面，对象只有两个东西，属性和方法
let kuangshen={
name:'qingjiang',
brith:2002,
age:function(){
let now=new Date().getFullYear();
return now-this.brith;
}//计算年龄的方法
}
kuangshen.age();//20
apply
this是无法指向的，默认指向调用它的对象，而apply可以控制指向
getAge.apply(kuangshen,[])//this,指向kuangshen,参数为空
5、内部对象
标准对象
typeof 123
'number'
typeof '456'
'string'
typeof[]
'object'
6、操作DOM对象
核心
-
浏览器网页就是一个DOM树形结构
-
要操作DOM节点，就要先获取DOM节点
<div id="father">
<h1>标题</h1>
<p ID="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1=document.getElementsByTagNameNS("h1");
var p1=document.getElementsByClassName("p2");
var p2=document.getElementById("p1");
var father=document.getElementById("father");
var childrens=father.children;//获取父节点下的所有子节点
// father.firstChild 第一个子节点
// father.lastChild 最后一个子节点
6.1、更新节点
id1.innerText='123'//修改文本内容
id1.innerHTML='<strong>123</strong>'//HTML超文本
id1.style.color='red'//CSS样式
6.2、删除节点（有坑！）
步骤：先获取父节点，再通过父节点删除自己
<script>
var self=document.getElementById('p1') //先获取自己
var father=p1.parentElement;//再获取父节点
father.removeChild(p1)//通过父节点删除子节点
//删除是一个动态变化的过程，下标一直在变.可以从2-0的顺序删除，若0-2，先删除0，则1动态变化成下标0，再删除1就报错
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
6.3、插入节点
追加
<body>
<p id="js">javascript</p>
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
<script>
var ut= document.getElementById('js')
var ty= document.getElementById('list')
ty.append(ut)
</script>
</body>
效果如下：
javascript javase
javase -----------------------------> javaee
javaee javame
javame javascript
6.4、创建节点
- 普通写法
<body>
<p id="js">javascript</p>
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
<script>
var ut= document.getElementById('js')
var ty= document.getElementById('list')
ty.append(ut)
var p= document.createElement('p')//创建一个p标签
p.id='new'
p.innerText='我是通过创建节点新加的'
list.append(p)
</script>
</body>
效果如下：
javase
javaee
javame
javascript
我是通过创建节点新加的
- 万能写法
var myScript= document.createElement('script')//创建一个script标签
myScript.setAttribute('key','value')//万能写法
so，上面的普通写法也能写成这样
var p= document.createElement('p')//创建一个p标签
p.setAttribute('id','new')
7、操作表单
表单：下拉框，单选框，多选框，密码框，隐藏框…
-
得到输入框的值
<form action="post"> <span>用户名：</span> <input type="text" id="username"> </form> <script> var tty = document.getElementById('username'); //得到输入框的值 tty.value //修改输入框的值 ttyy.value='123456' </script> -
注意，对于单选框或者多选框，我们无法拿到具体的值，只能通过true或者FALSE判断用户选了哪一个
<p> <span>性别：</span> <input type="radio" name="sex" id="boy">男 <input type="radio" name="sex" id="girl">女 </p> <script> let boy=document.getElementById('boy') let girl=document.getElementById('girl') //判断，结果为true，则被选中。 boy.checked </script>
提交表单验证
md5验证网址https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<title>Title</title>
</head>
<body>
<!--
表单绑定提交事件
onsubmit=绑定一个提交检测的函数（结果为true或者FALSE），onsubmit=" return aaa()"
-->
<form action="#" method="post" onsubmit=" return aaa()">
<p><span>用户名：</span><input type="text" name="username" id="username"></p>
<p><span>密码：</span><input type="text" id="input-password"></p>
<!--隐藏密码框-->
<input type="hidden" id="md5-password" name="password">
<input type="submit">
</form>
<script>
function aaa(){
var uname = document.getElementById("username");
var pwd = document.getElementById("input-password");
var md5pwd = document.getElementById("md5-password");
md5pwd.value=md5(pwd.value)
//这里可以判断是否提交，true则提交
return true;
}
</script>
</body>
8、jQuery
8.1、引入
//CDN引入
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
8.2、初识
使用公式：$(selector).action()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
$('#test-jquery').click(function (){
alert('hello,jquery!')
})
</script>
</body>
</html>
其他
登录网站自学，学会读源码
小技巧：
1.如何巩固JS（源码之家，小游戏）
2.如何巩固HTML，CSS（扒网站，修改看效果)
1865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
