Day04.JavaScript

Posted on: 2016年8月13日 2016年8月13日
Categories: Java

总体知识梳理:

数组:

代码:

<!DOCTYPE html>

<html>

<head>

//定义数组:长度是零,元素未定义

var arr1 = new Array();

//定义数组,长度是4,元素未定义

var arr2 = new Array(4);

//定义数组,长度为3,元素分别是1,2,3

var arr3 = new Array(1,2,3);

//定义数组,长度为3,元素分别为1,2,3

var arr4 = [1,2,3];

//js中的数组长度是可变的:

var arr = new Array(4);//数组长度为4

arr[100]=1;//长度变了,变为101

//js同一个数组中可以定义不同类型的元素

var arr5 = new Array(“xq”,123,true);

</script>

</head>

<body>

</body>

</html>

document对象:

代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</body>

var dsObj = document.getElementById(“ds”);

//childNodes:获得所有的子节点

var allNode = dsObj.childNodes;

alert(allNode);

for (var i =0;i<allNode.length;i++) {

//nodeName:返回节点名称

alert(allNode[i].nodeName);

//nodeType:返回节点类型

alert(allNode[i].nodeType);

//nodeVaue:返回节点的值

alert(allNode[i].nodeValue);

}

</script>

</html>

创建节点:

代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</body>

//创建一个a标签:<a></a>

var aobj = document.createElement(“a”);

//创界文本节点

var tobj= document.createTextNode(“javascript”);

//将文本内容放到a标签内

aobj.appendChild(tobj);

//将a标签插入到div标签内部

var dobj = document.getElementById(“ds”);

dobj.appendChild(aobj);

var dsobj = document.getElementById(“ds”);

dsobj.setAttribute(“name”,“xq”);

</script>

</html>

全局函数

代码:

<!DOCTYPE html>

<html>

<head>

//parseInt()把字符串类型转换为一个整数

var str = “311”;

var nul = parseInt(str);

//可以通过typeof()判断数据类型

alert(typeof(nul));

alert(nul);

//parseFloat():把字符串转为浮点数

var str2 = “13.3”;

var nul2 = parseFloat(str2);

alert(nul2);

//encodeURI():编码

var str3 = “山阴“;

var str4 = encodeURI(str3);

alert(str4);

//decodeURI():解码

var str5 = decodeURI(str4);

alert(str5);

</script>

</head>

<body>

</body>

</html>

案例分析:

案例一：

表格的隔行换色

技术分析:

既然要给一个普通的表格加颜色,需要用到我们的JavaScript:

知识点1:如何导入JavaScript?

直接使用<script></script>或者也可以通过<script src=” “>标签引入.js文件

知识点2：当整个页面加载完后,要给表格添加颜色,需要一个事件:onload。如何使用onload？可以直接在需要修改颜色的标签使用，例如整个表格都包含在了<body>标签内，所以可以直接把onload写在<body>标签内；其实也可以直接使用如下格式：window.onload 直接写在<script>标签内。

知识点3:我们要给行标签tr添加颜色，如何获取每一个行标签呢？

首选：document.getElementByTagName(“标签名字”)；可以直接通过此方法获取tr标签

其实还可以通过id，name等方式获取；

知识点4：如何隔行设置颜色？

遍历+判断

步骤分析：

步骤一：html页面，有表格

步骤二：写script标签

步骤三：页面加载完成后Onload事件

步骤四：获得相应的标签对象

步骤五：给相应的标签对象设置颜色

代码实现：

<!DOCTYPE html>

<!–步骤一：html页面，有表格–>

<html>

<head>

<!–步骤二：写script标签–>

//步骤三：页面加载完成以后 onload的事件，

