前端技术——javascript
javascript
JavaScript 是一种轻量级的编程脚本语言.
作用：被设计向html页面添加交互行为使页面具有动态效果。
功能案例：
1.简单数据校验
2.图片轮播
3.定时弹出广告
4.表单校验
5.隔行换色
6.复选框的全选效果
7.省市联动效果
一、组成部分
分为三部分：
1.核心（ECMAScript）：包含语法、关键字等
2.文档对象模型（DOM）：整个html页面的内容 允许程序和脚本动态地访问和更新文档的内容
3.浏览器对象模型（BOM）：整个浏览器相关内容
1.核心（ECMAScript）：包含语法、关键字等
（1）获取元素内容：
document.getElementById(id).value;
二、核心（ECMAScript）：包含语法、关键字等：
1.alert();
2.点击弹出：
<button type=”button” onclick=”alert(\’dss\’)“>dddsdasd</button>
3.
<p id=”d”></p>
<script type=”text/javascript”>
document.getElementById(“d”).innerHTML=”sds”;</script>
4.注释 ： // 和/* ….. */
5. var
6.定义对象及属性
<script type=”text/javascript”>
var dag={
name: “da”,
age:”2″,
he:”20Kg”
};
alert(dag.name);
</script>
7.数组：
<script type=”text/javascript”>
var dd=[“a”,”d”]
alert(dd[0]);
</script>
8.typeof
9.
三、DOM
文档对象：
1.数字
2.字符串
3.日期
4.自定义对象
四、BOM
即 浏览器对象模型(Browser Object Model)
浏览器对象包括 ：
Window(窗口)
Navigator(浏览器)
Screen (客户端屏幕)
History(访问历史)
Location(浏览器地址)
五、案例
1.简单数据校验功能实现案例：
<script>
function ss(){
var vv=document.getElementById(“username”).value;
if(vv==””){
alert(“用户名不能为空”)}
}
</script>
</head>
<body>
<form action=”” method=”post” onsubmit=”return ss()”>
xx<input type=”text” name=”username” id=”username”/>
<br/>
pp<input type=”password” name=”password”/>
<button>x</button>
</form>
</body>
2.图片轮播
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
div{
border:1px solid white ;
width: 500px;
height: 350px;
margin: auto;
text-align: center;
}
</style>
<script >
var i=1;
function changeImg(){
i++;
document.getElementById(“img1″).src=”../img/”+i+”.jpg”;
if(i==3){
i=0;
}
}
</script>
</head>
<body>
<div id=””>
<input type=”button” value=”下一张” onclick=”changeImg()” />
<img src=”../img/1.jpg” width=”100%” height=”100%” id=”img1″/>
</div>
</body>
3.定时弹出广告
4.表单校验
5.隔行换色
案例：
<script>
window.onload=function(){
//1.获取表格
var eT= document.getElementById(“t1“);
//2.tbody的行数长度
var len= eT.tBodies[0].rows.length;
//3.遍历
for(var i=0;i<len;i++){
if(i%2==0){
//对偶数行设置颜色
eT.tBodies[0].rows[i].style.backgroundColor=”pink”;
}else{
//对奇数行设置颜色
eT.tBodies[0].rows[i].style.backgroundColor=”red”;
}
}
}
</script>
<boby>
<table border=”1″ width=”500″ height=”50″ align=”center” id=”t1″>
xxxx
</table>
</boby>
6.复选框的全选效果
案例：
<script>
function checkall() {
var ch = document.getElementById(“checkall”);
if (ch.checked == true) {
var cheoneOne = document.getElementsByName(“checkone”);
for (var i = 0; i < cheoneOne.length; i++) {
cheoneOne[i].checked = true;
}
} else {
var cheoneOne = document.getElementsByName(“checkone”);
for (var i = 0; i < cheoneOne.length; i++) {
cheoneOne[i].checked = false;
}
}
}
</script>
<boby>
<table border=”1″ width=”500″ height=”50″ align=”center” id=”t1″>
<th><input type=”checkbox” onclick=”checkall()” id=”checkall” /></th>
xxxx
</table>
</boby>
7.省市联动效果
<script type=”text/javascript”>
//首先建立一个你需要省，和它对应的市的数组，如下：
var cityList = new Array();
cityList[\’北京市\’] = [\’朝阳区\’, \’东城区\’, \’西城区\’, \’海淀区\’, \’宣武区\’, \’丰台区\’, \’怀柔\’, \’延庆\’, \’房山\’];
cityList[\’上海市\’] = [\’宝山区\’, \’长宁区\’, \’丰贤区\’, \’虹口区\’, \’黄浦区\’, \’青浦区\’, \’南汇区\’, \’徐汇区\’, \’卢湾区\’];
cityList[\’广州省\’] = [\’广州市\’, \’惠州市\’, \’汕头市\’, \’珠海市\’, \’佛山市\’, \’中山市\’, \’东莞市\’];
cityList[\’深圳市\’] = [\’福田区\’, \’罗湖区\’, \’盐田区\’, \’宝安区\’, \’龙岗区\’, \’南山区\’, \’深圳周边\’];
cityList[\’重庆市\’] = [\’俞中区\’, \’南岸区\’, \’江北区\’, \’沙坪坝区\’, \’九龙坡区\’, \’渝北区\’, \’大渡口区\’, \’北碚区\’];
cityList[\’天津市\’] = [\’和平区\’, \’河西区\’, \’南开区\’, \’河北区\’, \’河东区\’, \’红桥区\’, \’塘古区\’, \’开发区\’];
cityList[\’江苏省\’] = [\’南京市\’, \’苏州市\’, \’无锡市\’];
cityList[\’浙江省\’] = [\’杭州市\’, \’宁波市\’, \’温州市\’];
cityList[\’四川省\’] = [\’四川省\’, \’成都市\’];
cityList[\’海南省\’] = [\’海口市\’];
cityList[\’福建省\’] = [\’福州市\’, \’厦门市\’, \’泉州市\’, \’漳州市\’];
cityList[\’山东省\’] = [\’济南市\’, \’青岛市\’, \’烟台市\’];
cityList[\’江西省\’] = [\’江西省\’, \’南昌市\’];
cityList[\’广西省\’] = [\’柳州市\’, \’南宁市\’];
cityList[\’安徽省\’] = [\’安徽省\’, \’合肥市\’];
cityList[\’河北省\’] = [\’邯郸市\’, \’石家庄市\’];
cityList[\’河南省\’] = [\’郑州市\’, \’洛阳市\’];
cityList[\’湖北省\’] = [\’武汉市\’, \’宜昌市\’];
cityList[\’湖南省\’] = [\’湖南省\’, \’长沙市\’];
cityList[\’陕西省\’] = [\’陕西省\’, \’西安市\’];
cityList[\’山西省\’] = [\’山西省\’, \’太原市\’];
cityList[\’黑龙江省\’] = [\’黑龙江省\’, \’哈尔滨市\’];
cityList[\’其他\’] = [\’其他\’];
/**科普小知识
*Option(text,value) 返回包含下拉列表框中的所有选项的一个数组，text==选项文本值；value==文本值
*add(new,old) 用于向<select>中添加一个<option>标签，
new表示新添加到old之前的Option对象，
如果old为null，那则直接添加到<select>所有选项的末尾
*for(in) 循环遍历对象的属性 ，例：for(var i in cityList)
这里的i==cityList的属性，就是省份名称
例：for (var j in city[i])
这里的j==cityList[i]的属性，cityList中下表为i的属性的属性，就是每个城市的index（下标）
**/
//然后写一个方法把这一大长串的数组给他调到你需要的地方去
function change() {
var pVal = document.getElementById(“province”).value; //获取省份列表中的值
var c = document.getElementById(“city”); //获取城市列表
c.options.length = 0; //清除当前城市列表中的值
for (var i in cityList) { //循环遍历cityList的属性
if (i == pVal) { //判断当i等于省份列表中的值时;
for (var j in cityList[i]) { //循环遍历cityList[i]的属性
c.add(new Option(cityList[i][j], cityList[i][j]), null)
//城市列表的末尾增加一个<option>选项，text：cityList[i][j]，value：cityList[i][j]
}
break;
}
}
}
function allCity() {
var p = document.getElementById(“province”); //获取省份列表
for (var i in cityList) { //循环遍历cityList的属性
p.add(new Option(i, i), null);
//省份列表的末尾增加一个<option>选项，text：i，value：i
}
}
window.onload = allCity;
</script>
<style type=”text/css”>
.cascade { float: left; width: 120px; height: 30px; }
.cascade select { width: 100%; height: 100%; }
</style>
</head>
<body>
<div class=”cascade”>
<select id=”province” onchange=”change();”>
<option>–请选择省份–</option>
</select>
</div>
<div class=”cascade”>
<select id=”city”>
<option>–请选择市–</option>
</select>
</div>
</body>