文章目录 前端基础一、项目开发流程二、HTML(超文本标记语言)2.1 HTML基本结构2.2 页面的编码方式2.3 HTML常用标签2.3.1 标题标签2.3.2 段落标签2.3.3 换行2.3.4 水平线2.3.5 加粗、倾斜标签2.3.6 转义符2.3.7 图片标签2.3.8 font标签2.3.9 超链接标签2.3.10 列表标签2.3.10.1 无序列表(默认实心圆点):2.3.10.2 有序列表(li独立成行):2.3.10.3 自定义列表: 2.3.11 表格标签2.3.12 iframe框架(内联框架)2.3.13 表单标签2.3.14 div标签 三、CSS样式3.1 css层叠样式表3.2 css的语法3.3 css中选择器的类型3.3.1 标签选择器:3.3.2 类选择器:3.3.3 id选择器--使用标签中的id属性 3.4 css定义的位置3.5 css优先级(高->低)3.6 高级选择器3.7 CSS样式属性3.7.1 文字样式3.7.2 文本样式3.7.3 伪类3.7.4 设置鼠标属性:cursor3.7.5 层标签 四、JS(JavaScript)4.1 作用4.2 特点4.3 格式4.4 定义位置4.5 js语法4.5.1 变量的定义4.5.2 布尔类型4.5.3 字符串中常用属性和方法4.5.4 数组4.5.5 js中的运算符: 4.6 函数的定义4.6.1 系统函数:4.6.2 自定义函数:无参方法和有参方法4.6.3 程序调试4.6.4 匿名函数4.6.5 变量的作用域 4.7 JS的对象4.7.1 BOM4.7.2 window对象的常用属性4.7.3 window常用方法4.7.4 onload一个页面或一幅图像完成加载4.7.5 通过js操作页面元素 4.8 js实现特效4.8.1 内置对象4.8.2 动态时钟4.8.3 Dom操作(Document操作)4.8.4 操作节点4.8.5 (省市级联)二级联动 前端基础 一、项目开发流程
一般来说:
- 确定需求
- 效果图
- 前端工程师将图片效果转化成页面
- 后端工程师将页面静态效果实现动态效果
- 测试工程师测试代码是否有问题
- 运维工程师上线和后期维护
更规范的说:
二、HTML(超文本标记语言) 2.1 HTML基本结构html的组成部分:标签—<标签名>
注:html的标签大多数都是成对出现的,包含开始标签和结束标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 要展示给用户的内容(文字,视频,图片等) </body> </html> 2.2 页面的编码方式gb2312-支持中文
UTF-8-中英文都支持(多用)
2.3 HTML常用标签 2.3.1 标题标签 <h1></h1>----<h6></h6>特点:独立成行,文字加粗,h1最大,h6最小。
<h1>标题标签h1</h1> <h2>标题标签h2</h2> <h3>标题标签h3</h3> <h4>标题标签h4</h4> <h5>标题标签h5</h5> <h6>标题标签h6</h6> 2.3.2 段落标签 <p></p>特点:标记p标签中的文本属于同一段落,p标签结束后换行。
<p>怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。</p> <p>怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。</p> 2.3.3 换行 <br>特点:自封自闭标签,换行后不增加行间距,p标签换行存在行间距,斜杠可以省略
<p>怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。</p> <p>怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。<br>怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。</p> 2.3.4 水平线 <hr>特点:水平线,默认居中,可以设置宽度(单位可以是百分比,也可以是像素)。
<hr> <hr width="50%"> 2.3.5 加粗、倾斜标签 加粗文字:<strong>文字</strong> 文字倾斜:<em>文字</em> 加粗文字:<strong>加粗文字</strong> 文字倾斜:<em>文字倾斜</em> 2.3.6 转义符 空格 >大于号 <小于号 ©版权符 2.3.7 图片标签 <img src="图片路径" width="宽度" height="高度" title="提示文本" alt="提示文本" /> title是在页面能正确加载的情况下显示的文字,alt是图片加载失败的时候显示的文字 2.3.8 font标签 <font color="颜色单词" size="文字大小"/> 文字值最大到7,默认是3,范围:1-7 2.3.9 超链接标签 <a href="链接的页面或地址" target="链接页面的打开方式">文本或图片</a> 补充:target的值: _self:指在自身页面中打开(默认) _blank:新开一个窗口显示页面 超链接的功能: 1.实现多页面之间的跳转 2.实现指定位置的跳转(锚链接) 实现步骤: 1.先创建锚链接 在要跳转的位置添加下列代码:<a name="自定义名称">文字</a> 2.给链接建立指向 <a href="#自定义的名称">文字</a> 扩展:当锚链接的地址不在本页面时,建立链接指向时,使用<a href="跳转的页面#自定义名称"></a> <a href="two.html#one"></a> <!--two.html是跳转的页面,one是锚记点--> 3.发送邮件 <a href="mailto:收件人邮箱"></a> 2.3.10 列表标签 无序列表: <ul> <li></li> </ul> 有序列表: <ol> <li></li> </ol> 自定义列表: <dl> <dt>列表的标题</dt> <dd>列表项</dd> </dl> 2.3.10.1 无序列表(默认实心圆点): <ul type="disc"> <li>无序内容1</li> <li>无序内容2</li> <li>无序内容3</li> <li>无序内容4</li> </ul> <ul type="circle"> <li>无序内容1</li> <li>无序内容2</li> <li>无序内容3</li> <li>无序内容4</li> </ul> <ul type="square"> <li>无序内容1</li> <li>无序内容2</li> <li>无序内容3</li> <li>无序内容4</li> </ul> 2.3.10.2 有序列表(li独立成行): <ol type="A"> <li>有序内容1</li> <li>有序内容2</li> <li>有序内容3</li> <li>有序内容4</li> </ol> <ol type="a"> <li>有序内容1</li> <li>有序内容2</li> <li>有序内容3</li> <li>有序内容4</li> </ol> <ol type="I"> <li>有序内容1</li> <li>有序内容2</li> <li>有序内容3</li> <li>有序内容4</li> </ol> <ol type="i"> <li>有序内容1</li> <li>有序内容2</li> <li>有序内容3</li> <li>有序内容4</li> </ol> <ol type="1"> <li>有序内容1</li> <li>有序内容2</li> <li>有序内容3</li> <li>有序内容4</li> </ol> 2.3.10.3 自定义列表: <dl> <dt>一年级</dt> <dd>张三</dd> <dd>李四</dd> <dd>王五</dd> <dd>赵六</dd> <dt>二年级</dt> <dd>张三</dd> <dd>李四</dd> <dd>王五</dd> <dd>赵六</dd> </dl> 2.3.11 表格标签作用:实现页面内容的布局
<table> <tr> <td>内容</td> </tr> </table> <table border="1"> <tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table>注:
tr-行,td-单元格,有几个td就表示有几列
1.常用属性:(table标签中)
border=“1” --显示表框线
cellspacing=“0”-取消边框线之间的间距
width:宽度–单位像素/百分比
height:高度–单位像素/百分比
2.设置对齐方式:
<1>表格的对齐方式:
align=""(加在table标签中)
取值:left,center,right
<2>设置单元格内容的对齐方式:(加在tr或td中)
水平方向:
align=“left”/“right”/“center”;
垂直方向:
valign=“top”/“center”/“bottom”
3.合并单元格:写在td标签中
合并行:rowspan=“行数”
合并列:colspan=“列数”
说明:水平方向上的合并,是合并列
? 垂直方向上的合并,是合并行
2.3.12 iframe框架(内联框架)功能:在本页面中可以划分区域,显示其他页面内容,同时可以实现页面的共享
实现方式:
<iframe src="默认的链接页面" name="框架名" width="" height=""></iframe>定义完成以后,使用a标签进行关联:
<a href="链接的页面" target="框架名"></a> 2.3.13 表单标签用来手机用户信息的网页,都是用的是表单。
<form action="提交地址" method="提交方法"> 表单元素 </form> <h1>表单form</h1> <form action="请求地址" method="post/get"> 用户名:<input type="text" name="username"> 密码:<input type="password" name="password"><br> 单选框:<br> 性别:男<input type="radio" name="sex" checked="checked">女<input type="radio" name="sex"><br> 复选框:<br> 爱好:篮球<input type="checkbox"> 足球<input type="checkbox"> 排球<input type="checkbox"> 羽毛球<input type="checkbox"><br> <select name=""> <option>北京</option> <option>上海</option> <option selected="selected">南京</option> <option>杭州</option> </select> <br> 多行文本域:<br> 协议:<textarea rows="10" cols="10" readonly="readonly">协议内容协议内容协议内容协议内容协议内容协议内容协议内容</textarea> <br> 上传头像:<input type="file"><br> <button type="reset">重置</button> <button type="submit">提交</button> </form>value属性也是标签元素都有的一个属性,但是它主要用来设置默认值或表示提交的内容。
2.3.14 div标签作用:实现页面布局
示例:
内容
<div>内容</div> <!--独立成行-->独立成行
常用属性:
? height(高度),width(宽度),
? background-color(背景颜色)
? background-image(背景图片)
? background-repeat(背景重复):no-repeat,repeat,repeat-x,repeat-y
? background-position:(背景位置) 先水平位置然后垂直位置,中间使用空格间隔
? 单位:left,center right,top center bottom
? 或 Xpx Ypx (X是水平方向的值,Y是垂直方向的值)
? 示例: background-position:20px 30px
三、CSS样式 3.1 css层叠样式表功能:美化页面,可以实现页面内容和表现的分离。
body中主要负责添加网页内容,css主要负责美化。
3.2 css的语法 选择器{ 样式1; 样式2 }注:多个声明语句使用分号隔开,最后一个声明语句,分号可以省略
声明语句语法:属性名:属性值
示例:
h1{ font-size:12px; //设置文字大小12px color:red// 设置字体颜色红色 } 3.3 css中选择器的类型 3.3.1 标签选择器:? 语法:标签名{声明}
? 示例:p{color:red}
? 特点:即时性,立即就能看到效果
3.3.2 类选择器:? 语法:.自定义类名{声明语句}
? 注:需要在标签中使用class属性引用该类样式,才能起作用
? 示例:
? .c1{color:red}
在标签中引用:
<p class="c1"></p>特点:先定义后引用
3.3.3 id选择器–使用标签中的id属性注:id属性的值在同一页面中不允许重复
对比name和id属性的区别:
相同点:给标签起名字
不同点:在同一个页面中name属性值可以重复,id的属性值不可以重复
语法:
? 1.在标签中定义id属性
<p id="自定义名"></p>? 2.定义id选择器
? #id名{}
3.4 css定义的位置 <head> <style type="text/css"> css声明语句 </style> </head>1.行内样式:在标签中使用style属性
注:只能控制所在的标签
语法:<标签名 style=“属性名:属性值”>
示例:
<p style="color:red;font-size:12px"></p>使用场合:当需要单独设置某一个标签内容的样式时
2.内部样式:在head标签中使用style标签
优点:方便修改页面样式
缺点:不能实现资源共享,不能完全的分离内容和样式
<head> <style></style> </head>3.外部样式:定义.css文件,然后再和页面进行关联
优点:内容和样式完全独立
导入css文件的方式:
1.链接式:在head标签添加link标签
<link rel="stylesheet" type="text/css" href="css文件路径"/>注:css文件中只有css样式,没有标签
2.导入式:在head标签中添加(现在很少用)
<style type="text/css"> @import url("css文件的路径"); </style>补充:
html中的注释:
<!--注释内容-->注释:类似于代码的说明信息,给程序员看,但浏览器不执行
3.5 css优先级(高->低)1.选择器:
id选择器>类选择器>标签选择器
2.样式导入-就近原则
最高级:行内样式
内部样式和外部样式,哪个在后,则以哪个为最后结果
3.6 高级选择器使用场合:当页面标签出现嵌套时,做页面定位时使用
分类:
1.后代选择器:
语法:父标签(父选择器) 子标签(子选择器){样式}
含义:页面定位时,给父标签中的子标签设置样式
示例:p span{color:red}–只给p标签中的span设置红色
<p><span></span></p>? 注:中间使用空格间隔
2.交集选择器:
语法:标签名#id名{样式}
? 标签名.类样式名{样式}
使用场合:当出现同名标签时,并且只能通过标签中的id或class属性进行区分时使用
注:中间没有空格,并且第一个选择器必须是标签选择器
示例:span#one{color:red}–id值是one的span标签
标签:
<span id="one"></span>3.并集选择器:
语法:选择器1,选择器2…{样式}
使用场合:当页面中某些部分设置的是同样的样式时,可以使用并集选择器进行列举
注:选择器中间使用逗号隔开
示例:span,#one{color:red}
页面:
<span></span> <p id="one"></p>4.全局选择器: *{css}
3.7 CSS样式属性 3.7.1 文字样式font-family:设置文字字体
font-size:文字大小(像素为单位)
font-style:是否倾斜
font-weight:是否加粗
3.7.2 文本样式color:颜色
text-align:文本的水平对齐方式
text-indent:2em-首行缩进2个字符,也可以是像素单位
line-height:设置行高(单位:px),文本内容默认在行中间(居中)
text-decoration:文本装饰(取值:none,underline,line-through,overline)
vertical-align:垂直方向(top,middle,bottom(默认))
3.7.3 伪类语法: 选择器:伪类名{样式}
伪类名的分类:
1.未点击时:
? :link
2.鼠标放上时:
? :hover
3.访问过后:
? :visited
4.鼠标按下(不要释放鼠标):
? :active
3.7.4 设置鼠标属性:cursor? 属性值:wait(等待),help(帮助),pointer(小手)
span { cursor: pointer } 3.7.5 层标签作用:实现页面布局
示例:
<div>内容</div>独立成行
常用属性:
? height(高度),width(宽度),
? background-color(背景颜色)
? background-image(背景图片)
? background-repeat(背景重复):no-repeat,repeat,repeat-x,repeat-y
? background-position:(背景位置) 先水平位置然后垂直位置,中间使用空格间隔
? 单位:left,center right,top center bottom
? 或 Xpx Ypx (X是水平方向的值,Y是垂直方向的值)
? 示例: background-position:20px 30px
四、JS(JavaScript)可以协助HTML,实现页面动态效果。
4.1 作用\1. 做表单验证,减少服务器压力
\2. 页面特效
\3. Ajax异步请求
4.2 特点将页面元素和语法绑定到一起,最终实现页面特效。js属于弱语言。
4.3 格式js代码可以在html中的任何地方出现,只有在调用之前能加载到页面中即可.
<script type="text/javascript"> document.write("输出内容<br/>");//等价于java中的system.out,并且可以在输出内容中添加html标签 </script> 4.4 定义位置 <!--内部js--> <head> <script type="text/javascript"> js代码 </script> </head> <!--行内js--> <input type="button" 事件名称="函数名()"> <input type="button" onclick="javascript:alert('点击了按钮!')"> <!--外部js--> 先在外部创建 文件名.js 文件 然后通过如下方式引用: <script type="text/javascript" src="文件路径/文件名.js"></script> 4.5 js语法 4.5.1 变量的定义var 变量名;
变量名=变量值;
或: var 变量名=变量值;//字符串使用双引号引起来
示例: var str=“张三”;
? var age=19;
注:var关键字可以省略,但是不建议这么写,同时注意变量名的大小写
4.5.2 布尔类型取值为true,false 示例:var ishave=true;
4.5.3 字符串中常用属性和方法属性:变量名.length 获得字符串长度
方法:
charAt(int index);//参数为下标,下标从0开始,获得指定下标位置的单个字符
indexOf(‘单个字符’);//判断指定的字符在字符串中首次出现的下标,未找到时返回-1
substring(int begin,int end);//截取字符串,包含开始位置,不包含结束位置
split(“拆分元素”);//将字符串拆分成数组
示例:
var str2=“张三,李四,王五”;
var strs=str2.split(",");
? for(var i=0;i
? document.write(strs[i]+" ");
? }
4.5.4 数组1.数组的定义:
var 数组名=new Array(长度);//长度可省略
var 数组名=[值1,值2,值3…];
2.数组的赋值:
数组名[下标]=值;//下标从0开始
3.数组的属性和方法:
属性:length 数组的长度
遍历数组:
for(var i=0;i<数组名.length;i++){}增强for循环:
for(var i in names){ document.write(names[i]+"-----"); }方法:
插入符号:数组名.join("-");//返回的是字符串
升序排序:数组名.sort()//默认按首字母或首个数字排列
实例:
//先定义排序规则 function sortNumber(a, b){ return a - b; } var arr3=[11,99,7,88,23,26]; arr3.sort(sortNumber);//传递排序方式 for(var i in arr3){ document.write(arr3[i]+""); } 4.5.5 js中的运算符:1.算术运算符 + - * / % ++ –
赋值运算符 =
比较运算符 > < >= <= == !=
逻辑运算符 && || !
2.if,if-else,for,while,do-while,switch都和java一样
3.continue,break,return 也和java一样
4.单行注释://
多行注释:/**/
5.弹窗:
alert(‘弹出信息’);
prompt(“提示信息”,‘文本框中的默认值’);
示例:
<script type="text/javascript"> function test(){ var num= prompt("请输入值",''); alert("num="+num); } </script> <input type="button" value="测试" onclick="test()" /> 4.6 函数的定义函数在java中称为方法
分类:系统函数和自定义函数
4.6.1 系统函数:parseInt(“字符串”)//将字符串中的数值转换成数值类型的数值,“123”->123
parseFloat("")
示例:
var str="123"; var num=parseInt(str); document.write(num+3); isNaN(str);//当str是非数字时,返回true 4.6.2 自定义函数:无参方法和有参方法语法:
function 方法名(参数列表){ //js代码 }调用:事件名=“方法名()” //注:当调取有参方法时,需要给定参数,定义有参方法时不需要指定数据类型
示例:
<script type="text/javascript"> function test(a,b){ alert("abc///"+a+","+b); } </script> <body> <input type="button" value="测试" onclick="test(555,66)"/> 4.6.3 程序调试(1)浏览器的调试工具F12,firebug
(2)alert()弹窗辅助排错
4.6.4 匿名函数(1) 定义:
? var 变量名=function(参数){}
(2) 调用:
? 事件名=“变量名(参数值)”
示例:
var a=function(){ alert("匿名函数被调用!"); } 4.6.5 变量的作用域 var i=10;//全局变量 var a=function(){ var i=20;//局部变量 alert("i="+i); } 4.7 JS的对象 4.7.1 BOM浏览器对象模型(Browser Object Model)
浏览器对象(window),window对象的属性和方法见下。
4.7.2 window对象的常用属性1.history:历史记录
<span onclick="javascript:window.history.go(-1)">后退/上一页</span> <span onclick="javascript:window.history.go(1)">前进/下一页</span>2.location:用于跳转到指定页面
<input type="button" value="去注册" onclick="javascript:window.location.href='b.html'" /> 4.7.3 window常用方法prompt( ) 显示可提示用户输入的对话框
alert( ) 显示带有一个提示信息和一个确定按钮的警示框
confirm( ) 显示一个带有提示信息、确定和取消按钮的对话框
? 示例:
function a(){ var rs=confirm('你确定要删除?'); if(rs){ alert("真的删除了"); }else{ alert("又不删除了"); } }close( ) 关闭浏览器窗口
<input type="button" value="close" onclick="javascript:window.close()" />open() 打开一个新的浏览器窗口,加载给定 URL 所指定的文档
window.open("页面地址"); 或: window.open("页面","名称(可不写)","height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0");setTimeout( ) 在指定的毫秒数后调用函数或计算表达式
setInterval( ) 按照指定的周期(以毫秒计)来调用函数或表达式
4.7.4 onload一个页面或一幅图像完成加载示例:
<body onload="">onmouseover 鼠标移到某元素之上
onmouseout 鼠标离开的时候
onclick 当用户单击某个对象时调用的事件句柄
onkeydown 某个键盘按键被按下
onchange 域的内容被改变(一般用在下拉框)
onfocus 获得焦点
onblur 失去焦点
示例:
<span onmouseover="javascript:alert('谈谈谈');">fsfasfas </span> <input type="text" onkeydown="javascript:alert('写写写')" /> <select onchange="javasript:alert('修改')"> <option>北京</option> <option>上海</option> </select> 4.7.5 通过js操作页面元素document–文档(DOM- (Document Object Model)文档对象模型)
主要操作的是页面元素(页面标签)
1.常用方法:获得页面元素内容的值
getElementById() 返回对拥有指定id的第一个对象的引用
示例:
function clearText(){ // 点value获得的是文本框中的文本信息 var uname=document.getElementById("uname").value; if(uname=='请输入用户名'){ //value后加等号表示赋值(修改原来的value属性值) document.getElementById("uname").value=""; } }getElementsByName() 返回带有指定名称的对象的集合
示例:checked属性用来判断复选框是否被选中
function c() { var strs= document.getElementsByName("love"); for(var i=0;i<strs.length;i++) { //判断用户选中了哪一个 if(strs[i].checked==true){ alert(strs[i].value); } } }getElementsByTagName() 返回带有指定标签名的对象的集合
write() 向文档写文本、HTML表达式或JavaScript代码
4.8 js实现特效 4.8.1 内置对象Array,Math,String,Date
var iNum=Math.floor(Math.random()*98+2); //2-99之间的值
4.8.2 动态时钟 function getTime() {//通过onload事件触发这个函数 var date = new Date(); var year = date.getFullYear();//得到年 var month = date.getMonth() + 1;//得到月份 var day = date.getDate();//获得几号 var week = date.getDay(); //得到星期 var hour = date.getHours(); //得到小时 var minutes = date.getMinutes();//得到分钟 var sec = date.getSeconds();//得到秒 var str = year + "年" + month + "月" + day + "日 星期" + week + " " + hour + ":" + minutes + ":" + sec; document.getElementById("time").innerHTML = str; } 4.8.3 Dom操作(Document操作)它操作的是页面的标签元素
document对象
getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)
示例:
var a=text.getAttribute("type"); text.setAttribute("type","button"); 4.8.4 操作节点创建和增加节点的方法:
createElement("标签名"):创建节点,返回的是新节点对象 ,document对象调用 //下面的这些方法基本都是使用父元素对象调取 appendChild(新节点对象):末尾追加方式插入节点 insertBefore(新节点对象,旧节点对象):在指定节点前插入新节点 cloneNode(false):克隆节点,false表示不克隆其之内容 removeChild(被删除节点的对象):删除节点 replaceChild(替换的新节点,被替换的旧节点) :替换节点 4.8.5 (省市级联)二级联动 <script> function a1() { // 1.先获取用户选择的市信息 var city = document.getElementById("city").value; if (city == "请选择") { alert("请先选择市的信息"); } else if (city == "beijing") { // 给区的下拉框添加信息 var region = document.getElementById("region"); // 先清空原有下拉框 region.length = 0; // 再添加新列表 // new Option() 等价于 <option value="值"> region.add(new Option("东城", "dongcheng")); region.add(new Option("西城", "xicheng")); region.add(new Option("朝阳", "chaoyang")); } else if (region == "shanghai") { var region = document.getElementById("region"); region.length = 0; region.add(new Option("浦东", "pudong")); } } </script> <body> <h1>省市级联</h1> <select onchange="a1()" id="city"> <option value="-1">请选择</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select> 市 <select id="region"> <option>请选择</option> </select> 区 </body>
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #06夯实基础之H5前端 #HTML基本结构22 #页面的编码方式23 #HTML常用标签231 #标题标签232 #段落标签233 #换行234