版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)
HTML
1.网页页面内右击——显示源码 ,相同的代码在不同的浏览器上显示效果不一样。
2.HTML是超文本语言和标记语言:
超文本:就是指页面内可以包含图片、连接等非文字内容。
标记语言:就是使用标签的方法将需要的内容包括起来。如:<a>www….</a>
3.HTML不编译直接使用浏览器运行,以.html或 .htm后缀,由标签组成不区分大小写,开始标签结束标签组成,无结束标签以“/”结尾。
4.HTML结构包括:head 和body 、html
head:存放页面的重要信息,一般不再页面上显示
子标签:
title:标题
meta:用来存放页面重要信息
link:样式
style:样式
Body:存放要展示的信息。
html:为根标签。
<html>
<head>
<title> Hello html </title>
</head>
<body>
</body>
</html>
5.注释与Java一样不能嵌套:注释为<!-- --> 。
6.源码中的代码格式不会显示在页面中,只能使用标签来体现。
8.标签:若哪个属性自适应可用100%
1.标题:共六级 H1-h6:
<h1> </h1>
特点:依次变小,加粗字体,默认换行。
2.水平线:
<hr />:直接就这么用。
size:设置线的粗细 noshade:有无阴影 noshade
width:设置宽度 开标签的内容称之为属性:键=“值”
设置尺寸方案:
(1)值px:(40px)值加像素
(2)值 :40
(3)使用百分比:50% (只有横向上使用)
3.字体:
<font > </font>
Color :设置字体颜色 Alt+/或自己配色#000000每两位代表红绿蓝依次 共六位值。
Face: 字体
size: 字体大小(取值1-7)按照规范的取值设置
4.加粗 斜体:
<b> </b>同<strong></ strong> <i> </i> 可嵌套
5.换行:中间有空格
<br />
6.转义字符:
 :空格 ©:? <:小于 >:大于
