javaScript基础知识
1、javaScript
- javaScript,一门编程语言，浏览器是其解释器，实现动态效果
- DOM、BOM：
- 相当于编程语言的内置模块。
- 例如：Python中的re、random、time、json模块等
- jQuery
- 相当于编程语言的第三方模块，例如requests，openpyxl
2、js位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width: 200px;
border: 1px solid red;
}
.menus .header{
background-color: gold;
padding: 20px 10px;
}
</style>
<!-- 可选择位置一、CSS标签下面-->
<script type="text/javascript">
// 编写js代码
</script>
</head>
<body>
<div class="menus">
<div class="header" onclick="myfunc()">大标题</div>
<div class="item">内容</div>
</div>
<!--位置二-->
<script type="text/javascript">
// function myfunc(){
// // 出现弹窗
// // alert("你好")
// confirm("是否要继续？")
// }
</script>
</body>
</html>
3、变量
<script type="text/javascript">
//定义变量
var name= "ttg";
// 在浏览器检查中的console模块查看输出结果
console.log(name)
</script>
4、字符串类型
<script type="text/javascript">
//字符串声明
var name= "ttg";
var name = String(ttg);
// 常见功能
// 获取字符串长度
var v1 = name.length;
var v2 = name[0];//通过索引获取字符
name.charAt(3);//通过索引获取字符
//去除空白
var v3 = name.trim();
//前取后不取
var v4 = name.substring(0,2);
</script>
5、js案例——跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus {
width: 200px;
border: 1px solid red;
}
.menus .header {
background-color: gold;
padding: 20px 10px;
}
</style>
</head>
<body>
<span id="txt">欢迎访问我的js</span>
<script type="text/javascript">
function show() {
//从html中找到某个标签并获取内容。需要使用DOM
var tag = document.getElementById("txt");
//获取内部文本，得到字符串
var dataString = tag.innerText
//动态展示，把文本的第一个字符获取，然后放在字符串最后
var firstChar = dataString[0];
var otherString = dataString.substring(1, dataString.length);
var newText = otherString + firstChar;
//在HTML中更新内容
tag.innerText = newText;
console.log(newText)
}
//js中的定时器，实现定时执行某个函数
// 每1000ms执行一次show函数
setInterval(show,1000);
</script>
</body>
</html>
6、数组
<script type="text/javascript">
//定义数组，类似于python中的列表
var v1 = [11,22,33,44]
var v2 = Array([11,22,33,44])
//对数组的操作
var x = v1[0];//可以通过索引，获取值、改变值
//增加值,在尾部进行追加，类似于python中的append
v1.push(5)
//在前面追加值
v1.unshift(6)
//在指定位置进行插入：v1.splice(1,0,元素),第一个位置为索引位置，第二个默认为0
v1.splice(1,0,"你好")//[11,"你好",22,33,44]
v1.pop();// 尾部删除元素
v1.shift();//头部删除
v1.splice(2,1);//把索引等于2的元素删除：[11,22,44]
//循环操作
for(var idx in v1){//循环v1中的索引，不是值!!!
//idx=0/1/2/3 data = v1[idx]
}
for(var i = 0; i < v1.length;i++){//类似于c++中的循环
}
//支持continue;break
</script>
数组案例
<body>
<ul id = "city">
<!-- <li>背景</li>-->
</ul>
<script type="text/javascript">
//发送网络请求，获取数据
var citylist = ["北京","上海","深圳"];//动态生成
for(var idx in citylist){
var text = citylist[idx];
//文本添加到标签中
var tag = document.createElement("li");//创建一个li标签
//在li标签中写入内容
tag.innerText = text;
//添加到id=city标签中
var parenttag = document.getElementById("city");
parenttag.appendChild(tag);
}
</script>
</body>
7、对象（类似于python中的字典）
<script type="text/javascript">
//字典定义值的两种方式
info = {
"name":"nnn"
"age":18
}
info = {
name:"nnn"
age:18
}
info.age //获取年龄
info.name="uuu"//修改数据
info["name"] = "uuu"//修改数据
delete info(age) //删除元素
for(var key in info){ //遍历字典
//key = name/age data = info[key]
}
</script>
案例：动态表格
<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: "ni", age: "19"},
{id: 2, name: "ni", age: "19"},
{id: 3, name: "ni", age: "19"},
];
//循环动态添加数据到表格
for (var idx in datalist) {
var info = datalist[idx];
var tr = document.createElement("tr");
for (var key in info) {
var text = info[key];
//创建td标签
var td = document.createElement("td");
td.innerText = text;
tr.appendChild(td);
}
var bodyTag = document.getElementById("body")
bodyTag.appendChild(tr)
}
</script>
</body>
8、条件语句
if(条件){
}else{
}
if(条件){
}else if(){
}else{
}
9、函数
function func(){
}
func()//表示执行函数
10、DOM
- DOM是一个模块，模块可以对HTML中的标签进行操作
- 一般不手写，比较麻烦。一般会使用类库，如jquery
//根据ID获取标签
var bodyTag = document.getElementById("body")
//获取标签中的文本
tag.innerText
//修改标签中的文本
tag.innerText="ahaha"
//创建标签
var td = document.createElement("div");
tag.innerText("hahah");//将hahah内容写入标签
#案例一：DOM新建标签并添加数据
<body>
<ul id = "city">
</ul>
<script type="text/javascript">
var tag = document.getElementById("city");
var newTag = document.createElement("li");
newTag.innerText = "北京";
tag.appendChild(newTag);//将标签内容写入到html
</script>
</body>
# 案例：单击按钮添加数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 点击就添加数据,ondbclick:双击-->
<input type="button" value = "添加" onclick="addCityInfo()">
<ul id = "city"> </ul>
<script type="text/javascript">
function addCityInfo(){
var newTag = document.createElement("li");
newTag.innerText = "你好";
var parentTag = document.getElementById("city");
parentTag.appendChild(newTag);
}
</script>
</body>
</html>
#案例：将用户输入内容添加到标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser">
<!-- 点击就添加数据,ondbclick:双击-->
<input type="button" value="添加" onclick="addCityInfo()">
<ul id="city"></ul>
<script type="text/javascript">
function addCityInfo() {
//找到输入标签
var txtTag = document.getElementById("txtUser");
//获取input框中用户输入的内容
var newString = txtTag.value;
//判断用户输入是否为空，只有不为空才能继续
if (newString.length > 0) {
//创建标签,li中间的文本信息会变成用户输入的内容
var newTag = document.createElement("li");
newTag.innerText = newString;
//将标签添加到ul中
var parentTag = document.getElementById("city");
parentTag.appendChild(newTag);
//将输入框清空
txtTag.value = "";
}else{
//弹出提示信息
alert("输入不能为空！")
}
}
</script>
</body>
</html>
