JavaScript
- JavaScript是一种直译式的脚本语言。
java源代码—>编译成class文件—>jvm执行
脚本语言：源代码—>解释执行 (js由浏览器解释执行）
- 提供页面的交互
js的组成
- ECMAScript: 核心部分，定义js的语法规范
- DOM(document Object Model)：文档对象模型，管理网页的增删改查规则
- BOM(browser Object Model)：浏览器对象模型，封装了前进、后退、页面刷新、地址栏、历史路径、屏幕高度等
引入方式
- 在html头部的script标签中直接编写js程序
- 利用html头部的script标签引入js文件
<script type="text/javascript/" src="../js/regutils.js"></script>
语法
- 写在head中的script标签中
- 软类型： var i = true/ 230/ “苹果”……；
- 区分大小写
- 语句结束之后的分号可有可无
数据类型
基本数据类型
string, num, boolean, undefined, null
typeof运算符查看数据类型：
<script>
var i = true;
var j =1;
var k = "类型"
alert(typeof i);
alert(typeof j);
alert(typeof k);
<!--输出: noolean number string-->
</script>
引用数据类型
对象：Array, Boolean, Number, Date, Math, RexExp
内置对象:用得较少。
关于内置对象参见js中的内置对象
类型转换
js内部自动转换，具体查看 js手册
运算符和语句
- 运算符和java一样
不同处：“===” 全等号 表示值和类型都要一样
var i = 111;
var j = "111";
alert(i == j); /*true*/
alert(i === j); /*false*/
- 语句和java一样
输出
- alert() 直接弹框
- document.write() 向页面输出
- console.log() 向控制台输出
- 对象.innerHTML 向页面输出
- 获取页面元素：document.getElementById(元素的id值)
声明
变量
var 变量名 = 变量值
函数
var 函数名 = function(){
}
function 函数名(){
}
DOM
- 提供增删改查规则
常用方法
- 一些常用的HTML DOM方法：
getElementById(id) - 获取带有指定id的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素） - 一些常用的HTML DOM属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNode - 节点（元素）的子节点
attributes - 节点（元素）的属性节点 - 查找节点：
getElementById() 返回带有指定ID的元素
getElementByName() 返回带有指定标签名称的所有元素的节点列表（集合/节点数组）
getElementByClassName() 返回带有指定类名的所有元素的节点列表 - 增加节点：
createAttribute() 创建属性节点
createElement() 创建元素节点
createTextNode() 创建文本节点
insertBefore() 在指定的子节点前面插入新的子节点 - 删除节点：
removeChild() 删除子节点
replaceChild() 替换子节点
selectorid.options.length = 0 - 修改节点：
setAttribute() 修改属性
setAttributeNode()修改属性节点
DOM树
节点的增删改查均通过下图的BOM树结构执行的。
例如：在div中添加p节点的过程：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function addP(){
var div = document.getElementById("div1");
/* 创建元素节点<p></p> */
var p = document.createElement("p");
/* 创建文本节点“文本” */
var text = document.createTextNode("文本");
/* 为两者创建关联 */
p.appendChild(text);
/* 将p元素对象放到div中 */
div.appendChild(p);
}
</script>
</head>
<body>
<button onclick="addP()">添加文字</button>
<div id="div1">
</div>
</body>
</html>
得到效果：
开发步骤
- 确定事件
- 通常事件会触发一个函数
- 函数中包含对页面元素的操作，实现页面的交互
<head>
<meta charset="utf-8">
<title></title>
<script>
function changeContent(){
var div1 = document.getElementById("div1");
/*innerHTMLjiexihtml ,innerTextbujiexi */
div1.innerHTML="<font color='red'>这是替换后的内容</font>";
div1.innerText="<font color='red'>这是替换后的内容</font>";
}
</script>
</head>
<body>
<!-- onclick里的函数名要"()" -->
<button type="button" onclick="changeContent()">点击弹框</button>
<div id="div1">
这是待修改内容
</div>
</body>
简单应用案例
简单的页面校验
- 确定事件: onsubmit 表单提交
onsubmut事件触发的函数必须有返回值 - 事件触发函数：checkForm()
- 函数功能：取得input的值，判断并反馈结果
<head>
<meta charset="utf-8">
<title></title>
<script>
function checkForm(){
var username = document.getElementById("username");
var value1 = username.value;
if(value1.length >= 6){
}else{
alert("密码位数不少于6位");
return false;
}
var email = document.getElementById("email");
var value2 = email.value;
/* 正则表达式两端用"/ /" */
if(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(value2)){
}else{
alert("请输入正确邮箱格式");
return false;
}
return true;
}
</script>
</head>
<body>
<!--仅onsubmit事件必须返回值（boolean）-->
<form id="form1" action="#" onsubmit="return checkForm()">
用户名：<input id="username" type="text"/>
邮 箱：<input id="email" type="text"/>
<button id="button1" type="submit">提交</button>
</form>
</body>
得到效果：
图片轮播
- 确定事件: onload 加载时
- 事件触发函数：init()
- init()函数功能：开启定时器，每个数秒执行changeImg()函数
- changeImg()函数功能：结合文本拼接和图片命名实现轮播
知识点：
window.setInterval() window.clearInterval()
window.setTimeout() window.clearTimeout()
<head>
<meta charset="utf-8">
<title></title>
<script>
var index = 0;
function init(){
/* window是最顶层的对象 清楚效果*/
/* 每隔多少毫秒时间执行代码语句
清楚定时效果：window.clearInterval()*/
window.setInterval("changeImg()",2000);
/* 多少毫秒时间后执行代码语句
清楚定时效果：window.clearTimeout()*/
/* window.setTimeout("changeImg()",2000); */
}
function changeImg(){
var img1 = document.getElementById("img1");
var curIndex = index % 3 ;
img1.src = "img/"+curIndex+".png";
index++;
}
</script>
</head>
<body onload="init()">
<img id="img1" src="img/1.jpg" />
</body>
广告显示5秒自动关闭
- 确定事件: onload 加载时
- 事件触发函数：init()
- init()函数功能：开启定时器，过5秒后执行hideImg()函数
- hideImg()函数功能：设置图片元素display属性为none
知识点：
隐藏：img1.style.display = "none";
显示：img1.style.display = "block";
img对象：
style对象：属性
<head>
<meta charset="utf-8">
<title></title>
<script>
var index = 0;
function init(){
/* 多少毫秒时间后执行代码语句 */
window.setTimeout("hideImg()",5000);
}
function hideImg(){
var img1 = document.getElementById("img1");
/* 对应于行内样式 style="display:none;"
显示则是display:block */
img1.style.display = "none";
}
</script>
</head>
<body onload="init()">
<img id="img1" src="img/0.png" />
</body>
页面校验优化（提交前反馈错误）
- 填写前提示信息：
- 确定事件: onfocus 聚焦时
- 事件触发函数：tellTips(spanId,msg)
- tellTips(spanId,msg)函数功能：提示填写要求
- 填写出错反馈信息：
- 确定事件: onblur 取消聚焦时
- 事件触发函数：checkUsername()，checkEmail()
- 函数功能：获取input数据，并判断和反馈
知识点：
事件：
onfocus 获得焦点
onblur 失去焦点
onkeyup 按键抬起
onmouseenter 鼠标移入
onmouseout 鼠标移出
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function checkForm(){
alert("仍有错误，请看输入框右侧提示修改");
/* if((!"".equals(username_span.innerHTML))&&(!"".equals())) */
}
function checkUsername(){
var username = document.getElementById("username");
var value1 = username.value;
var username_span = document.getElementById("username_span");
if(value1.length >= 6){
username_span.innerHTML = "";
}else{
username_span.innerHTML = "<font color='red' size = 2>用户名位数应不少于6位";
}
}
function checkEmail(){
var email = document.getElementById("email");
var value2 = email.value;
var email_span = document.getElementById("email_span");
/* 正则表达式两端用"/ /" */
if(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(value2)){
email_span.innerHTML = "";
}else{
email_span.innerHTML = "<font color='red' size = 2>请输入正确邮箱格式";
}
}
function tellTips(spanId,msg){
var span = document.getElementById(spanId);
/* 正则表达式两端用"/ /" */
span.innerHTML = '<font size = 2 color = "yellow">'+msg;
}
</script>
</head>
<body>
<form id="form1" action="#" onsubmit="return checkForm()">
用户名：<input id="username" type="text" onfocus="tellTips('username_span','用户名位数应不少于6位')"
onblur="checkUsername()"/><span id="username_span"></span><br />
邮 箱：<input id="email" type="text" onfocus="tellTips('email_span','请输入正确邮箱格式')"
onblur="checkEmail()"/><span id="email_span"></span><br />
<button id="button1" type="submit">提交</button>
</form>
</body>
</html>
表格隔行换色
- 确定事件: onload
- 事件触发函数：changeColor()
- 函数功能：获取table元素，获取其每一行，利用除余实现隔行颜色
知识点：
获取所有列：tab.rows[]修改行
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function changeColor(){
var table1 = document.getElementById("table1");
/* 得到数组 */
var rows = table1.rows;
for(var i = 0;i < rows.length;i++){
var row = rows[i];
if(i%2 == 0){
row.bgColor = "red";
}else{
row.bgColor = "blue";
}
}
}
</script>
</head>
<body onload="changeColor()" >
<table id="table1" border="1px";>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
</tr>
</table>
</body>
</html>
得到效果：
表格选择框全选
如何获取所有复选框
var checks = document.getElementsByName("check");（数据库里常用）
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function checkAll(){
var checkbox1 = document.getElementById("total");
var checked = checkbox1.checked;
/*document.getElementByTagName() 元素名*/
var checks = document.getElementsByName("check")
for(var i = 0; i<checks.length; i++){
var check = checks[i];
check.checked = checked;
}
}
</script>
</head>
<body>
<table id="table1" border="1px"; width="300px">
<tr>
<td><input id="total" type="checkbox" onclick="checkAll()"></td>
<td>标题1</td>
<td>标题2</td>
</tr>
<tr>
<td><input name="check" type="checkbox" ></td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td><input name="check" type="checkbox" ></td>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td><input name="check" type="checkbox" ></td>
<td>41</td>
<td>42</td>
</tr>
<tr>
<td><input name="check" type="checkbox" ></td>
<td>51</td>
<td>52</td>
</tr>
</table>
</body>
</html>
得到效果：
点第一个选择框：
省市联动
- 确定onChange事件
- 触发函数:selectProvince
- 函数功能：1）获取select对象，遍历获取被选中的省份；2）从数组中取得对象的城市；3）循环动态创建节点；4）在每次循环前设置清空
知识点：
数组：1）[ [ ], [ ], [ ] ] ; 2)new Array()
DOM树操作：
1) 创建节点：document.createElement();
2) 创建文本节点：document.createTextNode();
3) 添加节点:appendChild();
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* 准备数据,数组格式如下 */
var cities =[
["杭州","温州","宁波"],["南京","苏州",
"扬州"],["福州","厦门","漳州"]
];
function selectProvince(){
var province = document.getElementById("province");
/*未在标签行内样式中明确value时取得option内容，否则为注明值*/
var value= province.value;
var options = cities[value];
var city = document.getElementById("city");
city.options.length = 0;
for(var i=0;i<options.length;i++){
var cityText = options[i];
var childElement = document.createElement("option");
var TextNode = document.createTextNode(cityText);
childElement.appendChild(TextNode);
city.appendChild(childElement);
}
}
</script>
</head>
<body>
<select id="province" onchange="selectProvince()">
<option value="-1">---请选择省份---</option>
<option value="0">浙江</option>
<option value="1">江苏</option>
<option value="2">福建</option>
</select>
<select id="city">
<option>---请选择城市---</option>
</select>
</body>
</html>
得到效果：
商品左右选择
知识点：
select 下拉列表
multiple 允许多选（也会直接显示多行数据）
ondblclick 双击事件 （注意是dbl ,double ）
for遍历循环时，边遍历边移除应从大端起，否则易出问题
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function selectOne(processed,asking){
var processed = document.getElementById(processed);
var options = processed.options;
var asking = document.getElementById(asking);
/*当从0开始时会出现遍历遗漏，移走后重新计数*/
for(var i=options.length-1; i>=0;i--){
optionOne = options[i];
if(optionOne.selected){
asking.appendChild(optionOne);
}
}
}
function selectAll(processed,asking){
var processed = document.getElementById(processed);
var options = processed.options;
var asking = document.getElementById(asking);
for(var i=options.length-1; i>=0;i--){
optionOne = options[i];
/*添加节点到新框并删除原框中的节点*/
asking.appendChild(optionOne);
}
}
</script>
</head>
<body style="width: 330px;">
<div style="float: left;">
心愿单<br />
<select id="leftselect" multiple="true"
ondblclick="selectOne('leftselect','rightselect')">
<option>面膜</option>
<option>电脑</option>
<option>钱包</option>
</select>
<br />
<a href="#" onclick="selectOne('leftselect','rightselect')">
>></a>
<a href="#" onclick="selectAll('leftselect','rightselect')">
>>></a>
</div>
<div style="float: right;">
礼物箱<br />
<select id="rightselect" multiple="true"
ondblclick="selectOne('rightselect','leftselect')">
<option>眼霜</option>
<option>短裙</option>
<option>毛呢外套</option>
</select>
<br />
<a href="#" onclick="selectOne('rightselect','leftselect')">
<<</a>
<a href="#" onclick="selectAll('rightselect','leftselect')">
<<<</a>
</div>
</body>
</html>
得到效果：
双击当前框选项或者单击物件并点击下方双箭头按钮，将选中物件移动到另一个框中；点击下方双箭头按钮，将当前框物件全部移动到另一个框
心得：js的内容实在丰富，各色的动态效果为网页添彩。来段杀马特：生活也因复杂而精彩，感恩生活的复杂。
扫一扫
1138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
