目录
一、初识JavaScript
二、JavaScript的基础
1、初步了解
2、代码位置
3、注释
4、变量
①字符串
②数组
③对象
④条件语句
⑤函数
三、DOM模块
一、初识JavaScript
- JavaScript，是一门编程语言。浏览器就是JavaScript语言的解释器。
- DOM和BOM 相当于编程语言内置的模块。
- JQuery 相当于是编程语言的第三方模块。
- JavaScript让程序实现一些动态效果。
二、JavaScript的基础
1、初步了解
<!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>
<div class="menus"><div class="header" onclick="myFunc()">大标题</div><div class="item">内容</div><script type="text/javascript">function myFunc(){alert("你好呀")confirm("是否要继续？")}</script>
</div>
</body>
</html>
前端三大组件：
- HTML，裸体
- CSS，好看的衣服
- JavaScript，动态
2、代码位置
js代码的存在形式：
- 当前的HTML文件中
head中：CSS代码的下面
body中：（推荐）
注意: 如果写在了
head中,body的html代码不会执行,会先执行head中的javascript之后,才会显示html代码
- 在其他js文件中，导入使用
<body><script src="static/js/my.js"></script>
</body>3、注释
- HTML的注释
<!-- 注释内容 -->
- CSS的注释，style代码块
/* 注释内容 */
- JavaScript的注释，script代码块
// 注释内容/* 注释内容 */
4、变量
python，编程语言
name = "派大星"
print(name)JavaScript，编程语言
定义变量
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/javascript">var name = "派大星";console.log(name);
</script>
</body>
</html>①字符串
//声明
var name = "派大星";
var name = String("派大星");
常见功能
var name = "中国联通"
var v1 = name.length; //获取字符长度
var v2 = name[0]; //获取数据
var v3 = name.trim(); //去除空白
var v4 = name.substring(0,2) //切片, 前取后不取
案例：跑马灯
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><div id="txt">欢迎中国联通领导莅临指导</div><script type="text/javascript">function show() {//1.去HTML中找到某个标签并获取他的内容 (DOM)var tag = document.getElementById("txt");var dataString = tag.innerText;//2.动态起来,把文本中的第一个字符放在字符串的最后面var firstChar = dataString[0];var otherString = dataString.substring(1, dataString.length);var newText = otherString + firstChar;//3.在HTML标签中更新内容tag.innerText = newText;}//Javascript中的定时器//每秒钟执行这个show函数setInterval(show, 1000); //毫秒</script>
</body>
</html>
②数组
//定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);//操作
var v1 = [11,22,33,44];v1[1]
v1[0] = "派大星"//追加
v1.push("联通"); //尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通"); //头部追加 ["联通",11,22,33,44]
v1.splice(索引,0,元素);
v1.splice(1,0,"中国"); //指定位置追加 [11,"中国",22,33,44]//删除
v1.pop(); //尾部删除
v1.shift(); //头部删除
v1.splice(索引位置,1);
v1.splice(2,1); //索引为 2 的元素删除 [11,22,44]//循环
var v1 = [11,22,33,44];
//循环的是索引
for(var index in v1){//data=v1[index]...
}for(var i=0; i<v1.length; i++){...
}
案例：动态数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul id="city"><!-- <li>北京</li><li>天津</li><li>西安</li> --></ul><script type="text/javascript">var cityList = ["北京","上海","深圳"];for(var idx in cityList) {var text = cityList[idx];//创建 <li></li> 标签var tag = document.createElement("li");//在 li 标签中写入内容tag.innerText = text;//添加到 id=city 那个标签的里面 DOMvar parentTag = document.getElementById("city");parentTag.appendChild(tag);}</script>
</body>
</html>③对象
info = {"name":"派大星","age":18,
}info = {name:"派大星",age:18
}info.age;
info.name = "海绵宝宝"info["age"]
info["name"] = "海绵宝宝";delete info["age"]//循环
for(var key in info){//key值 data=info[key]...
}
案例：动态表格
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><table border="1"><thead><tr><th>ID</th><th>姓名</th><th>年龄</th></tr></thead><tbody id="body"><tr><!-- <td>1</td><td>poker</td><td>25</td> --></tr></tbody></table><script type="text/javascript">var dataList = [{ id: 1, name: "派大星", age: 23 },{ id: 1, name: "派大星", age: 23 },{ id: 1, name: "派大星", age: 23 },{ id: 1, name: "派大星", age: 23 },{ id: 1, name: "派大星", age: 23 },{ id: 1, name: "派大星", age: 23 },];for (var idx in dataList) {var info = dataList[idx]//1.创建 tr 标签var tr = document.createElement("tr")for (var key in info) {var text = info[key];//2.创建 td 标签var td = document.createElement("td");td.innerText = text;tr.appendChild(td);}//3. 追加数据var bodyTag = document.getElementById("body");bodyTag.appendChild(tr);}</script>
</body>
</html>
④条件语句
if (条件) {...
}else{...
}if (条件) {...
else if (条件){...
}else{...
}
⑤函数
function func(){...
}//执行
func()
三、DOM模块
DOM 是一个模块,模块可以对HTML页面中的标签进行操作
//根据 ID 获取标签
var tag = doucment.getElementById("xx");//获取标签中的文本
tag.innerText//修改标签中的文本
tag.innerText = "111111fff";
案例：
<body><ul id="city"><!-- <li>北京</li><li>天津</li><li>上海</li> --></ul><script type="text/javascript">var cityList = ["北京","天津","上海"];for(var idx in cityList) {var text = cityList[idx];//创建 <li></li> 标签var tag = document.createElement("li");//在 li 标签中写入内容tag.innerText = text;//添加到 id=city 那个标签的里面 DOMvar parentTag = document.getElementById("city");parentTag.appendChild(tag);}</script>
</body>
事件的绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><input type="text" placeholder="请输入内容" id="content"><input type="button" value="点击添加" onclick="addCityInfo()"><ul id="city"></ul><script type="text/javascript">function addCityInfo() {//1.找到标签var userContent = document.getElementById("content");//2.获取input中用户输入的内容var newString = userContent.value;//判断用户输入是否为空if (newString.length > 0) {//3.创建 li 标签,传入用户输入的内容var newTag = document.createElement("li");newTag.innerText = newString;//4.标签添加到 ul 中var parentTag = document.getElementById("city");parentTag.appendChild(newTag);//5.将 input text 内容清空userContent.value = "";}else{alert("输入不能为空!")}}</script>
</body>
</html>
