一 什么是CSS和JS
html是静态网页，紧靠html是不能对网页进一步美化的，
而CSS：层叠样式表，通过设置对应的样式属性可以修改html文档内各元素的显示、位置等样式（如：修改颜色、字体、字号、宽高、位置、背景等）
js（javascript）：是脚本语言，为浏览器的一部分，广泛用于客户端的脚本语言，现在也用户服务端，常用来为网页添加各式各样的动态功能（如：轮播图、tab切换等），为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的
二 CSS、div和span的联系理解
- 两者的区别与特性；
1).块级元素独占一行空间， 行内元素只占据自身宽度的空间;
2).块级元素是可以包含块级元素和行内元素; 行内元素只能包含文本信息和行内元素;
3). 块级元素可以设置宽和高， 行内元素设置的宽和高失效 - 行内标签和 块级元素分别有哪些?
行内标签:span, strong, a, img, input, textarea
块级元素:div, h1-h6, p, hr, pre, ul, ol, dd, dt, th. tr, td - 如何让块级元素居中? 如何让行内元素居中?
1).块级元素居中： margin: 0 auto
2).行内元素居中: text-aligin:center - 简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--span 长宽的改变并不能生效-->
<span style="width: 100px;height: 100px;border: 1px solid red">helllo</span>
<span style="width: 100px;height: 100px;border: 1px solid blue">world</span>
<!--可以-->
<div style="width: 100px;height: 100px;border-radius: 25px;border: 1px solid blueviolet;
box-shadow: 4px 4px 4px #aaffaa;text-align: center;margin: 0px auto">hello</div>
<div style="width: 100px;height: 100px;border-radius: 25px;border: 1px solid black;
box-shadow: 4px 4px 4px #aaffaa;text-align: center">world</div>
</body>
</html>
执行的结果：
< span >标签是一个行内元素，且只会占据本身的字符长度
三 编写CSS样式
- 类选择器
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
selector {property: value}
写在< head>中，对< body>中的元素进行说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border-radius: 25px;
border: 1px solid blueviolet;
box-shadow: 4px 4px 4px #aaffaa;
text-align: center;
margin: 0 auto
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
执行的结果：
- id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--CSS的标签选择器-->
<style>
#westos{
width:100px;
height: 100px;
border-radius:25px;
border: 1px solid blueviolet;
text-align: center;
margin: 0 auto;
padding-top: 20px;
text-shadow: 5px 5px 5px gray;
}
</style>
</head>
<body>
<div>1</div>
<div id="westos">2</div>
<div>3</div>
</body>
</html>
执行的结果：
3. 层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li a {
color: red;
}
input[type='submit']{
background: palevioletred;
width: 200px;
}
</style>
</head>
<body>
<ol>
<li><a href="#" > 新闻1</a></li>
<li><a href="#"> 新闻2</a></li>
<li><a href="#"> 新闻3</a></li>
</ol>
<ul>
<li><a href="#"> 新闻1</a></li>
<li><a href="#"> 新闻2</a></li>
<li><a href="#"> 新闻3</a></li>
</ul>
<form>
姓名: <input type="text"><br/>
密码: <input type="password"><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
执行的结果：
四 导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style-type: none
}
li{
font-size: large;
display:inline-block;
width: 20%;
background:darkgray;
padding-top: 10px;
padding-bottom: 10px;
text-align: center
}
li:hover{
background: black;
color: snow;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Python</li>
</ul>
</body>
</html>
执行的结果：
五 分页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}
.pagination li:first-child a {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>圆角边框</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
执行的结果：
六 CSS的引入方式
引入方式:
1). 行内引入: <a style="行内引入的样式">
2). 内部引入: 写在head标签里面的style标签里面的样式
3).外部引入:将css样式独立成一个文件，通过< link rel="stylesheet" href="css/main.css">与当前html文件链接在一起
三种引入方式的优先级: 就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
background: red;
}
</style>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>
<ul>
<li style="background: seashell">
<a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
</li>
<li>CSS</li>
<li>JS</li>
<li>python</li>
</ul>
</div>
</body>
</html>
执行的结果：
七 唯品会简单的登陆界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header {
width: 100%;
height: 100px;
}
.header-logo {
width: 125px;
height: 80px;
text-align: center;
padding-top: 20px;
margin-left: 20%;
}
.header-font{
background-image: url("//member-ssl.vipstatic.com/img/passport/sprites-hash-701a8168.png?be78a218");
width: 296px;
height: 100px;
position: absolute;
top: 1px;
right: 130px;
}
.header-logo a {
font-size: xx-large;
color: #f10180;
text-decoration: none;
}
.body {
background-image: url("https://img.vipstatic.com/upload/flow/2018/10/08/42/15389937084016.jpg");
width: 1353px;
height: 650px;
background-position: center top;
background-repeat: no-repeat
}
#login {
width: 360px;
height: 360px;
float: right;
margin-right: 120px;
margin-top: 60px;
background: white;
}
#login h3 {
text-align: center;
}
#login h3:hover {
color: #f10180;;
}
hr {
color: lightgray;
}
.a {
width: 80%;
padding-top: 10px;
padding-left: 3px;
margin-top: 20px;
margin-left: 30px
}
.b{
margin-top:20px;
font: 12px/1.5 tahoma,arial,Hiragino Sans GB,WenQuanYi Micro Hei,微软雅黑,宋体,sans-serif;
color: #333
}
.c{
margin-top: 30px;
text-align: center;
}
.c .c-1{
width: 70%;
height: 40px;
background: deeppink;
}
.c .c-2{
color: white;
}
</style>
</head>
<body>
<div class="header">
<div class="header-logo">
<a href="#">唯品会</a>
</div>
<div class="header-font"></div>
</div>
<div class="body">
<div id="login">
<h3>账户登陆</h3>
<hr/>
<form action="#" method="get">
<input class="a" type="text" placeholder="用户名/邮箱/电话"><br/>
<input class="a" type="password" placeholder="密码"><br/>
<div class="b">
<input type="radio" name="choice" value="1"><span>记住用户名</span>
<a href="#" style="color: black;padding-left: 170px">忘记密码</a><br>
</div>
<div class="c">
<!--<input type="submit" value="登陆">-->
<button class="c-1">
<span class="c-2">登陆</span>
</button>
</div>
</form>
</div>
</div>
</body>
</html>
执行的结果：
八 JS
如果你想了解JS的更多有趣的事情，可以去w3c上面去看
- JS表单注册雏形
需求:
1). 用户在注册的时候会输入一些信息， 但是用户输入的内容有可能不合法， 会导致服务器端压力过大;
2). 当用户填写信息之后， 对填写的信息进行校验，不光是前台需要校验，后台校验: 也是需要校验的
这是就需要用到JS，来对前后台的数据进行交流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<style></style>-->
<!--<link>-->
<script>
window.onload = function () {
// 1. 获取用户输入的用户名的标签对象;
var uEle = document.getElementById('username');
alert(uEle); //用来弹出指示框
// 2. 获取这个对象里面的值；
var uValue = uEle.value;
alert(uValue);
}
</script>
</head>
<body>
<form action="#" method="get">
<!--get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
post: 填写的信息不会在url里面显示
-->
用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
密码: <input type="password" name="passwd" placeholder="密码"><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
执行的结果：
- 上面的只是一个雏形，并没有对注册信息提出任何要求
现在的需求如下 现在的需求如下 ：
1）判断用户名是否为空?
2）校验密码是否大于6位， 如果不满足则不合法 ？
实现步骤：
1). 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
2). 对这个事件绑定一个函数(执行的操作写在函数里面);
3).函数的核心功能: 校验用户名是否为空?
1.获取输入用户名标签提交的内容；
2. if判断用户名是否为空?
3. 如果数据合法， 继续执行， 提交表单；
4. 如果数据不合法， 不让表单提交? (显示弹出框报错) — alert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<style></style>-->
<!--<link>-->
<script>
// *****************************1. 校验用户名是否为空? ***************************
// 定义一个函数
function checkForm() {
// 1). 获取输入用户名标签提交的内容；
var user = document.getElementById('username').value;
// 2). if判断用户名是否为空?
// 3). 如果数据合法， 继续执行， 提交表单；
// 4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
if (user === '') {
alert("用户名不能为空!");
return false;
}
// ******************************2. 校验密码长度是否小于6 **************************
// 难点: 获取密码长度(http://www.w3school.com.cn/js/js_obj_string.asp)
var passwdlen = document.getElementById('passwd').value.length;
if (passwdlen < 6){
alert("密码不合法: 长度小于6！");
return false;
}
}
</script>
</head>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
密码: <input type="password" name="passwd" placeholder="密码" id="passwd"><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
执行的结果：
- JS如何来实现轮播图
实现图片的自动转换功能
实现步骤：
1）确定事件类型为onclick事件；
2）并跟对应的函数changeImg绑定在一起；
3）实现函数功能；
1. 当点击下一页按钮之后， 修改img标签里面的src属性内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#sowing_map{
width: 590px;
height:500px;
margin: 0 auto;
text-align: center;
}
</style>
<script>
// 1. 定义一个变量， 控制图片的循环顺序;
var i = 1;
function changeImg() {
// 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
i += 1;
// 3. 修改img标签里面的src属性内容;
document.getElementById('img').src = 'img/img' + i + '.jpg';
// 4. 如果图片轮播结束， 从头开始轮播；
if (i === 6){
i = 0;
}
}
</script>
</head>
<body>
<div id="sowing_map"><img src="img/img7_ad.jpg" height="80" width="1190"/>
<img src="img/img1.jpg" id="img">
<input type="button" value="下一页" onclick="changeImg()">
</div>
</body>
</html>
- 外部引入JS代码和CSS样式实现轮播图
同时实现网页定时弹出广告,并定时取消弹出的广告：
1.在页面设置一个隐藏的图片，style=“display:none”
2.确定事件类型为onload，为其绑定一个函数
3.设置执行的函数
4.编写定时任务里面的函数img_Ad()
获取标签的样式display==‘block’
清除显示的广告的定时任务
隐藏广告的定时任务
5.实现定时任务里面的函数hiddenAd（）
获取标签的样式display==‘block’
清除显示的广告的定时任务
主代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--Js的引入方式:-->
<!-- - 内部引入: 直接在head标签里面的<script>写的内容;-->
<!-- - 外部引入:<script src="js/main.js" ></script-->
<link href="CSS/main.css" rel="stylesheet">
<script src="JS/main.js"></script>
</head>
<body>
<div id="sowing_map">
<img src="img/img1.jpg" id="img">
<!--<input type="button" value="下一页" onclick="changeImg()">-->
</div>
<div>
<img src="img/img7_ad.jpg" id="img_ad" style="display:none">
</div>
</body>
</html>
CSS里面的代码：
#sowing_map{
width: 590px;
height: 500px;
margin: 0 auto;
text-align: center;
}
#img_ad{
width: 1190px;
height: 80px;
margin: 0 auto;
text-align: center;
}
JS里面的代码：
window.onload=function () {
//每隔1s自动执行某函数
setInterval('changeImg()',1000);
//每隔1s执行
setInterval('img_Ad()',1000);
adtime=clearInterval(img_Ad(),1000)
};
//定义一个变量，控制函数的循环顺序
var i=1;
function changeImg() {
//当点击下一页的时候，i+1，这时，图片变为img2
i += 1;
//修改img标签里面src的属性内容
document.getElementById("img").src = "img/img" + i + ".jpg";
//如果图片轮播结束，从头开始重来
if (i === 6) {
i = 0;
}
}
//编写显示隐藏图片的函数
function img_Ad() {
//获取到广告图片对应的标签对象
var ad=document.getElementById('img_ad');
//修改广告里面的style的属性display
ad.style.display='block';
//设置隐藏广告图片的定时任务
hiddentime=setInterval('hiddenAd()',1000)
}
function hiddenAd() {
var ad=document.getElementById('img_ad');
ad.style.display='none';
clearInterval(hiddentime)
}
这样一来，就可以减轻主代码的荣杂程度，使得代码更加的清晰
- JS用户注册界面的优化
填写用户名和密码时，旁边需有提示；
用户名或者密码注册时，离开当前填写框时，立即作出判断，填写内容是否符合要求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function showUserTip() {
// 1. 获取标签对象;
document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">用户名不能为空</b>';
}
function showPwdTip() {
// 1. 获取标签对象;
document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;">密码必须大于6位</b>';
}
function checkUser() {
//1. 离焦时判断用户名是否为空?
var name = document.getElementById('user').value;
// 2. 如果为空， 右边来一个红色的提示;
// 3. 如果不为空， 则取消所有提示;
if (name === ''){
document.getElementById('userTip').innerHTML = '<b style="color: #f10180">用户名不能为空</b>'
return false;
}else{
document.getElementById('userTip').innerHTML = '<b style="color: green"> ok </b>'
return true;
}
}
function checkPwd() {
// alert('离焦');
//1. 离焦时判断用户名是否为空?
var pwdLen = document.getElementById('pwd').value.length;
// 2. 如果为空， 右边来一个红色的提示;
// 3. 如果不为空， 则取消所有提示;
if (pwdLen < 6){
document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180">密码必须大于等于6位</b>'
return false;
}else{
document.getElementById('pwdTip').innerHTML = '<b style="color: green"> ok </b>'
return true;
}
}
</script>
</head>
<body>
<!--
1). 确定事件类型(onfocus-聚焦事件)， 并为其绑定一个函数;
2). 确定事件类型(onblur-离焦事件)， 并为其绑定一个函数;
-->
<form action="#" method="get">
<input type="text" id='user' placeholder="输入用户名" name="username" onfocus="showUserTip()"
onblur="checkUser()">
<span id="userTip"></span><br/>
<input type="password" id="pwd" placeholder="密码" name="passwd" onfocus="showPwdTip()"
onblur="checkPwd()">
<span id="pwdTip"></span><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
执行的结果：
- JS实现表单选项的全选与全不选
步骤分析:
1). 确定事件类型:鼠标单击单选按钮时(onclick事件)， 绑定一个函数；
2). 编写函数checkAll()
当选中编号前面的方框时，不管下面的选没选，都会被自动选择；
同理当取消选中编号前面的方框时，下面选则的，都会被自动取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkAll() {
//1. 获取全选框对象
var checkAllEle = document.getElementById('checkAll');
// alert(checkAllEle);
// //判断该单选框是否被选中，
// alert(checkAllEle.checked);
// 2. 对编号前面的复选框的状态进行判断;
// - 如果状态为选中， 则设置所有的单选框为选中状态;
// - 如果状态为没有选中， 则设置所有的单选框为没有选中状态;
if (checkAllEle.checked){
//- 如果状态为选中， 则设置所有的单选框为选中状态;
var checkOnes = document.getElementsByName('checkOne');
// 依次遍历所有的单选框， 设置状态为选中;li = [1,2,3,4]
for(var i =0; i<checkOnes.length; i++){
// li[0] li[1] li[2] li[3]
checkOnes[i].checked = true;
}
}else{
//- 如果状态为未选中， 则设置所有的单选框为未选中状态;
var checkOnes = document.getElementsByName('checkOne');
// 依次遍历所有的单选框， 设置状态为选中;li = [1,2,3,4]
for(var i =0; i<checkOnes.length; i++){
// li[0] li[1] li[2] li[3]
checkOnes[i].checked = false;
}
}
}
</script>
</head>
<body>
<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
<th style="text-align: center;" colspan="5">
<input type="button" value="添加">
<input type="button" value="删除">
</th>
<tr>
<th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>one</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" ></td>
<td>two</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>three</td>
<td>3</td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>four</td>
<td>4</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>five</td>
<td>5</td>
<td>1</td>
<td>5</td>
</tr>
</table>
</body>
</html>
- JS校验唯品会登陆信息
前面通过HTML编写了个简单的唯品会的登陆界面，现在加入JS处理，验证注册信息的合法性前面通过HTML编写了个简单的唯品会的登陆界面，现在加入JS处理，验证注册信息的合法性
主代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="CSS/main.css" rel="stylesheet">
<script src="JS/main.js"></script>
</head>
<body>
<div class="header">
<div class="header-logo">
<a href="#">唯品会</a>
</div>
<div class="header-font"></div>
</div>
<div class="body">
<div id="login">
<h3>账户登陆</h3>
<hr/>
<form action="#" method="get">
<input class="a" type="text" placeholder="用户名/邮箱/电话" id="name" onblur="out_name()"><br/>
<span id="nametip"></span><br>
<input class="a" type="password" placeholder="密码" id="passwd" onblur="out_passwd()"><br/>
<span id="passwdtip"></span><br>
<div class="b">
<input type="radio" name="choice" value="1"><span>记住用户名</span>
<a href="#" style="color: black;padding-left: 170px">忘记密码</a><br>
</div>
<div class="c">
<!--<input type="submit" value="登陆">-->
<button class="c-1">
<span class="c-2">登陆</span>
</button>
</div>
</form>
</div>
</div>
</body>
</html>
CSS样式：
.header {
width: 100%;
height: 100px;
}
.header-logo {
width: 125px;
height: 80px;
text-align: center;
padding-top: 20px;
margin-left: 20%;
}
.header-font{
background-image: url("//member-ssl.vipstatic.com/img/passport/sprites-hash-701a8168.png?be78a218");
width: 296px;
height: 100px;
position: absolute;
top: 1px;
right: 130px;
}
.header-logo a {
font-size: xx-large;
color: #f10180;
text-decoration: none;
}
.body {
background-image: url("https://img.vipstatic.com/upload/flow/2018/10/08/42/15389937084016.jpg");
width: 1353px;
height: 650px;
background-position: center top;
background-repeat: no-repeat
}
#login {
width: 360px;
height: 360px;
float: right;
margin-right: 120px;
margin-top: 60px;
background: white;
}
#login h3 {
text-align: center;
}
#login h3:hover {
color: #f10180;;
}
hr {
color: lightgray;
}
.a {
width: 80%;
padding-top: 10px;
padding-left: 3px;
margin-top: 20px;
margin-left: 30px
}
.b{
margin-top:20px;
font: 12px/1.5 tahoma,arial,Hiragino Sans GB,WenQuanYi Micro Hei,微软雅黑,宋体,sans-serif;
color: #333
}
.c{
margin-top: 30px;
text-align: center;
}
.c .c-1{
width: 70%;
height: 40px;
background: deeppink;
}
.c .c-2{
color: white;
}
JS校验代码：
function out_name() {
var name = document.getElementById('name').value;
if (name === ''){
document.getElementById('nametip').innerHTML = '<b style="color:red;font-size: small" >用户名不能为空</b>';
return false;
}else{
document.getElementById('nametip').innerHTML = '<b style="color:greenyellow"> ok </b>';
return true;
}
}
function out_passwd() {
var pwdLen = document.getElementById('passwd').value.length;
if (pwdLen < 6) {
document.getElementById('psswdtip').innerHTML = '<b style="color:red;font-size: small">密码必须大于等于6位</b>';
return false;
} else {
document.getElementById('passwdtip').innerHTML = '<b style="color: greenyellow"> ok </b>';
return true;
}
}
执行的结果：
- JS实现动态添加城市
实现步骤:- 确定事件类型onclick
- 对于事件绑定一个函数addLiElement()
1).获取到用户在input输入框中填写的信息;
city = document.getElementById(“city”).value
2). 创建一个城市的文本节点；document.createTextNode(‘xxxx’)
3). 创建一个li的元素节点; document.createElement(‘xxxx’)
4). 将文本节点添加到li元素节点里面去;
5). 将整体添加到ul标签里面去;
使用appendChild()来添加子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function addCity() {
var city=document.getElementById('city').value;
var textNode=document.createTextNode(city);
var liEleNode=document.createElement('li');
liEleNode.appendChild(textNode);
var ulEleNode=document.getElementById('ul_city');
ulEleNode.appendChild(liEleNode);
}
</script>
</head>
<body>
<input type="text" placeholder="请输入城市" id="city">
<input type="submit" value="添加城市" id="citybtn" onclick="addCity()">
<ul id="ul_city">
<li>北京</li>
<li>上海</li>
<li>西安</li>
</ul>
</body>
</html>
执行的结果：
添加之后：
- JS实现省市的二级联动
步骤实现：
1). 确定事件类型onchange, 并为其绑定一个函数;
2). 修改下拉列表内容;
2-1). 获取用户选择的省份;
2-2). 创建一个二维数组， 用来存储省份和城市的对应关系;
2-3). 遍历二维数组中的省份；
2-4). 遍历时省份编号和用户选择的省份编号进行比较，
2-5). 如果相同， 遍历该省份下的所有城市;
将每一个城市以城市名添加到select里面去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function changecity() {
var choiceProvince=document.getElementById('province').value;
var cites=new Array(3);
cites[0]=new Array('青岛','烟台','济南');
cites[1]=new Array('成都','绵阳','广元');
cites[2]=new Array('西安','咸阳','宝鸡');
var selectEleNode=document.getElementById('city');
selectEleNode.options.length=0;
for(var i=0;i<cites.length;i++){
if (choiceProvince==i){
for(var j=0;j<cites[i].length;j++){
var textNode=document.createTextNode(cites[i][j]);
var optionEleNode=document.createElement('option');
optionEleNode.appendChild(textNode);
selectEleNode.appendChild(optionEleNode);
}
}
}
}
</script>
</head>
<body>
<form>
<div style="text-align: center">
<span>籍贯:</span>
<select onchange="changecity()" id="province">
<option>请选择省份</option>
<option value="0">山东</option>
<option value="1">四川</option>
<option value="2">陕西</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
</div>
</form>
</body>
</html>
执行的结果：
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