window.onload = function(){

//步骤四:通过标签的名字获得相应的标签对象,通过元素的名字获得所有的标签对象

var trObj = document.getElementsByTagName(“tr”);//此处trobj得到的是一个包含所有tr的数组

//遍历trObj数组

for (var i=2;i<trObj.length;i++) {

//进行判断

if(i%2==1){

//步骤五：给相应的标签对象加上颜色

trObj[i].style.backgroundColor=“chartreuse”;

}

</script>

</head>

<body>

<tr>

</td>

</tr>

<th>

</th>

</tr>

<tr>

<td>手机数码类商品</td>

</tr>

<tr>

<td>电脑办公类商品</td>

</tr>

<tr>

<td>鞋靴箱包类商品</td>

</tr>

<tr>

<td>家居饰品类商品</td>

</tr>

</table>

</body>

</html>

实现效果：

案例二：

鼠标放上去以后实现自动换色

技术分析：

页面加载完后？ Window.onload=function(){}

鼠标放上去和鼠标离开的事件：

onmouseover=””; 鼠标放上去事件

onmouseout=””; 鼠标离开事件

步骤：

步骤一：html页面，有表格

步骤二：写script标签

步骤三：页面加载完成后Onload事件

步骤四：给相应的td对象添加事件，鼠标放上去和鼠标离开的事件

步骤五：给相应的事件里面添加颜色或取消颜色

代码：

<!DOCTYPE html>

<!–步骤一：页面–>

<html>

<head>

<!–步骤二：写script标签–>

/*步骤三：页面加载完成后Onload事件*/

window.onload=function(){

//获得所有的tr对象

var tdObj = document.getElementsByTagName(“td”);

for (var i =0;i<tdObj.length;i++) {

/*步骤四：给相应的td对象添加事件，鼠标放上去和鼠标离开的事件*/

//鼠标放上去的事件

tdObj[i].onmouseover = function(){

//步骤五：给相应的事件里面添加颜色或取消颜色

this.style.backgroundColor=“#C726F4”;

}

//鼠标离开的事件

tdObj[i].onmouseout=function(){

this.style.backgroundColor=“#fff”;

}

</script>

</head>

<body>

<tr>

</td>

</tr>

<th>

</th>

</tr>

<tr>

<td>手机数码类商品</td>

</tr>

<tr>

<td>电脑办公类商品</td>

</tr>

<tr>

<td>鞋靴箱包类商品</td>

</tr>

<tr>

<td>家居饰品类商品</td>

</tr>

</table>

</body>

</html>

实现效果:

案例二：

看这个简单的表格，我们可以添加全选或者全不选吧？当我选中第一个框的时候，全部选中，再点击的时候进行取消。

代码实现:

<!DOCTYPE html>

<html>

<head>

function selectAll(objtr){

var val = objtr.checked;

//获得标签对象数组,通过class的属性值获得标签对象

var classtr = document.getElementsByClassName(“itemSelect”);

for (var i=0;i<classtr.length;i++) {

//添加状态

/*if(val==true){

classtr[i].checked=true

}else{

classtr[i].checked=false;

}*/

//因为val本身就是boolean类型,故:

//全选

classtr[i].checked=val;

//反选

/*classtr[i].checked=!val;

}

</script>

</head>

<body>

<tr>

</td>

</tr>

<th>

</th>

</tr>

<tr>

<td>手机数码类商品</td>

</tr>

<tr>

<td>电脑办公类商品</td>

</tr>

<tr>

<td>鞋靴箱包类商品</td>

</tr>

<tr>

<td>家居饰品类商品</td>

</tr>

</table>

</body>

</html>

案例三

省市联动:案例效果:

实现步骤:

步骤一：来一个页面。

步骤二：给省份下拉框绑定事件 onchange();

步骤三：我们需要将选中的下拉项的值传递到方法里面

步骤四: 基本的数组准备好

步骤五：根据传递过来的子获得具体的省份。

步骤六：根据省份得到具体的市

步骤七：创建option标签。文本信息放到具体项中。

步骤八：将具体的option项放到

代码:

<!DOCTYPE html>

<html>

<head>

<style>

/*CSS渲染*/

body
{

height:
500px;

}

#out
{

background: url(../img/regist_bg.jpg);

height:
100%;

padding-top:
80px;

}

#inner
{

border:
5px
double blueviolet;

width:
800px;

margin:
0
auto;

padding:
20px;

background-color: white;

}

</style>

function fsub() {

* 步骤一：先来一个页面

* 步骤二：onsubmit绑定事件

* 步骤三：得到用户名和密码的值

* 步骤四：判断用户名和密码是否为空

* 步骤五：正常提交

//获取用户名值

var username = document.getElementById(“username”).value;

//获取密码值

var password = document.getElementById(“password”).value;

//获取确认密码值

var password2 = document.getElementById(“password2”).value;

//获取Email的值

var email = document.getElementById(“email”).value;

//获取出生日期的值

var date = document.getElementById(“date”).value;

//获取验证码值

var yzm = document.getElementById(“yzm”).value;

//判断

if (username == “”) {

//alert(“用户名不能为空“);

document.getElementById(“sp1”).innerHTML = “<font color=’red’>用户名不能为空</font>”;

return false;

} else {

document.getElementById(“sp1”).innerHTML = “”;

}

if (password == “”) {

//alert(“密码不能为空“);

document.getElementById(“sp2”).innerHTML = “<font color=’red’>密码不能为空</font>”;

return false;

} else {

document.getElementById(“sp2”).innerHTML = “”;

}

if (password2 == “”) {

document.getElementById(“sp3”).innerHTML = “<font color=’red’>确认密码不能为空</font>”;

return false;

} else {

document.getElementById(“sp3”).innerHTML = “”;

}

if (password != password2) {

document.getElementById(“sp3”).innerHTML = “<font color=’red’>两次密码输入不同</font>”;

return false;

} else {

document.getElementById(“sp3”).innerHTML = “”;

}

if (email == “”) {

document.getElementById(“sp4”).innerHTML = “<font color=’red’>Email不能为空</font>”;

return false;

} else {

document.getElementById(“sp4”).innerHTML = “”;

}

if (date == “”) {

document.getElementById(“sp5”).innerHTML = “<font color=’red’>还未选择出生日期</font>”;

return false;

} else {

document.getElementById(“sp5”).innerHTML = “”;

}

if (yzm == “”) {

document.getElementById(“sp6”).innerHTML = “<font color=’red’>验证码不能为空</font>”;

return false;

} else {

document.getElementById(“sp6”).innerHTML = “”;

}

return true;

}

//定义数组

var arr0 = [“昌平区“,“东城区“,“朝阳区“,“海淀区“];

var arr1 = [“吉林市“,“长春市“,“四平市“,“辽源市“];

var arr2 = [“青岛市“,“济南市“,“淄博市“,“东营市“];

var arr3 = [“石家庄市“,“保定市“,“邢台市“,“廊坊市“];

var arr4 = [“南京市“,“无锡市“,“徐州市“,“常州市“];

//js数组没有二维的说法,但是数组里面可以存储任意类型

var arr = [arr0,arr1,arr2,arr3,arr4];

function selectCity(val){

var arrCity=arr[val];

document.getElementById(“cityId”).innerHTML=“<option value=”>—-请–选–择–市—-</option>”;

for(var i=0;i<arrCity.length;i++){

var cityName= arrCity[i];

//创建option标签

var opObj=document.createElement(“option”);

//创建节点对象

var ciObj= document.createTextNode(cityName);

//把具体的市放到option里面

opObj.appendChild(ciObj);

//获得市下拉对象

var cityObj= document.getElementById(“cityId”);

cityObj.appendChild(opObj);

}

</script>

</head>

<body>

<tr>

USER REGISTER

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td align=“right”>Email:</td>

</td>

</tr>

<tr>

<input type=“radio” name=“sex” value=“1” checked=“checked” />男

<input type=“radio” name=“sex” value=“0” />女

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</select>

</select>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<input type=“submit” width=“100” value=“注册” style=“background: url(../img/register.gif)

no-repeat
scroll
0
0
rgba(0, 0, 0, 0); height:35px;width:100px;color:white;” />

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

wenzhongxiang

295

案例一：

案例二：

案例三

wenzhongxiang

发表评论 取消回复

发表评论取消回复