7.段落:
<p> </p> 特点:段落间自动加换行。
8.添加图片
<img src=”” alt=”” title=””>
属性有:
alt:图片无法显示时的替代文本。
title:鼠标移动到图片上显示的文字。
width:设置图片宽度
height:定义图片高度
路径: ../:代表上一级目录。
相对路径:同一片的路径是根据当前html文件的位置推导的,故为相对路径
9.列表:
有序列表:<ol> ——orderd list
<li></li>
</ol>
无序列表: <ul>
<li></li>
</ul>
type:ol——A、a、1…
ul——circle、disc、square
10.超链接:
<a href=” “ target=””> </a>
href:连接路径
target:页面控制
_black:开启新页面显示内容。
_self :新页面覆盖就页面(默认)。
自定义:给部分页面起名,参数则用自定义名,则在此部分页面显示。
9.布局:
1.表格进行页面布局
<table> 创建表的快捷方式:tr*行数>td*列数 + tab
认为:任何数据显示都可以存储在表格中,表格由行与列组成。
<tr>:行
<td>:列
</td>
</tr>
</table>
table属性:
border:设置边框粗细
设置间距:cellpadding=”0px “ 元素与单元格之间的间距
cellspacing=”0px” 单元格之间的间距
width:表格的宽度
bgcolor:单元格的背景色
align:
td:设置当前单元格的对齐方式 tr:设置所有单元格的对齐方式
table:设置表格本身在body中的对齐方式,单元格不受影响
表格的跨行跨列:
跨列:<td colspan=”列数”> </td>
跨行:<td rowspan=”行数” ></td>
跨行又跨列:<td colspan=”列数” rowspan=”行数”></td>
2.框架布局 <frameset> 与<body>不共存
上下布局:<frameset rows=”30%,*” > rows=”
<frame/>
<frame/>
</frameset>
左右布局:<frameset cols=”30%,*”> cols=””
<frame/>
<frame/>
</frameset>
上下加左右:
<frameset rows=”30%,*” >
<frame noresize=”noresize”/>
<frameset cols=”20%,*”>
<frame noresize=” noresize”/>
<frame noresize=” noresize”/>
</frameset>
</frameset>
<frameset>属性:rows、cols属性取值:值1、值2、值3…..一值表分一块, 多值使用“,”分割。*:代表剩余量。
<frame>属性:src: 确定页面的路径
noresize:框架分割线能不能移动 noresize=:”noresize” 设置不可拖动
name: 框架页面的名字
*如何不同的frame显示相应的页面
添加属性:src=”页面路径”
*左侧的菜单栏单击时,如何将内容显示在右侧
A、右侧frame设置name属性
B、左侧页面路径的超链接的target=”右侧的frame的name值”
3.div+CSS
HTML表单&CSS
Web执行流程:浏览器将数据发到服务器 服务器处理数据 服务器将结果返回浏览器。
提交到服务器端数据格式:域名?键1=值&键2=值2&。。。。
表单涉及到要素:
*要发送到服务器的地址 <form>中使用action=“服务器URL”
*<input>输入项让客户 输入
*程序员要指定键 即输入项中输入name,name即输入的键。
*发送方式 默认method为GET即默认,POST则为不显示数据
name:
1.表单标签:
<form>:将数据提交到服务器,负责收集数据的标签必须放在表单标签体内
属性:
action: 请求路径,确定表单提交到服务器的地址。
method:请求方式,常用取值只有:GET、POST
GET: 默认值 提交的数据追加在请求路径后面
请求路径长度有限,故get请求的数据有限。
POST:提交的数据 不 追加在请求路径后面 请求的数据以流的形式传输
2.输入域标签 :
<input type=>:获得用户输入的信息,type属性值不同,搜集方式不同
Type表单输入项的属性值:
text: 文本框,单行
password:密码框,以黑圆点显示
radio:单选框,放到同一个组,组的指定 即两个input的name值要一样 必须要有value值,否则传的为on默认选定:checked =“checked”/ true;
submit:提交按钮
checkbox:复选框 name 相同,也要有value值 否则传的为on
默认选定:checked =“checked”/true;
file:文件上传按钮,提供选择文件
hidden:隐藏字段,存储不需要在客户端显示但要发送给服务器的数据。很重要
reset:重置按钮。将表单恢复默认值。
button:普通按钮,常与JavaScript结合使用。
name: 元素名,如果需要表单数据提交到服务器,必须有name服务器通过此属性获取到提交的数据。
value: 设置input标签的默认值,submit和reset按钮显示数据,其他的均是提交数 据网址上显示的值,若未设置则为name值=on
size: 设置长度
checked: 单选框或复选框默认被选中。
readonly: 是否只读,不允许修改,数据依据可以传入服务器
disabled: 不可用,且不回显,即不发送到服务器
maxlength:最大长度
required: 此input标签为必填项。
3.下拉列表:
<select> :进行多选和单选,需使用标签<option>指定列表项
name:发送给服务器的名称
multiple:取值为multiple表示多选
<option>子标签:下拉列表中的一个选项
selected:勾选当前列表项
value:发送给服务器的选项值
4.文本域:
<textarea>:可输入多行
name:名字
rows:指定行数
cols:指定列数
CSS层叠样式表
1.HTML与CSS关系:
HTML:主要存储网页中的内容
CSS:主要对HTML内容进行装饰的
2.CSS一般结合HTML标签使用:常用标签div和span。
div:进行区域划分,独自占一行,自带换行。
span:不换行,区域刚好包含当前内容
3.注意:
CSS样式选择器 严格区分大小写,属性和属性值不区分大小写,多属性间“;”分割,若此属性值由多词组成引号引起。
4.HTML引入CSS style
1.行内样式:
* HTML中使用style属性,编写CSS代码
<a style=”color:#f00;font-size:30px;”>传智博客</a>
2.内部样式:内嵌式
*在HTML的<head>标签中使用 <style> font{ 参数} </style>
<style type=”text/css”>
font{
Background-color:#ddd;
}
</style>
3.外部样式:链入式。
将样式放在以.css为扩展名的外部文件中,HTML通过
<link rel=“stylesheet” href=“CSS文件路径”>。一个文件多次使用。
rel:属性规定当前文档与被链接文档之间的关系
*优先级:行内样式最高,离标签越近优先级越高
5.CSS选择器(内部样式) 选择CSS样式作用在哪些标签上
*id选择器:针对一个
#id名{属性1:属性值1;属性2:属性值;…..} id不能以数字开头。
*类选择器 针对一类
.类名{属性1:属性值1;属性2:属性值;…. }
*元素选择器
标记名{属性1:属性值1;属性2:属性值;…..}
h1{color:#f00;font-size:50px;}
<h1>传智博客</h1>
*属性选择器★ (派生的选择器)
要求:
html元素必须有一个属性不论属性是什么且有值 <xxx nihao="wohenhao"/>
css中通过下面的方式使用
元素名[属性="属性值"]{....}
例如:
xxx[nihao="wohenhao"]{....}
*层级(后代)选择器:给父标签的后代标签设置样式
父标签 后代标签{属性1:属性值1;属性2:属性值;…..};
了解的选择器
锚伪类选择器 顺序固定
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
6. 块标签:以区域块方式出现。每个块标签独自占据一整行或多整行。
常见的块元素:<h1>、<div>、<ul>等
行内元素:不必在新的一行开始,同时也不强迫其他元素在新的一行显示。
常见的行内元素:<span>、<a> 等
6.CSS的样式参数 均在选择器的{}内 css样式一般会有“-”
字体
font-family:设置字体(隶书) 设置字体家族
font-size:设置字体大小
font-style:设置字体风格
文本:改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进
color:文本颜色
line-height:设置行高
text-decoration: 向文本添加修饰。 none underline
text-align:对齐文本
列表:
list-style-type:设置列表项的类型 例如:a 1 实心圆
list-style-image:设置图片最为列表项类型 使用的时候使用 url函数 url("/i/arrow.gif");
背景:
background-color:设置背景颜色
background-image:设置图片作为背景 url
边框和尺寸:
border:宽度 样式 颜色 border:1px solid #f00
样式取值:solid 实线 none 无边 double 双线
width 、height:标签的宽度和高度
设置超链接的样式:
去除下划线:text-decoration
布局:
float:浮动
属性值:left right none(默认不浮动)
clear:清除浮动的影响
属性值:left right both
现象:有的浮动有的不浮动
页面分两部分天花板和地板,客户从上向下看,两部分重合。消除重叠:clear
转换:
块标签:以区域的方式出现。每块单独整行或多整行。
常见块元素:<h1> <div> <ul>
行内元素:不必新开始一行,
常见行级元素:<span> <a>
行内元素与块元素转换:display
选择器{display:属性值}
block:此元素将显示为块元素
none:此元素将被隐藏,也不占用页面空间
inline:此元素将显示为行内元素,(行内元素默认的display属性值)
修改样式
操作css属性
document.getElementById("id").style.属性="值"
属性:就是css中属性 css属性有"-" 例如:backgroud-color
若有"-" 只需要将"-"删除,后面第一个字母变大写即可
7.CSS的盒子模型:网页f12可看3D视图
即可以嵌套 可平级。CSS一些组件可以看做是盒子 body是大盒子 div是小盒子
padding:内边距,与内部盒子的距离 但置右和下可能无效
padding-top:上内边距
padding-left : 左内边距
border:边框
border-top-style:上边距样式
border-left-style:左边距样式
margin:外边距,即不同盒子间距离 但置右和下可能无效
margin-top:外上边距
margin-left : 外下边距
8.HTML+CSS--------------------没有动态效果的页面。
JavaScript
1. JavaScript开发交互式的web页面,轻量级的脚本语言。不需要编译,直接嵌入在HTML页面,由浏览器执行。
2. 编译型计算机语言 (效率高)
源码编译生成机器码,每次执行都执行机器码
解释型计算机语言
编写源码,每次执行都是执行源码
3.作用:
1. 添加页面动画效果,提供用户操作体验
2. 主要应用有:嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等
4.JS引入方式
内嵌式: <head>中,通过<script >
<script type=”text/javascript”>
Js代码
</script>
外联式:在HTML中,通过<script src=””>引入
<script src=”js代码地址” type= “text/javascript” charset=”utf-8”></script>
5.JS学习路线
基本语法-----ECMAScript:基本语法(语法,语句)
变量、运算符、流程控制、方法
对象:
BOM:浏览器对象
DOM:操作文档中的元素和内容。
1).变量
1. 命名规范:?
必须以字母或下划线开头,中间可数字、字符或下划线
变量名不能包含空格等符号
不能使用JavaScript关键字作变量名,如:function
JavaScript严格区分大小写。
2.变量的声明:var 变量名; //JavaScript变量可不声明直接使用。默认值:undefined
3.变量的赋值:var 变量名 = 值; 是弱类型,即一个变量可存放不同类型的数据,只能 使用var(variable)定义变量。
2).数据类型:
基本数据类型:
整型-------整数
浮点-------小数
字符串-----“ abc”/’abc’
布尔--------true /false 和其他(与Java不同)
Null---------空 ,一个占位符。值 undefined是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的。
---undefined声明变量未初始化时,变量默认值为undefined。
alter(null==undefined):为TRUE,值相等但含义不同。
引用数据类型: 引用类型通常叫做类(class),处理的是对象如(Windows)。
JavaScript是基于对象而不是面向对象。对象类型的默认值是null.
JavaScript提供众多预定义引用类型(内置对象)。
3).运算符: 与Java基本一致
算数运算符
赋值运算符
逻辑运算符
比较运算符:
===:全等,值和类型都相等。 !==
== : 忽略数据类型比较值 !=
var num1=”5” var num2=5;
window.alert(num1==num2) true
window.alert(num1===num2) false
4).流程控制;
Java中if的条件必须是布尔值。而JS中多种 if语句内一定要有返回值的真假。
Undefined false
null false
Number(+0,-0或NaN) false 余为true
String 空串为 false
Object(如果为对象) true
特殊值:NaN (not a number)
5).方法的编写及调用 Java中的方法method js中的函数function
回调函数:函数我们写的,但是调用时机不受我们控制
Java 实现:
Public static int getSum(int num,int num2){
returen num1+num2;
}
调用:
Int sum = getSum(1,2);
JS 实现
Function 函数名 (参数1,参数2){
函数实现;
}
var demo=function(){}
调用
规范调用:与Java一样 var sum = getSum(1,2)
非规范调:只要方法名合法,参数列表可以不一样。不建议。 也可以直接写方法名不要“()”
注意:JS不存在重载,如果方法名一样,那么后面的方法会覆盖掉前面的。
6.BOM对象:
*Window——窗体
alert——警告框
window.alert(“警告消息”) alert(false||"abc")
confirm——确认框——返回boolean值
var flag = confirm(“确认删除?”);
alert(“客户选择:”+flag);
prompt——输入框——返回客户录入的文本
var v = prompt(“请您输入数据:”);
alert(“客户输入的是:”+v);
innerHTML:向页面的某个元素中写内容,将原有的东西覆盖。
<script>
window.onload = function(){
var t1 =document.getElementById("t1");
t1.onmouseover = function(){
t3.value = "鼠标移入t1"
}
t1.onmouseout = function(){
t2.innerHTML = "鼠标移出了"
}
}
</script>
<body>
<div id="t2"></div>
<input type="text" id="t1" />
<input type="text" id="t3"/>
</body>
*location——单击事件,跳转到新的页面
<script>
function hehe(){
location.href="../轮播图/轮播图.html";
}
</script>
<input type="button" value="单击我" onclick="hehe()"/>
*History——浏览器有前进和返回功能,但使用前提是有历史记录,并在history中。
history.forward() = history.go(1)
history.back() = history.go(-1)
例:
页面一: <script>
function end(){
history.forward();
}
</script>
<body>
我是 start
<a href="end.html">跳转到end</a>
<input type="button" value="去end" onclick="end()"/>
</body>
页面二: <script>
function backto(){
history.back();
}
</script>
<body>
我是end
<input type="button" value="返回" onclick="backto()" />
</body>
7.DOM 对象 Document object model 文档对象。代表整个HTML文档
页面加载完实现:window.onload = function(){}
1).获取DOM对象
A. JS 内置对象document,代表了文档
B. 每一个标签(又称为元素)都可以看做是一个对象
C. 获取一个具体的标签对象
<div id=”d1”> hello word </div>
<script>
var d1 = document.getElementById(“id值”);
window.alert(d1);
</script>
*将script放到head中取不到d1(null)
原因:和页面加载顺序有关,从上向下加
*解决办法:
1.将script代码存储在要获取的元素的下面
2.body中 设置属性 onload=“函数”当Body页面加载完后执行函数。JS在head中,编写函数实现。HTML中出现了JS代码。
3.去除body的onload属性,在JS中添加代码window.onload = 函数名;函数名无括。 降低耦合性
4.匿名方法
<script>
window.onload = function(){
var d1 = document.getElementById(“id值”);
window.alert(d1);
}
</script>
2).获取标签对象
方式一:var d = document.getElementById(“id”) 根据Id返回标签对象数组
方式二:var ds = document.getElementsByTagName(“标签名”) 根据标签名返回多个对存入数组。
方式三:var ds = document.getElementsByClassName(“类名”)据类名,返回多个对象到数组
3).操作DOM对象
元素操作:createElement、appendChild
document.createElement(”标签名”) 创建元素节点。
document.createNodeText(”文本内容”) 创建文本节点。
setAttribute(name,value); 给元素设置属性名和属性值
ele.appendChild(子元素) 向标签体末尾添加新的子节点。
实例:
在页面加载后,动态给页面的div表中动态添加一个元素,比如超链接等
<!—HTML代码-->
<div id="divId"></div>
<script type="text/javascript">
//1 获得div对象(元素--标签)
var divObj = document.getElementById("divId");
//2 创建a元素
// * createElement 创建指定名称的元素
var aObj = document.createElement("a");
//2.1 创建文件
var nodeObj = document.createTextNode("xxx");
// * 将文本添加到a元素
aObj.appendChild(nodeObj);
//2.2 给a元素设置属性
// setAttribute(name,value) 给指定的元素设置属性,name属性名,value属性值
aObj.setAttribute("href","http://www.itheima.com");
//3 将新创建的a元素,添加到div元素中
// * appendChild 追加子元素
divObj.appendChild(aObj);
</script>
获取内容体: 对象名.innerHTML
获取属性 : 对象名.属性名
操作属性 : 对象.内容体/属性名
获取元素:
var obj=document.getElementById("id值");
获取元素的value属性
var val=document.getElementById("id值").value;
设置元素的value属性
document.getElementById("id值").value="sdfsdf";
获取元素的标签体
var ht=document.getElementById("id值").innerHTML;
设置元素的标签体
document.getElementById("id值").innerHTML="ssss";
d1.innerHTML = “ hello 内容体 ” d1.src = “../../img/image/4.jpg”
注意:
1.属性操作时,class对应的是className,因为class是关键字,比较特殊
获取:对象.className
设置:对象.className = “新值”
2.获取CSS属性
获取:对象名.style.属性
设置:对象名.style.属性 = 值
window.onload = function(){
var d1 = document.getElementById(“d1”);
alert(d1.innerHTML); div的文本
alert(d1.className); div的类名
alert(d1.style.color) div的内嵌style
var i1 = document.getElementById(“i1”);
alert(1.src);
alert(1.titel);
}
<div id = “d1” class = “test” style=”color:red;” > hello dom </div>
<img src = “../../img/image/2.jpg” id = “i1” title = “谢霆锋”>
3).事件:
*页面上的动作
客户对页面操作产生:单击按钮、焦点获得、焦点失去、鼠标移入移出、下拉列表选项选定、键盘按键事件。。。
*浏览器的动作:页面加载。
*添加事件的两种格式:
方式1:标签中添加属性onxxx,xxx一般具有自我描述性
方式2:获得标签对象,window.onxxx = function(){}
事件:
onload:某个页面或图像被完全加载
onsubmit:提交按钮被点击,返回值为true时才提交 form标签中,属性onsubmit=“return 函数()”
onclick:鼠标点击某个对象 其余为 属性
ondblack:鼠标双击某个对象
onblur :元素失去焦点
onfocus :元素获得焦点
onchange:用户改变域的内容
onkeydown:某个键盘的键被按下
onkeypress:某个键盘的键被按下或按住
onkeyup :某个键盘的键被松开
onmousedown:某个鼠标按键被按下
onmouseup:某个鼠标键按键被松开
onmouseover:鼠标被移到某元素上
onmouseout:鼠标从某元素移开
onmousemove:鼠标被移动
4)事件案例
1)获取按下的是哪个按键:
var t1 = document.getElementById("t1");
t1.onkeydown = function(event){
t2.value = event.keyCode;
}
2)单击按钮事件
给按钮添加属性 onclick=“函数()” 在js中写函数体 单击按钮执行函数体
<script>
function hehe(){
alert("单击了按钮")
}
</script>
<input type="button" value="单击我" onclick="hehe()"/>
3)控制表单提交
格式: form标签中,属性onsubmit=“return 函数()”
Js中编写函数实现,如果函数返回true ,就正常提交,否则不提交。
<script>
function test(){
alert("按钮被单击了") }
window.onload = function(){
var d2 = document.getElementById("d2");
b2.onclick = function(){
alert("按钮2被单击了") }
}
</script>
<body>
<input type="button" value="按钮" onclick="test()" />
<input type="button" value="按钮2" id="d2"/>
5)焦点事件:光标在页面中的位置,页面至多只有一个焦点
获得焦点事件:onfocus
失去焦点事件:onblur
1)给标签添加属性onblur/ onfocus = “函数名()”,编写函数的js实现
2)页面加载完,获取按钮对象,再对象.onblur / onfocus = function(){}
<script>
window .onload = function (){
var t1 = document.getElementById("t1");
t1.onfocus = function(){
alert("t1获得焦点")
}
}
function b(){
alert("t2失去焦点")
}
</script>
<body>
<input type="text" id="t1" />
<input type="text" id="t2" onblur="b()" />
</body>
9.this关键字
与Java中一样,代表当前对象,谁调用这个函数代表谁。
例:window.onload = function(){
var t1 = document.getElementById("t1");
t1.onfocus = function(){
//alert(t1.value); 可实现,但不推荐。可能因作用域导致错误
alert(this.value);
}
}
<input type="text" id="t1" value="hh" />
10. JS正则匹配
编写正则:以/^ 开头 以$/结束 中间存储正则表达式 + *
校验:
* 数据.match(正则)
* 正则.test(数据)
var regist =/^ +$/;
if(zhanghao.value.match(regist)){
alert("账号不能为空格");
return false; //此项必须有
}
if(regist.test(zhanghao.value)){
alert("账号不能为空格");
return false; //此项必须有
}
13. JS数组 索引可以是任意值
一维数组:
创建:
var arr = new Array()
var arr = new Array(length) 未赋、越界值为undefined
var arr = new Array(“a’,”b’)
var arr = [“a”,”b”]
使用:数组名[索引] = 值
属性:length 亦可为 size() 获得长度
注意:JS未初始化默认值undefined
Js 不存在越界
容量可变,像ArrayList
数组内元素类型任意
二维数组: 常用于联动中、
var outbox = new Array();
outbox[0] = new Array(“a”,”b”,”c”);
outbox[1] = new Array(“A”,”B”,”C”,”D”);
alert(outbox[1].length);
步骤分析:
1 确认事件 onchange
2 事件触发函数,要编写自己的函数
3 创建2维数组
4 在函数内获取选中的省份
5 拿选中的省份和数组对比
6 创建option元素,创建城市文本,将城市添加到option <option>海淀区<option>
7 获得第二个下拉列表,然后将option放进来
代码实现:
<script>
var citys=new Array(4);
citys[0]=new Array("昌平区","海淀区","朝阳区","东城区","西城区");
citys[1]=new Array("郑州市","洛阳市","开封市","安阳市","信阳市");
citys[2]=new Array("石家庄市","邯郸市","邢台市","保定市","张家口市");
citys[3]=new Array("济南市","青岛市","烟台市","潍坊市","德州市");
function city(obj){
//获取到选择的省份
//获取第二个下拉列表
var rightSel=document.getElementById("rightSel");
rightSel.options.length=0;
// alert(obj.value);
//对二维数组循环遍历
for(var i=0;i<citys.length;i++){
//和数组做值得对比
if(obj.value==i){
for(var j=0;j<citys[i].length;j++){
// alert(citys[i][j]);
//创建option标签元素
var option=document.createElement("option"); //<option></option>
//创建城市文本
var texts=document.createTextNode(citys[i][j]);
//将城市文本添加到option里面
option.appendChild(texts);
//将option追加到第二个下拉列表
rightSel.appendChild(option);
}
}
}
}
</script>
11.计时器
创建:window.setInterval(参数1,参数2)
参数1:函数
参数2:时间间隔(毫秒为单位)
方式1:函数名 , setInterval(show , 100);
方式2:函数字符串, setInterval("show()" , 100);
效果:隔参数2毫秒后,执行一次参数1,循环执行
底层:实际是开了一个新线程,循环执行参数1。
销毁计时器:
1.创建计时器时,返回一个该计时器id,唯一标记
2.window也提供了销毁计时器的实现
3.根据id销毁
window.clearInterval(id值);
例<script>
window.onload = function(){ //当页面加载完之后执行函数
var count = 1;
window.setInterval(function(){ 设置定时器 或者setInterval()
var lb = document.getElementById("lunbotu");
count++;
if(count==4){
count=1;
}
lb.src = "../../day01/img/img/"+count+".jpg";
},3000
)
}
</script>
12.一次性定时器
创建:window.setTimeout(参数1,参数2);
参数1:函数
参数2:时间间隔(毫秒为单位)
效果:隔参数2毫秒后,执行参数1,执行完计时器结束。
底层:实际开了一个新线程,(不可此函数下句就为清除语句)休眠后执行一次参数1。
销毁计时器:
1.创建计时器时,返回一个该计时器id,唯一标记
2.window也提供了销毁计时器的实现
3.根据id销毁
window.clearTimeout( id值);
例:<script>
/*
* 思路:
* 页面加载完之后,创建一个一次性定时器,函数A。
* 函数A实现获取广告div,设置style中的display属性为block。
* 在创建一个一次性定时器,函数B。函数B将div的display设置为none
*/
window.onload = function(){
window.setTimeout(
function(){
var gg = document.getElementById("gg");
gg.style.display = "block";
window.setTimeout(function(){
var gg= document.getElementById("gg");
gg.style.display = "none";
},3000);
},2000);
}
</script>
14.全局函数常见操作:
1.字符串——数字
*window.parseInt() 解析整数
*window.parseFloat() 解析小数
与Java不同,不必纯数字。123px:尾部特殊字符自动忽略,px 123首部为特殊字符解析不出,12px3中间特殊符号,只解析特殊符号之前的数值。能解析的解析后, 直接使用数值。
2.eval函数
*应用场景
编一个页面,页面要产生动态特效,暴露一个接口让别人写js代码,提交的js代 码是字符串,使用eval函数解析字符串,变成可执行的js代码。
*window.eval(“var num = 1”) ; 等价于直接使用var num = 1
alert(num);
3.全局函数之编码解码
转换后数字之间用“%”隔开起标记作用
*window.encodeURI(待转路径url) 客户端实现 中文到数字
*window.decodeURI(url) 服务器端实现 编码到中文
15.表格隔行变色案例
思路:获取所有的行的对象——遍历行,索引奇数设为红色,偶数背景为绿色——遍历过程中,每行添加鼠标移入事件
知识点:
1.如何获取到多个标签对象
2.怎么设置背景色
设置当前行的classname,关联上面的CSS代码,设背景色
3.鼠标事件
<style> 选择使用类选择器原因:类名可以相同,而id名一般不同。
.jishu{
background-color: aquamarine;
}
.oushu{
background-color: blanchedalmond;
}
.yiru{
background-color: yellow;
}
</style>
<script>
window.onload = function(){
var trs = document.getElementsByTagName("tr");
var color
for(var i =1;i<trs.length;i++){
if(i % 2==0){
trs[i].className = "oushu";
}else{
trs[i].className = "jishu";
}
trs[i].onmouseover = function(){
color = this.className;
this.className = "yiru"; //必须用this,function超出了i的作用域
}
trs[i].onmouseout = function(){
this.className = color;
}
}
}
</script>
16.复选框全选、全不选和反选
<script>
window.onload = function(){
var all = document.getElementById("all");
var none = document.getElementById("none");
var change = document.getElementById("change");
all.onclick = function(){
var cs = document.getElementsByClassName("itemSelect");
for(var i =0;i<cs.length;i++){
cs[i].checked = true;
}
}
none.onclick = function(){
var cs = document.getElementsByClassName("itemSelect");
for(var i =0;i<cs.length;i++){
cs[i].checked = false;
}
}
change.onclick = function(){
var cs = document.getElementsByClassName("itemSelect");
for(var i =0;i<cs.length;i++){
cs[i].checked = !cs[i].checked;
}
}
}
</script>
根据自身取反:cs[i].checked = !cs[i].checked;
17.多级联动
window.onload = function(){
var province = document.getElementById("province");
province.onchange = function(){
var value = this.value;
var cs = cities[value];
var s2 = document.getElementById("city");
s2.innerHTML = "<option>请选择城市</option>";
for(var i = 0;i<cs.length;i++){
s2.innerHTML +="<option>"+cs[i]+"</option>"
}
}
}