文章目录
一、JS作业
1、通过循环语句，求100以内整数的和(包括100)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过循环语句，求100以内整数的和(包括100)</title>
<script type="text/javascript">
function sum(max) {
var sum = 0 ;
for(var i=0 ; i<=max ; i++){
sum+=i;
}
return sum ;
}
var s = sum(100);
alert(s);
</script>
</head>
<body>
</body>
</html>
2、JS综合练习（变量、函数、数组、语句练习）
(1)声明一个函数fn，在函数中实现：遍历指定的两个数值之间的整数，将是3的倍数的数值存入到一个数组中，并将数组返回
(2)调用fn函数，获取1~100之间是3的倍数的数值，将返回的数组中的元素遍历输出到网页上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> /* (1)声明一个函数fn，在函数中实现： 遍历指定的两个数值之间的整数， 将是3的倍数的数值存入到一个数组中， 并将数组返回 (2)调用fn函数， 获取1~100之间是3的倍数的数值， 将返回的数组中的元素遍历输出到网页上 */ window.onload = function() { function fn(min, max) { var arr = []; for (var i = min + 1; i < max; i++) { if (i % 3 == 0) { arr.push(i); } } return arr; } function show(arr) { for (var i = 0; i < arr.length; i++) { var e = document.createElement("p"); e.innerHTML = arr[i]; document.body.appendChild(e); //alert(document.body); } } var arr = fn(0, 100); show(arr); } </script>
</head>
<body>
</body>
</html>
3、独立完成JS练习案例
电灯开关
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>电灯开关案例</title>
<style> body{padding:20px;font-size:20px;} #div1{width:30%;border:1px solid red;padding:5px;margin-bottom:20px;} </style>
<!--引入jquery的js库-->
<script src="js/jquery-1.8.3.min.js"></script>
<script> var isOn = false ; //onclick 绑定点击事件 function changeImg(){ var e = document.getElementById("img1"); if(isOn){ e.src = "imgs/off.gif"; isOn = false; }else{ e.src = "imgs/on.gif"; isOn=true; } } </script>
</head>
<body>
<input type="button" value="开/关灯" onclick="changeImg()"/> <br/><br/>
<img id="img1" src="imgs/off.gif"/>
</body>
</html>
元素的dom操作
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>元素的增删改查</title>
<!--加入样式表-->
<style type="text/css"> div { border:#0099FF 2px solid;height:60px;width:350px;margin:20px 10px;padding:5px 7px;line-height:60px;font-size:26px;text-align:center;} #div_1{ background-color:#d400ff; } #div_2{ background-color:#FF3399; } #div_3{ background-color:#00FF00; } #div_4{ background-color:#FFFF66; } #info{ width:250px;height:90px;font-size:22px;padding:5px;resize:none;} input{font-size:18px;} </style>
<!--引入jquery的js库-->
<!-- <script src="js/jquery-1.8.3.min.js"></script> -->
<script type="text/javascript"> /** 练习1、添加元素:添加一个div元素到body中 */ function addNode(){ var e = document.createElement("div"); document.body.appendChild(e); } /** 练习2、删除元素: 删除id为div_2的元素 */ //parentNode function deleteNode(){ var e = document.getElementById("div_2"); document.body.removeChild(e); } /** 练习3、更新元素内容：将div_3的内容更新为当前时间 */ function updateNode(){ var e = document.getElementById("div_3"); e.innerHTML = Date().toLocaleString(); } </script>
</head>
<body>
<input type="button" onclick="addNode()" value="创建一个div添加到body中"/>
<input type="button" onclick="deleteNode()" value="删除id为div_2的元素"/>
<input type="button" onclick="updateNode()" value="将div_3的内容更新为当前时间"/><hr/>
<div id="div_1">
div_1
</div>
<div id="div_2">
div_2
</div>
<div id="div_3">
div_3
</div>
<div id="div_4">
div_4
</div>
</body>
</html>
网页换肤
<html>
<head>
<meta charset="utf-8"/>
<title>网页换肤</title>
<style type="text/css"> body{font-size:18px;font-family:"微软雅黑";} hr{border:1px solid yellow;} a{font-size:17px;font-weight:500;} a:hover {color:#0099FF;} h2,#change-font{text-align:center;} #newstext{padding:10px;margin:0 auto;letter-spacing:2px;} /* 预先定一些选择器 */ .min{ font-size:16px; } .middle{ font-size:18px; } .max{ font-size:20px; } .super-max{ font-size:24px; } </style>
<!-- 引入外部的CSS文件 -->
<link rel="stylesheet" href="css/none.css" id="link"/>
<!--引入jquery的js库-->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript"> /** 练习1：执行下面的函数，切换字体大小 */ function resize(size){ document.getElementById("newstext").className = size; } //定义数组，存放不同的皮肤（css文件的路径） var styleArr = ["css/red.css","css/green.css","css/blue.css"]; var i = 0; /** 练习2：执行下面的函数，为页面切换不同的皮肤 */ function changeStyle(){ document.getElementById("link").href = styleArr[i]; i++ ; i = i>=styleArr.length ? 0 : i ; } </script>
</head>
<body >
<h2>达内时代科技集团简介</h2>
<div id="change-font">
<a href="javascript:void(0)" onclick="resize('min')">小字体</a>
<a href="javascript:void(0)" onclick="resize('middle')">中字体</a>
<a href="javascript:void(0)" onclick="resize('max')">大字体</a>
<a href="javascript:void(0)" onclick="resize('super-max')">超大字体</a>
<a href="javascript:void(0)" onclick="changeStyle()">换肤</a>
</div>
<hr/>
<div id="newstext" class="middle">
<p>
达内时代科技集团有限公司，是中国高端IT培训的领先品牌，致力于培养面向互联网、电信和金融领域的Java、C++、C#、.Net、软件测试、嵌入式、PHP、android等方面的中高端软件人才。
</p>
<p>
达内创办于2002年，专注IT职业教育17年，2014年在美国纳斯达克上市公司。目前，已开设24大课程方向，在全国70多个城市建立了330家培训中心，真正实现“一地学习，全国就业”。高薪聘请总监级名师全职授课，术业有专攻，名师出高徒。实施“因材施教，分级培优”教学方案，让每一位学员都成才，让强者更强。采用“先学习，就业后付款”的模式，已帮助80万名学员成功就业。
</p>
<p>
达内优秀的教学效果和行业领先的经营模式赢得了社会各界的广泛赞誉和好评，荣获了各界权威机构的颁奖：达内成为业界唯一的一家2006、2007、2008、2009连续4年入选德勤评选的 “中国高科技高成长50强公司”、“亚太地区高科技高成长500强公司”，获得首届中国留学人才归国创业“腾飞”奖、中关村管理委员会指定的“软件人才培养示范基地”、被《计算机世界》评选的“就业服务杰出贡献奖”、被《中国计算机报》评选的“最具影响力培训机构奖”、被搜狐评为“中国十大教育集团”、被腾讯评为“中国大学生心目中最具影响力的IT品牌”。
有实力、有信誉，要培训，就选上市公司！
</p>
</div>
<hr/>
</body>
</html>
创建表格元素
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>创建表格</title>
<style type="text/css"> /* 为表格定义CSS样式 */ body{padding-left:15px;font-size:20px;} table{ border:1px solid #0099FF; width:70%; border-collapse:collapse; } table td{ border:#0099FF 1px solid; padding:10px 20px 3px 1px; } input[type='text']{width:150px;height:20px;vertical-align:text-bottom;text-indent:5px;font-size:20px;} input[type='button']{font-size:20px;} </style>
<!-- 引入jquery函数库文件 -->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript"> function createTable0(row,col){ var table = $("<table></table>"); for(var b=0 ; b<row ; b++){ var tr = $("<tr></tr>"); for(var i=0 ; i<col ; i++){ var td = $("<td>创建5行6列的表格</td>"); tr.append(td); } table.append(tr); } $("body").append(table); $("body").append("<hr>"); } /** 练习1：创建单行单列的表格 */ function createTable1(){ createTable0(0,0); } /** 练习2：创建5行6列的表格 */ function createTable2(){ createTable0(5,6); } /** 练习3：创建指定行和列的表格 */ function createTable3(){ var row = document.getElementById("row").nodeValue ; var col = document.getElementById("col").nodeValue; createTable0(row,col); } </script>
</head>
<body>
<!-- 练习1：点击下列按钮创建单行单列表格 -->
<input type="button" value="点击下列按钮创建单行单列表格" onclick="createTable1()"><br><br>
<!-- 练习2：点击下列按钮创建5行6列表格 -->
<input type="button" value="点击下列按钮创建5行6列表格" onclick="createTable2()"><br><br>
<!-- 练习3：点击下列按钮创建指定行、指定列的表格 -->
<input type="button" value="点击下列按钮创建指定行、指定列的表格" onclick="createTable3()"><br>
行数：<input id="row" type="text"><br>
列数：<input id="col" type="text"><br>
<!-- 将创建的表格添加到body内部(追加到最后) --><hr/>
</body>
</html>
二、jQuery作业
4、掌握jQuery的引入和jQuery文档就绪事件函数
5、练习jQuery的选择器
6、独立完成jQuery练习案例
全选和全不选
创建表格元素
仿QQ好友分组
网页换肤(用jQuery实现)
京公网安备 11010502036488号