一、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>
九、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>