一、JS基础语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1JS基础语法</title>
</head>
<body>
<!--由于JS是基于标签的操作,需要等待标签加载完毕在执行JS,JS代码放到body的最底部-->
<script type="text/javascript">
// var 声明变量
var a = 100;
//alert弹出警告框
alert(a);
//console.log()控制台输出
console.log(a);
// JS行结尾需要加分号
// 单行注释
/*
多行注释1
多行注释2
*/
// prompt()用户输入 用户不管输入什么内容,都是字符串
var msg = prompt("今天天气如何?");
console.log(msg);
</script>
</body>
</html>
二、JS基础数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2JS基础数据类型</title>
</head>
<body>
<!--由于JS是基于标签的操作,需要等待标签加载完毕在执行JS,JS代码放到body的最底部-->
<script type="text/javascript">
// 数值类型number
var a = 123;
// 查看数据类型
console.log(typeof a);
var a1 = 5/0;
console.log(typeof a1); // Infinity 无限大. number类型
// 字符串类型string
var b = "abc";
console.log(typeof b);
var c = ""; // 空字符串也是string类型
console.log(typeof c);
// 布尔boolean
var b1 = false;
console.log(typeof b1);
// null
var c1 = null; //空对象. object
console.log(c1);
// undefined
var d1; //表示变量未定义
console.log(typeof d1)
</script>
</body>
</html>
三、JS字符串拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2JS字符串拼和数据类型转换</title>
</head>
<body>
<!--由于JS是基于标签的操作,需要等待标签加载完毕在执行JS,JS代码放到body的最底部-->
<script type="text/javascript">
// 字符串拼接
var a = "我是";
var b = "好人!";
console.log(a + b); // 我是好人!
var c = "1";
var d = 2;
console.log(c + d); // 12
var e = 1;
var f = 2;
console.log(e + f); // 3
// 如果加号两边都是数值,此时是加。否则,就是连字符(用来连接字符串)。
var a1 = "3";
var a2 = 2;
console.log(a1 - a2); // 1
// 效果:(注意,字符串 - 数值 = 数值)
</script>
</body>
</html>
四、JS运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4JS运算符</title>
</head>
<body>
<!--由于JS是基于标签的操作,需要等待标签加载完毕在执行JS,JS代码放到body的最底部-->
<script type="text/javascript">
// 赋值运算符
// 算数运算符
// 比较运算符
// 逻辑运算符: 逻辑与&&、逻辑或||
// 和python不同之处
var a = "123";
var b = 123;
console.log(a == b); // true == 比较数值,不比较类型
console.log(a === b); // false === 真等于比较类型和数值
</script>
</body>
</html>
五、JS数据类型转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5JS数据类型转换</title>
</head>
<body>
<!--由于JS是基于标签的操作,需要等待标签加载完毕在执行JS,JS代码放到body的最底部-->
<script type="text/javascript">
// 数据类型转换
// string --> number
var strNum = "123";
console.log(parseInt(strNum)); // 字符串转换成number类型 Int是整形
var strNum1 = "123.67";
console.log(parseInt(strNum1)); // 字符串转换成number类型 Int是整形 如果是小数则取整数部分,小数不四舍五入
console.log(parseInt("2018你真帅!!")); // 带有自动净化的功能;只保留字符串最开头的数字,后面的中文自动消失
console.log(parseFloat(strNum1)); // 字符串转换成number类型 float是浮点类型
// number --> string
var num1 = 123;
var numStr = num1.toString();
console.log(numStr);
// --> boolean
var b1 = '123';
var b2 = 0;
var b3 = -123
var b4 = Infinity;
var b5 = NaN;
var b6; //undefined
var b7 = null;
console.log(Boolean(b1))
</script>
</body>
</html>
六、JS流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6JS流程控制</title>
</head>
<body>
<!--由于JS是基于标签的操作,需要等待标签加载完毕在执行JS,JS代码放到body的最底部-->
<script type="text/javascript">
// if...else if...else
// 示例1
// var age = 20;
// if (age > 18) {
// console.log("大吉大利,今晚吃鸡")
// }
// 示例2
// var num1 = parseInt(prompt("猜数字?"));
// var num = 18;
// if (num1 < num) {
// console.log("太小了")
// }
// else if (num1 === num) {
// console.log("猜对了")
// }
// else {
// console.log("太大了")
// }
// switch
// var gameScore = 'better';
// switch (gameScore) {
// //case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break,那么直到该程序遇到下一个break停止
// case 'good':
// console.log('玩的很好');
// //break表示退出
// break;
// case 'better':
// console.log('玩的老牛逼了');
// break;
// case 'best':
// console.log('恭喜你 吃鸡成功');
// break;
// default:
// console.log('很遗憾')
// }
// while循环
/*
1.初始化循环变量
2.判断循环条件
3.更新循环变量
*/
var i = 1;
while (i < 10){
console.log(i);
i++
}
// do_while 不管有没有满足while中的条件do里面的代码都会走一次
var num = 1;
do{
console.log(num);
num ++
}while (num < 10);
// for
for(var num1 = 1; num1 < 10; num1++){
console.log(num1);
}
</script>
</body>
</html>
七、JS流程控制练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7JS流程控制练习</title>
</head>
<body>
<!--由于JS是基于标签的操作,需要等待标签加载完毕在执行JS,JS代码放到body的最底部-->
<script type="text/javascript">
// 1-100之间所有数之和
var sum = 0;
for (var i = 1;i<=100;i++){
sum += i;
}
console.log(sum);
// 1-100之间所有的偶数
for (var i1 = 1;i1<=100;i1++){
if (i1 % 2 === 0){
console.log(i1)
}
}
// 在浏览器中输出直角三角形
for (var line = 1; line <= 10; line++){
for (var chr = 1;chr <= line;chr++){
document.write("*")
}
document.write("<br>")
}
</script>
</body>
</html>
八、JS常用内置对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8JS常用内置对象</title>
</head>
<body>
<!--由于JS是基于标签的操作,需要等待标签加载完毕在执行JS,JS代码放到body的最底部-->
<script type="text/javascript">
// 数组Array
var colors = ['red','color','yellow'];
// 增
colors[3] = "blue"; // python不支持这种添加方式
var ret = colors.push("AAA"); // 往数组的最后添加一个元素,并返回新的长度
var ret1 = colors.unshift("CCC"); // 往数组的前面添加一个元素,并返回新的长度
console.log(ret);
console.log(ret1);
console.log(colors);
// 删
console.log(colors.pop()); // 移除最后一个元素 并返回删除的元素
console.log(colors.shift()); // 移除第一个元素 并返回删除的元素
// 改
colors[0] = "DDD";
// 查
console.log(colors[0]);
console.log(colors.indexOf("DDD")); // 根据元素找索引,找不到返回-1
console.log(colors.slice(0,3)); // 切片查找
// 其他
var newC = colors.concat([1,2,3]); // 生成一个新的数组
console.log(newC);
console.log(colors.join("_")); // 把数组元素拼接成字符串
console.log(colors.reverse()); // 反转数组
console.log(colors.length); // 返回数组的长度
console.log(colors.sort()); // 注意不是根据数值大小进行排序
console.log(Array.isArray(colors)); // 判断是不是数组
// string 字符串
var s = "ABC123";
console.log(s.charAt(0)); // 根据索引查元素
console.log(s.concat("DDDDDD","CCCCCC")); // 拼接字符串
var newS = s.replace("A","a");
console.log(newS); // 替换字符串
console.log(s.search("B")); // 查找元素,找到返回索引,找不到返回-1
console.log(s.slice(0,3)); // 切片查找
console.log(s.split("1")); // 指定字符串分割字符串
console.log(s.toLowerCase()); // 大写变小写
console.log(s.toUpperCase()); // 小写变大写
// Date
//创建了一个date对象
var myDate = new Date();
console.log(myDate.getDate()); // 返回日期 1-31
console.log(Date()); // 返回详细的时间
console.log(myDate.getMonth()); // 返回月份 0-11
console.log(myDate.getFullYear()); // 返回年
console.log(myDate.getDay()); //返回星期几 0-6
console.log(myDate.getHours()); // 返回时 0-23
console.log(myDate.getMinutes()); // 返回分 0-59
console.log(myDate.getSeconds()); // 返回秒 0-59
console.log(myDate.toLocaleString()); // 2018/5/27 下午10:36:23
// Math
console.log(Math.floor(12.3)); // 向下取整,地板函数
console.log(Math.ceil(12.9)); // 向上取整,天花板函数
console.log(Math.max(1,2,3,4,5)); // 求最大值
console.log(Math.min(1,2,3,4,5)); // 求最小值
console.log(Math.random()); // 0-1之间的随机数
// 求0 - 100 之间的随机数 min+Math.random()*(max-min)
console.log(parseInt(0 + Math.random()*(100-0)));
</script>
</body>
</html>
数组:
字符串:
Date日期对象:
Math内置对象:
九、JS函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>9函数</title>
</head>
<body>
<script type="text/javascript">
// 函数:就是将一些语句进行封装,然后通过调用的形式,执行这些语句。
// 函数的作用:
// 将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重复劳动。
// 简化编程,让编程模块化。
// 定义函数
function foo() {
console.log("Hello word")
}
foo();
// 匿名函数
var fun = function () {
console.log("我是匿名函数")
};
fun();
// 函数的返回值
function fun2() {
return "我是返回值"
}
console.log(fun()); // 没有返回值返回undefined
console.log(fun2());
// 函数参数
function fun3(a,b) {
console.log(a);
console.log(b);
console.log(arguments);
}
fun3(1,2,3,4,5,6);
</script>
</body>
</html>
十、DOM基本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10JSDOM基本操作</title>
<style type="text/css">
</style>
</head>
<body>
<div class="father">
<div class="c1">
<div class="son">AAAA</div>
</div>
</div>
<span id="d1"></span>
<img src="" alt="">
<script type="text/javascript">
// 获取标签的3种方式
// 根据ID获取,返回一个元素
var spanEle = document.getElementById("d1");
console.log(spanEle);
// 根据类名获取,返回一个数组
var divEle = document.getElementsByClassName("c1")[0];
console.log(divEle);
// 根据标签名获取,返回一个数组
var imgEle = document.getElementsByTagName("img")[0];
console.log(imgEle);
// 根据节点找父节点 父节点只能有一个
var divFatherEle = divEle.parentNode;
console.log(divFatherEle);
// 根据节点找子节点 子节点可以有多个
var divSonEle = divEle.children;
console.log(divSonEle[0]);
// 创建标签
var a1Ele = document.createElement("a");
var a2Ele = document.createElement("a");
console.log(a1Ele);
// 添加标签
divEle.appendChild(a1Ele); // 父节点的最后插入一个新的子节点。
divEle.insertBefore(a2Ele,divSonEle[0]); // 在参考节点前插入一个新的节点
// 删除节点
divEle.removeChild(a1Ele); // 通过父节点删除子节点
a2Ele.parentNode.removeChild(a2Ele); // 可以直接删除指定节点
// 复制节点
var newDivEle = divEle.cloneNode(); // 复制节点,不包括子节点
divEle.appendChild(newDivEle); // 插入复制的节点
var new2DivEle = divEle.cloneNode(true); // 复制节点及子节点
divEle.appendChild(new2DivEle); // 插入复制的节点
// 设置节点的属性
console.log(divEle.className); // 获取节点的类名
console.log(divEle.getAttribute("id")); // 获取节点的ID
imgEle.setAttribute("src", "./2.jpg"); // 设置节点属性
imgEle.src = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=72323776,1263084726&fm=27&gp=0.jpg"; // 设置节点属性
// 删除节点属性
imgEle.removeAttribute("src");
// 获取标签的所有内容
console.log(divEle.innerHTML);
// 获取标签的文本
console.log(divEle.innerText);
</script>
</body>
</html>
十一、DOM事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
#box{
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
#content{
position: relative;
top: 150px;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
color: red;
background-color: #fff;
margin: auto;
}
#span1{
position: absolute;
background-color: red;
top: 0;
right: 0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<button id="btn">弹出</button>
</body>
<script type="text/javascript">
//获取dom元素 1.获取事件源
var oBtn = document.getElementById('btn');
//创建弹出模态框的相关DOM对象
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');
// 设置属性
oDiv.id = 'box';
oP.id = 'content';
oP.innerHTML = '模态框成功弹出';
oSpan.innerHTML = 'X';
oSpan.id = 'span1';
// 追加元素
oDiv.appendChild(oP);
oP.appendChild(oSpan);
// 点击弹出按钮 弹出模态框
oBtn.onclick = function(){
//动态的添加到body中一个div
this.parentNode.insertBefore(oDiv,btn)
};
// 点击X 关闭模态框
oSpan.onclick = function(){
// 移除oDiv元素
oDiv.parentNode.removeChild(oDiv)
}
</script>
</html>
十一、JS入口函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 等待页面加载完毕以后执行JS代码
window.onload = function () {
// JS代码
}
</script>
</head>
<body>
</body>
</html>
十二、var和let以及const区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
// var
console.log(name); // 输出结果:undefined
var name = "spf"; // var声明的变量 存在变量提升。相当于第一步:var name; 第二步:name = "spf";
console.log(name); // 输出结果:spf
// 对比var 和 let
function foo1() {
var name = "spf";
}
console.log(name); // 输出结果:spf
function foo2() {
let name1 = "spf"; // 声明的变量 是块级作用域 用于解决for循环绑定事件操作
}
console.log(name1); // 报错Uncaught ReferenceError: name1 is not defined at window.onload
// const 声明的是常量 一旦声明变量 不可改变
const a = 1;
a = 2; //直接会报错 Uncaught TypeError: Assignment to constant variable.
};
</script>
</head>
<body>
</body>
</html>
十三、JS创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
// 1.字面量方式创建
var person = {
name:"张三", // 对象属性
age:18, // // 对象属性
fav:function(){
alert(name);
} // 对象方法
};
// 2.工厂模式创建对象
function CreateUser(name,age) {
this.name = name;
this.age = age;
this.alertName = function () {
console.log(this.name);
};
return this;
}
var spf = new CreateUser("spf",19);
spf.alertName();
// 3.够构造函数模式创建对象
function CreateStuden(name,age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.alertName = function () {
console.log(this.name);
};
return obj
}
var wxx = CreateStuden("wxx",19);
wxx.alertName();
// 4.原型模式创建对象
function fun1(name,age) {
this.name = name;
this.age = age;
return this;
}
function fun2(name,age) {
this.name = name;
this.age = age;
return this;
}
// 给两个对象绑定相同的方法
fun1.prototype.showName = function () {
alert(this.name);
};
fun2.prototype.showName = function () {
alert(this.name);
};
// var wxx = new fun1("wxx",18);
// console.log(wxx.name);
// wxx.showName();
}
</script>
</head>
<body>
</body>
</html>
十四、定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
// 定时器 异步运行
function hello(){
alert("hello");
}
//setTimeout
var t1 = window.setTimeout(hello,2000); // 2000 = 2秒 2秒后执行,只会执行一次
window.clearTimeout(t1); //去掉定时器
// setInterval
var t2 = window.setInterval(hello,3000); // 循环执行,每个3秒执行一次
window.clearTimeout(t2); //去掉定时器
}
</script>
</head>
<body>
</body>
</html>
十五、BOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
// 弹出对话框
// alert(); //不同浏览器中的外观是不一样的
// confirm(); //兼容不好
// prompt(); //不推荐使用
// 打开窗口
// window.open(url,target)
// url:要打开的地址
// target:新窗口的位置。可以是:_blank 、_self、 _parent 父框架。
// window.open("http://www.baidu.com")
// location对象
// href:跳转
// hash 返回url中#后面的内容,包含#
// host 主机名,包括端口
// hostname 主机名
// pathname url中的路径部分
// protocol 协议 一般是http、https
// search 查询字符串
// location.reload() 刷新整个网页
// location.href = "http://www.baidu.com";
// console.log(location);
// navigator对象
// window.navigator 的一些属性可以获取客户端的一些信息。
// userAgent:系统,浏览器
// platform:浏览器支持的系统,win/mac/linux
// console.log(navigator.userAgent);
// console.log(navigator.platform);
}
</script>
</head>
<body>
</body>
</html>
失忆