代码收藏家 Python django/flask Web开发入门（五）——JavaScript入门
今日学习内容：JavaScript入门
1.初识JavaScript
是一门编程语言，可以让程序实现一些动态效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width: 200px;
border: 2px solid red;
}
.header{
background-color: gold;
padding: 20px 10px;
}
</style>
</head>
<body>
<div class="menus">
<div class="header" onclick="myFun()">大标题</div>
<div class="item">内容</div>
</div>
<script type="text/javascript">
function myFun(){
confirm("是否要继续？")
}
</script>
</body>
</html>
2.js存放的位置
1.(html)页面中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width: 200px;
border: 2px solid red;
}
.header{
background-color: gold;
padding: 20px 10px;
}
</style>
<script>
// 位置1 先执行
</script>
</head>
<body>
<div class="menus">
<div class="header" onclick="myFun()">大标题</div>
<div class="item">内容</div>
</div>
<script type="text/javascript">
function myFun(){
confirm("是否要继续？")
// 位置2 后执行 推荐放在这个位置
}
</script>
</body>
</html>
2.js文件
导入：
<script src="111.js"></script> # 建议放在位置2
3.js的语法
（1）变量定义
在网页中用script标签定义一段js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width: 200px;
border: 2px solid red;
}
.header{
background-color: gold;
padding: 20px 10px;
}
</style>
<script src="111.js"></script>
</head>
<body>
<div class="menus">
<div class="header" onclick="myFun()">大标题</div>
<div class="item">内容</div>
</div>
<script src="111.js"></script>
<script type="text/javascript">
var name="hello world!" //定义
console.log(name)
</script>
</body>
</html>
上述代码除了显示html页面之外，会在网页的console中输出一个name变量的内容，效果如下：
（2）字符串类型
声明一个字符串：
<script type="text/javascript">
var name="中国联通";
var v1 = name.length; //name字符串的长度
var v2 = name[0]; //中
var v3 = name.trim() //去除空白
var v4 = name.substring(0,2) //前取后不取 中国
</script>
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="text">欢迎中国联通领导高倩莅临指导</span>
<script type="text/javascript">
function show(){
//html中找到某个标签并获取它的内容（DOM）
var tag = document.getElementById("text");
var dataString = tag.innerText;
console.log(dataString);
//动态起来，把文本中的第一个字符放在字符串的最后面
var firstChar = dataString[0];
var otherString = dataString.substring(1, dataString.length);
var newText = otherString + firstChar;
console.log(newText);
// 在html标签中更新内容
tag.innerText = newText;
}
//JavaScript中的定时器
setInterval(show, 1000) //每一秒执行一次show函数
</script>
</body>
</html>
上述案例实现“欢迎中国联通领导高倩莅临指导”在网页中滚动播放。
（3）数组类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var v1 = [11,22,33,44]; //数组
var v2 = Array([11,22,33,44]); //同上
v1[0];
v2[1] = "高倩"; //设置v2数组索引为1的值为高倩 [11,“高倩”,33,44]
v1.push("联通"); //尾部追加 [11,22,33,44,"联通"]
v1.unshift("移动"); //首部追加 ["移动",11,22,33,44]
v1.splice(1,0,"电信"); //splice(索引，0，元素）在索引处插入 [11,"电信",22,33,44]
v1.pop(); // 尾部删除
v1.shift(); //首部删除
v1.splice(2,1) ; //splice(索引，1）删除索引处的元素，[11,22,44]
//数组的循环
for (var index in v1){
// index是v1的索引0，1，2，3......获取数据用v1[index]
// 等同于 for (var i=0;i<v1.length;i++){}
}
</script>
</body>
</html>
案例二：动态生成页面数据
使用javascript的document将数组放到ul标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="city">
</ul>
<script>
var cityList=["北京", "上海", "深圳"];
for(var idx in cityList){
var text = cityList[idx];
//创建了一个li标签，没有内容
var tag = document.createElement("li");
//在li标签中写入内容
tag.innerText = text;
//li标签添加到id=city的标签里面
var parentTag = document.getElementById("city"); //找到标签为city的tag
parentTag.appendChild(tag); //parent标签里面增加child，就是tag
}
</script>
</body>
</html>
效果：
（4）对象（python中的字典dict）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
info = {
"name": "张三",
"age": 18
}
//或
info1 = {
name: "李四",
age: 19
}
//操作
var x1 = info.age; //读取info中age的值 18
info.name = "王五"; //设置info中name的值等于“王五”
var x2 = info1["age"]; //读取info1中age的值 19
info1["name"] = "赵六"; //设置info1中name的值等于“赵六”
delete info["age"]; //删除info中age键值对
for(var key in info){
// key=name/age data=info[key]获取key对应的值
}
</script>
</body>
</html>
案例三：用js自动生成tr标签，读取对象填充网页表格数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="body"></tbody>
</table>
<script type="text/javascript">
var dataList = [
{id: "1", name:"张三", age:18},
{id: "2", name:"李四", age:68},
{id: "3", name:"王五", age:48},
{id: "4", name:"赵六", age:38}
]
for(var idx in dataList){
info = dataList[idx];
var tr = document.createElement("tr");
for(var key in info){
var text = info[key];
var td = document.createElement("td");
td.innerText = text;
tr.appendChild(td)
}
var body = document.getElementById("body");
body.appendChild(tr);
}
</script>
</body>
</html>
效果：
（5）条件语句和函数 （需要注意格式），会写python代码的这里就不再阐述了。可以搜索其他教程。
4.DOM模块
是javascript的一个模块，可以对html界面中的标签进行操作。
（1）功能回顾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
// 获取网页中id=xx的标签
var tag = document.getElementById("xx");
//读取tag中的内容；
tag.innerText;
//设置tag中的内容（id=xx）
tag.innerText = "test";
//创建类型为div的标签
var tag1 = document.createElement("div");
</script>
</body>
</html>
（2）事件
单击事件——添加固定的值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city"></ul>
<script type="text/javascript">
function addCityInfo(){
var cityTag = document.createElement("li");
cityTag.innerText = "北京";
var parentTag = document.getElementById("city");
parentTag.appendChild(cityTag);
}
</script>
</body>
</html>
每次点击按钮都会添加一个li标签，增加固定的内容“北京”，效果：
单击事件——添加用户输入的值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="textInput">
<input type="button" value="点击添加" onclick="addText()">
<ul id="tianjia"></ul>
<script type="text/javascript">
function addText(){
//找到输入框标签
var textTag = document.getElementById("textInput");
//获取标签中的值
var newString = textTag.value;
//判断用户输入是否为空
if (newString.length>0){
//创建li标签
var liTag = document.createElement("li");
//将输入值加到标签中
liTag.innerText = newString;
//将li标签加入到ul标签中
var parentTag = document.getElementById("tianjia");
parentTag.appendChild(liTag);
//添加后将文本框置空
textTag.value = "";
}else {
alert("输入值不能为空！")
}
}
</script>
</body>
</html>
实现单击添加按钮可以实现添加用户输入的值，不能为空，否则报错提示。
5.第三方库JQuery
jQuery是一个javaScript第三方模块。基于javaScript，自己开发一个功能；现成的工具，依赖jQuery，例如bootstrap动态效果。
（1）初识jquery
运用jquery实现标签中内容的读取和修改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="txt">中国联通</h1>
<script src="jquery-3.71.min.js"></script>
<script type="text/javascript">
//利用jquery中的功能实现某些效果
$("#txt").text("广西联通");
</script>
</body>
</html>
（2）寻找标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="txt" class="c1">中国移动</h1>
<div class="c1">中国联通</div>
<h1 class="c1">中国电信</h1>
<div>
<div>
<div>北京</div>
<div id="shanghai">上海</div>
<div>广州</div>
<div>天津</div>
</div>
<div>
<div>陕西</div>
<div id="shanxi">山西
<div>孩子1</div>
<div class="haizi2">孩子2</div>
<div>孩子3</div>
</div>
<div>四川</div>
<div>西藏</div>
</div>
</div>
<script type="text/javascript">
//1.直接寻找
$("#txt") //基于id选择
$(".c1") //基于类选择，所有的h1标签都会被选中
$("div") //标签选择器，选中所有的div
$(".c1 .c2 a") //层级选择器，找class=c1下面class=c2里的a标签
$("#c1, #c2, li") //多选择器，找到符合c1和c2和li标签的
$("input[name='n1']") //属性选择器,找到input类里面name等于n1的
//2.间接寻找（找兄弟）
$("#shanghai") //找到上海这个div
$("#shanghai").prev() //找到上海的前一个div 北京
$("#shanghai").next() //找到上海的后一个div 广州
$("#shanghai").next().next() //找到上海的后一个后一个div 天津
$("#shanghai").siblings() //找到所有的兄弟
//3.间接寻找（找父子）
$("#shanxi") //找到山西的div
$("#shanxi").parent() //父亲div
$("#shanxi").parent().parent() //父亲div的父亲div
$("#shanxi").children() //所有的孩子
$("#shanxi").children(".haizi2") //所有的孩子中寻找class=haizi2的
$("#shanxi").find(".haizi2") //在所有子孙中寻找class=haizi2的标签
$("#shanxi").find("div") //在所有子孙中寻找div标签
</script>
</body>
</html>
案例四：菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width: 200px;
height: 800px;
border: 2px solid red;
}
.menus .header{
background-color: gold;
padding: 10px 5px; /* 上下10px；左右5px */
border-bottom: 1px dotted #dddddd;
cursor: pointer;
}
.menus .content a{
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menus">
<div class="header" onclick="clickMe(this);">上海</div> <!--this代表当前点击的标签 -->
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
<div class="header" onclick="clickMe(this);">北京</div>
<div class="content hide">
<a>海淀区</a>
<a>朝阳区</a>
<a>大兴区</a>
<a>昌平区</a>
</div>
</div>
<script src="jquery-3.71.min.js"></script>
<script>
function clickMe(self){
//self代表当前点击的标签
var hasHide = $(self).next().hasClass("hide");
if (hasHide){
$(self).next().removeClass("hide");
}else{
$(self).next().addClass("hide");
}
}
</script>
</body>
</html>
案例进阶：只允许当前一个header下面的content处于展开状态：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width: 200px;
height: 800px;
border: 2px solid red;
}
.menus .header{
background-color: gold;
padding: 10px 5px; /* 上下10px；左右5px */
border-bottom: 1px dotted #dddddd;
cursor: pointer;
}
.menus .content a{
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menus">
<div class="item">
<div class="header" onclick="clickMe(this);">上海</div> <!--this代表当前点击的标签 -->
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">上海</div> <!--this代表当前点击的标签 -->
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">上海</div> <!--this代表当前点击的标签 -->
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">上海</div> <!--this代表当前点击的标签 -->
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
</div>
<script src="jquery-3.71.min.js"></script>
<script>
function clickMe(self){
//让自己的下一个div显示出来
$(self).next().removeClass("hide");
//找到所有父亲的兄弟标签中class=content的标签，增加hide，有的不会重复添加
$(self).parent().siblings().find(".content").addClass("hide");
}
</script>
</body>
</html>
（3）值的操作
jquery中值的基础操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="c1">内容</div>
<input type="text" id="c2"/>
<script src="jquery-3.71.min.js"></script>
<script>
$("#c1").text //获取文本内容
$("#c1").text("休息") //设置文本内容
$("#c2").val() //获取用户输入的值
$("#c2").val("哈哈哈") //设置值
</script>
</body>
</html>
案例五：
获取用户输入的值并创建li显示在下方：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="txtUser" placeholder="用户名">
<input type="text" id="txtEmail" placeholder="邮箱">
<input type="button" value="提交" onclick="getInfo()">
<ul id="view"></ul>
<script src="jquery-3.71.min.js"></script>
<script>
function getInfo(){
//获取用户输入的用户名和密码
var username = $("#txtUser").val();
var email = $("#txtEmail").val();
var dataString = username + "-" + email;
//创建标签写入内容
var newLi = $("<li>").text(dataString);
$("#view").append(newLi);
}
</script>
</body>
</html>
效果：
（4）事件绑定
批量绑定事件-点击并获取文本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="jquery-3.71.min.js"></script>
<script>
$("li").click(function (){
//点击li标签就会自动执行这个函数
// $(this) 是指当前点击的标签
var text = $(this).text()
console.log(text)
})
</script>
</body>
</html>
批量绑定事件-点击删除标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="jquery-3.71.min.js"></script>
<script>
$("li").click(function (){
//点击li标签就会自动执行这个函数
// $(this) 是指当前点击的标签
$(this).remove(); //点谁删除谁
})
</script>
</body>
</html>
当页面框架加载完成之后执行代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="jquery-3.71.min.js"></script>
<script>
$(function(){
//框架加载完成之后就执行
$("li").click(function (){
//点击li标签就会自动执行这个函数
// $(this) 是指当前点击的标签
$(this).remove();
})
})
</script>
</body>
</html>
案例六：表格操作
以下案例实现删除表格，点击哪一行就删除哪一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>id</th>
<th>标题</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>内容1</td>
<td>
<input type="button" value="删除">
</td>
</tr>
<tr>
<td>2</td>
<td>内容2</td>
<td>
<input type="button" value="删除">
</td>
</tr>
<tr>
<td>3</td>
<td>内容3</td>
<td>
<input type="button" value="删除">
</td>
</tr>
<tr>
<td>4</td>
<td>内容4</td>
<td>
<input type="button" value="删除">
</td>
</tr>
</tbody>
</table>
<script src="jquery-3.71.min.js"></script>
<script>
$("#tbody, input").click(function(){
$(this).parent().parent().remove();
})
</script>
</body>
</html>
作者：Oman_superman
