1.什么是JavaScript(JS)?
脚本语言(不需要编译直接被浏览器解析),客户端脚本,运行在浏览器中,
由三个部分组成 ECMAScript+DOM+BOM
2.DOM?
DOM就是文档对象模型,就是将HTML文档各个部分,封装成对象,借助对象对HTML文档进行增删改查
要想使用必须先要引入js文件
<script src="js/jquery-3.3.1.min.js"></script>
3.变量和常量
javaScript属于弱类型语言,不区分数据类型
定义局部变量 let 变量名 = 值;
let name = "张三";
let age = 23;
document.write(name + "," + age +"<br>");
定义全局变量 变量名 = 值;
{
let l1 = "aa";
l2 = "bb";
}
//document.write(l1);
document.write(l2 + "<br>");
定义常量 变量名 = 值;
const PI = 3.1415926;
//PI = 3.15;
document.write(PI);
typeof用于判断变量的数据类型
4.函数
类似于java中的函数,可以将代码进行抽取,以达到复用的效果
function 方法名(参数列表) {
方法体;
return 返回值;
}
5.小结
输入输出语句
prompt() alert() console.log() document.write()
变量和常量
let const
数据类型
boolean null undefined number string bigint
typeof关键字
用于判断变量的数据类型
流程控制语句和循环语句
if switch for while
数组
数组类型和长度没有限制, let 数组名 = [长度/元素]
6.DOM
Document:文档对象------------------------>>当浏览器加载这个对象就会被创建出来
Element:元素对象
Attribute:属性对象
Text:文本对象
元素获取具体方法:
getElementById(id属性值)---------------------------->>根据id获取一个元素
getElementsByTagName(标签名)-------------------->>根据标签名称获取多个元素
getElementByName(name属性值)------------------->>根据name获取多个元素
getElementsByClassName(class属性值)----------->>根据class属性获取多个元素
子元素对象.parentElement属性------------------------>>获取当前元素的父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="text" name="username"/>
</body>
<script>
//根据id属性值获取元素
let div1 = document.getElementById("div1");
alert(div1);
// 根据元素名称获取元素对象门, 返回数组
let divs = document.getElementsByTagName("div");
alert(divs.length);
//根据class属性值获取元素对象们,返回数组
let cls = document.getElementsByClassName("cls");
alert(cls.length);
//根据name属性值获取元素对象们,返回数组
let username = document.getElementsByClassName("username");
alert(username);
//获取当前元素的父元素
let body = div1.parentElement;
alert(body);
</script>
</html>
元素增删改查具体方法
createElement(标签名)------------------------>>创建一个新元素
appendChild(子元素)--------------------------->>将指定子元素添加到父元素中
removeChild(子元素)--------------------------->>用父元素删除子元素
replaceChild(新元素,旧元素)------------------>>用新元素代替子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的增删改</title>
</head>
<body>
<select id="cc">
<option>--请选择--</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
</body>
<script>
// 创建新元素
let option = document.createElement("option");
//为新元素添加文本内容
option.innerText="广州";
//将子元素添加到父元素中
let select = document.getElementById("cc");
select.append(option)
//用新元素替换旧元素
let option2 = document.createElement("option");
option2.innerText("杭州");
select.replaceChild(option2,option)
</script>
</html>
Attribute属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性的操作</title>
<style>
.aColor {
color: blue;
}
</style>
</head>
<body>
<a>点我呀</a>
</body>
<script>
//添加属性
let a = document.getElementsByTagName("a")[0];
a.setAttribute("href", "http://www.baidu.com");
//获取属性
let value = a.getAttribute("href");
alert(value);
//添加样式
a.style.color = "red";
//添加指定样式
a.className = "aColor";
//删除属性
a.removeAttribute("href");
</script>
</html>
文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本的操作</title>
</head>
<body>
<div id="div"></div>
</body>
<script>
//1. innerText 添加文本内容，不解析标签
let div = document.getElementById("div");
div.innerText = "我是div";
//div.innerText = "<b>我是div</b>";
//2. innerHTML 添加文本内容，解析标签
div.innerHTML = "<b>我是div</b>";
</script>
</html>
7.javaScript事件
某些组件执行了操作后,会触发某些代码的执行
常用事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<img id="img" src="img/01.png"/>
<br>
<!-- <button id="up" onclick="up()">上一张</button>
<button id="down" onclick="down()">下一张</button> -->
<button id="up">上一张</button>
<button id="down">下一张</button>
</body>
<script>
//显示第一张图片
function up() {
let img = document.getElementById("img");
img.setAttribute("src", "img/01.png");
}
//显示第二张照片
function down() {
let img = document.getElementById("img");
img.setAttribute("src", "img/02.png");
}
//为上一张绑定单击事件
let upBtn = document.getElementById("up");
upBtn.onclick = up;
//为下一张绑定单击事件
let downBtn = document.getElementById("down");
downBtn.onclick = down;
</script>
</html>
事件操作
绑定事件:
方式一:
通过标签中的事件属性进行绑定
<button id="btn" onclick="执行的功能"></button>
方式二:
通过DOM元素属性绑定
document.getElementById("btn").onclick = 执行的功能
7.综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
<input type="text" id="age" placeholder="请输入年龄" autocomplete="off">
<input type="text" id="gender" placeholder="请输入性别" autocomplete="off">
<input type="button" value="添加" id="add">
</div>
<table id="tb">
<caption>学生信息表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>男</td>
<td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
</tr>
</table>
</body>
<script>
//一、添加功能
//1.为添加按钮绑定单击事件
document.getElementById("add").onclick = function(){
//2.创建行元素
let tr = document.createElement("tr");
//3.创建4个单元格元素
let nameTd = document.createElement("td");
let ageTd = document.createElement("td");
let genderTd = document.createElement("td");
let deleteTd = document.createElement("td");
//4.将td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(ageTd);
tr.appendChild(genderTd);
tr.appendChild(deleteTd);
//5.获取输入框的文本信息
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let gender = document.getElementById("gender").value;
//6.根据获取到的信息创建3个文本元素
let nameText = document.createTextNode(name);
let ageText = document.createTextNode(age);
let genderText = document.createTextNode(gender);
//7.将3个文本元素添加到td中
nameTd.appendChild(nameText);
ageTd.appendChild(ageText);
genderTd.appendChild(genderText);
//8.创建超链接元素和显示的文本以及添加href属性
let a = document.createElement("a");
let aText = document.createTextNode("删除");
a.setAttribute("href","JavaScript:void(0);");
a.setAttribute("onclick","drop(this)");
a.appendChild(aText);
//9.将超链接元素添加到td中
deleteTd.appendChild(a);
//10.获取table元素，将tr添加到table中
let table = document.getElementById("tb");
table.appendChild(tr);
}
//二、删除的功能
//1.为每个删除超链接标签添加单击事件的属性
//2.定义删除的方法
function drop(obj){
//3.获取table元素
let table = obj.parentElement.parentElement.parentElement;
//4.获取tr元素
let tr = obj.parentElement.parentElement;
//5.通过table删除tr
table.removeChild(tr);
}
</script>
</html>
8.javaScript面向对象
核心思想是万物皆对象 也可继承 关键字 extends 顶级父类Object
字面量类的定义和使用
let 对象名 = {
变量名 = 变量值
变量名 = 变量值
};
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//定义person类
let person = {
name: "张三",
age: 24,
hobby: ["学习", "游戏"],
eat: function () {
document.write("吃...")
}
}
//使用person成员变量
document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br/>");
//调用方法
person.eat();
</script>
</body>
</html>
9.内置对象
Number:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//将传入的字符串转成浮点数
let number1 = Number.parseFloat("3.14");
document.write(typeof (number1) + ":" + number1 + "<br/>");
//将传入的字符串转成整数
let number2 = Number.parseInt("123");
document.write(typeof (number2) + ":" + number2 + "<br/>");
//从数字开始转换,直到不是数字为止
let number3 = Number.parseInt("123abc");
document.write(typeof (number3) + ":" + number3 + "<br/>")
</script>
</body>
</html>
Math:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math</title>
</head>
<body>
</body>
<script>
//1. ceil(x) 向上取整
document.write(Math.ceil(4.4) + "<br>"); // 5
//2. floor(x) 向下取整
document.write(Math.floor(4.4) + "<br>"); // 4
//3. round(x) 把数四舍五入为最接近的整数
document.write(Math.round(4.1) + "<br>"); // 4
document.write(Math.round(4.6) + "<br>"); // 5
//4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
document.write(Math.random() + "<br>"); // 随机数
//5. pow(x,y) 幂运算 x的y次方
document.write(Math.pow(2,3) + "<br>"); // 8
</script>
</html>
Date:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date</title>
</head>
<body>
</body>
<script>
//构造方法
//1. Date() 根据当前时间创建对象
let d1 = new Date();
document.write(d1 + "<br>");
//2. Date(value) 根据指定毫秒值创建对象
let d2 = new Date(10000);
document.write(d2 + "<br>");
//3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11)
let d3 = new Date(2222,2,2,20,20,20);
document.write(d3 + "<br>");
//成员方法
//1. getFullYear() 获取年份
document.write(d3.getFullYear() + "<br>");
//2. getMonth() 获取月份
document.write(d3.getMonth() + "<br>");
//3. getDate() 获取天数
document.write(d3.getDate() + "<br>");
//4. toLocaleString() 返回本地日期格式的字符串
document.write(d3.toLocaleString());
</script>
</html>
String:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//构建方法创建字符串对象
let s1 = new String("hello");
document.write(s1 + "<br/>");
//直接赋值
let s2 = "hello";
document.write(s2 + "<br>");
//获取字符串长度
document.write(s2.length + "<br/>");
//获取指定索引处字符
document.write(s2.charAt(1) + "<br/>");
//获取指定字符串出现的所以位置
document.write(s2.indexOf("1") + "<br/>");
//根据指定索引范围截取字符串
document.write(s2.substring(2, 4 + "<br/>");
//用新字符串替换旧的字符串
let s4 = "你会不会跳伞啊,让我落地成盒,你妹的";
let s5 = s4.repeat("你妹的","***");
</script>
</body>
</html>
RegExp正则表达式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//验证手机号
//第一位1,第二位3,5,8,第三到十一必须是数字,总长度11
let reg1 = /^[1][358][0-9]{9}$/;
document.write(reg1.test("18688888888") + "<br/>");
//验证用户名
//字母,数字,下划线组成,总长度4-16
let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
document.write(reg2.test("zha_aa9") + "<br/>");
//验证邮箱
let reg_email = /^[a-zA-Z0-9_]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
let flag = reg_email.test("e-_erwew@126.com.cn");
document.write(flag);
</script>
</body>
</html>
Array:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let arr = [1, 2, 3, 4, 5];
//添加元素到数组末尾
arr.push(6);
document.write(arr + "<br>");
//删除数组末尾的元素
arr.pop();
document.write(arr + "<br>");
//删除数组最前面的元素
arr.shift();
document.write(arr + "<br/>");
//判断数组中是否包含指定的元素
document.write(arr.includes(9) + "<br/>");
//翻转数组元素
arr.reverse();
document.write(arr + "<br/>");
//对数组元素排序
arr.sort();
document.write(arr+"<br/>");
</script>
</body>
</html>
Set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set</title>
</head>
<body>
</body>
<script>
// Set() 创建集合对象
let s = new Set();
// add(元素) 添加元素
s.add("a");
s.add("b");
s.add("c");
s.add("c");
// size属性 获取集合的长度
document.write(s.size + "<br>"); // 3
// keys() 获取迭代器对象
let st = s.keys();
for(let i = 0; i < s.size; i++){
document.write(st.next().value + "<br>");
}
// delete(元素) 删除指定元素
document.write(s.delete("c") + "<br>");
let st2 = s.keys();
for(let i = 0; i < s.size; i++){
document.write(st2.next().value + "<br>");
}
</script>
</html>
Map:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//创建map集合对象
let map = new Map();
//添加元素
map.set("张三", 23);
map.set("李四", 24);
map.set("王五", 25);
//获取集合长度
document.write(map.size + "<br/>");
//根据key获取value
document.write(map.get("李四") + "<br>");
//获取迭代器对象
let et = map.entries();
for (let i = 0; i < map.size; i++) {
document.write(et.next().value + "<br>");
}
//根据key删除键值对
document.write(map.delete("李四") + "<br/>");
let et2 = map.entries();
for (let i = 0; i < map.size; i++) {
document.write(et2.next().value + "<br>");
}
</script>
</body>
</html>
10.JSON?
是一种轻量级数据交换格式,简洁,清晰的结构化数据
常用方法:
Stringify(对象)---------->>将指定对象转为json格式字符串
parse(字符串)----------->>将指定json格式转换成对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//定义天气对象
let weather = {
city : "北京",
date : "2088-08-08",
wendu : "10°~23°",
shidu : "22%"
};
//将天气对象转换成JSON格式字符串
let str = JSON.stringify(weather);
document.write(str+"<br>")
//将JSON格式字符串转换解析成js对象
let weather2 = JSON.parse(str);
document.write("城市:"+weather2.city+"<br>");
document.write("城市:"+weather2.date+"<br>");
document.write("城市:"+weather2.wendu+"<br>");
document.write("城市:"+weather2.shidu+"<br>");
</script>
</body>
</html>
11.综合案例 表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="login-form-wrap">
<h1>黑马程序员</h1>
<form class="login-form" action="#" id="regist" method="get" autocomplete="off">
<label>
<input type="text" id="username" name="username" placeholder="Username..." value="">
</label>
<label>
<input type="password" id="password" name="password" placeholder="Password..." value="">
</label>
<input type="submit" value="注册">
</form>
</div>
</body>
<script>
//为表单绑定提交事件
document.getElementById("regist").onsubmit = function () {
//获取用户名输入的账号和密码
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
//判断用户名和密码是否符合规则 4-16位纯字母
let reg1 = /^[a-zA-Z]{4,16}$/;
if (!reg1.test(username)) {
alert("用户名不符合规则,请输入4-16位纯字母~");
return false;
}
//判断密码是否符合规则 6位纯数字
let reg2 = /^[\d]{6}$/
if (!reg2.test(password)) {
alert("密码不符合规则,请输入6位纯数字~");
return false;
}
//如果都不满足,则提交表单
return true;
}
</script>
</html>
11.javaScript BOM?
浏览器对象模型
就是将浏览器各个部分封装成对象,方便我们操作.
Window:窗口对象 Window.onload:在页面加载完触发此事件功能
setTimeOut(功能,毫秒值):设置一次性定时器
cleaeTimeOut(标识):取消一次性定时器
setInterval(功能,毫秒值):设置循环定时器
clearInterval(标识):取消循环定时器
```java
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//定时器
function fun() {
alert("该起床了...")
}
//设置一次性定时器
//let d1 = setTimeout("fun()",3000);
//取消一次性定时器
// clearTimeout(d1);
//设置循环定时器
let d2 = setInterval("fun()",3000);
//取消循环定时器
clearInterval(d2);
//加载事件
</script>
</body>
</html>
``
Location:地址栏对象
可以为改属性设置新的URL,使浏览器读取并显示新的URL内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
注册成功！<span id="time">5</span>秒之后自动跳转到首页...
</p>
</body>
<script>
//定义方法,改变秒数
let num = 5;
function showTime() {
num--;
if (num <= 0) {
//跳转百度
location.href = "http://www.baidu.com";
}
let span = document.getElementById("time");
span.innerHTML = num;
}
//设置循环定时器,每一秒执行showTime方法
setInterval("showTime()", 1000);
</script>
</html>
History:历史记录对象
Navigator:浏览器对象
Screen:显示器屏幕对象
12.综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头条页面</title>
<link rel="stylesheet" href="css/news.css"/>
</head>
<body>
<!-- 广告图片 -->
<img src="img/ad_big.jpg" id="ad_big" width="100%"/>
<!--顶部登录注册更多-->
<div class="top">
<a href="#" target="_self">登录 </a>
<a href="#">注册 </a>
<a href="#">更多 </a>
</div>
<!--导航条-->
<div class="nav">
<img src="img/logo.png"/>
<a href="#">首页 </a>/
<a href="#">科技 </a>/
<font color="gray">正文</font>
<hr/>
</div>
<!--左侧分享-->
<div class="left">
<a href="#"> <img src="img/cc.png"/> <span> 评论</span> </a>
<hr/>
<a href="#"> <img src="img/repost.png"/> <span> 转发</span> </a> <br/>
<a href="#"> <img src="img/weibo.png"/> <span> 微博</span> </a> <br/>
<a href="#"> <img src="img/qq.png"/> <span> 空间</span> </a> <br/>
<a href="#"> <img src="img/wx.png"/> <span> 微信</span> </a> <br/>
</div>
<!--中间正文-->
<div class="center">
<div>
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
</div>
<!--作者信息-->
<div>
<i><font size="2" color="gray">作者：itheima 2088-08-08</font></i>
<hr/>
</div>
<!--副标题-->
<div>
<h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
</div>
<!--正文内容-->
<div>
<p>
这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
<p>
支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
<ol>
<li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
<li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
<li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
</ol>
<img src="img/1.jpg" width="100%"/>
</p>
<p>
说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。</p>
<p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯
</p>
<p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。
</p>
<img src="img/2.jpg" width="100%"/>
<p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？
</p>
<p>
随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？</p>
</div>
</div>
<!--右侧广告图片-->
<div class="right">
<img src="img/ad1.jpg" width="100%"/>
<img src="img/ad2.jpg" width="100%"/>
<img src="img/ad3.jpg" width="100%"/>
<img src="img/ad1.jpg" width="100%"/>
<img src="img/ad2.jpg" width="100%"/>
<img src="img/ad3.jpg" width="100%"/>
</div>
<!--底部页脚超链接-->
<div class="footer">
<a href="#">关于黑马</a>
<a href="#">帮助中心</a>
<a href="#">开放平台</a>
<a href="#">诚聘英才</a>
<a href="#">联系我们</a>
<a href="#">法律声明</a>
<a href="#">隐私政策</a>
<a href="#">知识产权</a>
<a href="#">廉政举报</a>
</div>
</body>
<script>
//3秒后显示广告图片
setTimeout(function () {
let ad = document.getElementById("ad_pig");
ad.style.display="block";
},3000);
//3秒后隐藏图片
setTimeout(function () {
let ad = document.getElementById("ad_big");
ad.style.display = "none";
},6000);
</script>
</html>
13.JavaScript封装
将复杂的操作隐藏,对外提供更加简单的操作,jQuery是一个前端框架对javaScript进行了封装
1676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
