一、JavasScript的介绍
1.什么是JavaScript？
答：1.JavaScript是用来设计用来向HTML页面添加交互行为的。
2.JavaScript是一种脚本语言
3.JavaScript是由数行可执行计算机代码组成。
4.JavaScript通常是被直接嵌入HTML页面中。
5.JavaScript是一种解释性语言（代码执行不进行预编译）
Javascript与java没有关系(雷锋和雷峰塔)，它不是编程语言(脚本语言)；
2. javascript的作用？
HTML：它是整个网站的骨架。
CSS：它是对整个网站骨架的内容进行美化(修饰)
Javascript：它能够让整个页面具有动态效果。
3 javascript的组成部分
ECMAScript:它是javascript的核心(语法、变量、数据类型、语句、函数……)
DOM:document object model 整个文档对象
BOM:浏览器对象
4.javascript语法
区分大小写
变量是弱类型的
(String str=”aaa” ,var str=”123”?
每行结尾的分号可有可无(建议大家写上)
注释与java、php等语言相同
5javascript的变量
一般都是用var来定义不管是整型，字符型 数组
6.javascript运算符
其它运算符与java大体一致，需要注意其等性运算符。
== 它在做比较的时候会进行自动转换。
=== 它在做比较的时候不会进行自动转换。
7.获取元素
获取元素
document.getElementById(“id名称” );
获取元素里面的值
document.getElementById(“id名称”).value;
8.javascripte的输出
警告框：alert();
向页面指定位置写入内容：
innerHTML(属性)
向页面写入内容：
document.write(“”);
二、javascripte的轮播图
获取元素
document.getElementById(“id名称”)
事件(onload)
定时操作：
setInterval(“changeImg()[ThinkPad1] ”,3000[ThinkPad2] );
[ThinkPad1]指定一个表达式或者一个函数
[ThinkPad2]重复执行的周期时间(毫秒值)；
<script>
function init(){
setInterval("changeImg()",3000);
}
var i=1;
function changeImg(){
i++;
var imgEl = document.getElementById("img1");
imgEl.src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
Html部分代码
确定事件：onload 加在body里面！
<body
onload="init()">
给指定的图片位置定义一个id
<img src="../img/1.jpg"
width="1300px" id="img1"/>
三、使用JS完成页面定时弹出
获取图片的位置(document.getElementById(“”))
隐藏图片：display：none
定时操作：setInterval(“显示图片的函数”，3000)
<script type="text/javascript">
var time;
function init(){
//设置显示图片的定时操作
time = setInterval("showAd()",3000);
}
//显示图片的函数
function showAd(){
//获取广告图片的
var imgEl = document.getElementById("img1");
//设置图片的属性(display)让其显示
imgEl.style.display="block";
//清除显示图片的定时操作
clearInterval(time);
//设置隐藏广告图片的定时操作
time = setInterval("hiddenAd()",3000);
}
//书写隐藏广告图片的函数
function hiddenAd(){
//获取广告图片并设置隐藏的属性
document.getElementById("img1").style.display="none";
//清除隐藏图片的定时操作
clearInterval(time);
}
</script>
Html部分代码：
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg"
width="1300px" style="display: none;" id="img1"/>
确定事件(<body onload="init()">)
四、javascript的引入方式
Ø 内部引入方式
直接将javascript代码写到
<script type=”text/javascript” ></script>
Ø 外部引入方式
需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script标签的src属性引入该外部的js文件
BOM对象：浏览器对象模型(操作与浏览器相关的内容)
Window 对象表示浏览器中打开的窗口。
setInterval():它有一个返回值，主要是提供给clearInterval使用。
setTimeout():它有一个返回值，主要是提供给clearTimeout使用。
clearInterval():该方法只能清除由setInterval设置的定时操作
clearTimeout():该方法只能清除由setTimeout设置的定时操作
Location对象
对象包含有关当前 URL 的信息
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History页面代码：
<input
type="button" value="返回上一个页面" onclick="javascript:history.back()[ThinkPad1] "/>
go(参数)
参数：-1 返回上一个历史记录页面；-2返回上上一个历史记录页面，1进入下一个历史记录页面。
让按钮点击失效：
οnclick=”javascript:volid(0)”
[ThinkPad1]如果javascript代码比较少，可以直接这么写
Navigator 对象包含有关浏览器的信息。(该对象开发中不怎么常用)
Screen 对象包含有关客户端显示屏幕的信息。(该对象开发中不怎么常用)
五、使用JS完成注册页面表单校验
使用事件(聚焦事件onfocus和离焦事件onblur),之前使用onsubmit也需要！
使用<span></span>
向页面指定位置写入内容：innerHTML属性(该属性的值存在覆盖现象)
<sctript>
function showTips(id,info){
//获取span元素，给出提示信息
document.getElementById(id+"span").innerHTML="<font
color='gray'>"+info+"</font>";
}
function check(id,info){
//获取用户输入的数据
var uValue = document.getElementById(id).value;
//进行判断
if(uValue==""){
//在span位置给出错误提示信息
document.getElementById(id+"span").innerHTML="<font
color='red'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML="";
}
}
</script>
Html部分代码
<input
type="text" name="user" id="user"
onfocus="showTips('user','用户名必须以字母开头！')" onblur="check('user','用户名不能为空！')"/><span id="userspan"></span>
六、使用JS完成表格的一个隔行换色
标签：
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
确定事件(页面加载事件onload)
获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。
Tbody里面的行数(rows.length)
JS的遍历(for循环)
获取奇数行和偶数行(对遍历中角标对2取余)
设置背景颜色(.style.backgroundColor)
<script>
window.onload = function(){
//1.获取表格
var tblEle = document.getElementById("tbl");
//2.获取表格中tbody里面的行数(长度)
var len = tblEle.tBodies[0].rows.length;
//alert(len);
//3.对tbody里面的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
//4.对偶数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
//5.对奇数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
</script>
HTML代码：
给table里
面添加一个id=“tbl”,在table里面添加新标签和
6.1.实现一个表格的高亮显示
确定事件(onmouseover和onmouseout)并分别为其绑定一个函数
onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress：搜索引擎使用较多
onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove：购物网站商品详情页。
onsubmit：表单提交事件 ，有返回值，控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件(二级联动)
七、使用JS完成全选和选不选操作
确定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面
获取编号前面的复选框的状态(是否选中)
获取复选框：var
checkAllEle = document.getElementById(“id”)
获取复选框的状态：checkAllEle.checked?
获取下面所有的复选框：
document.getElementsByName(“name”);
javascript的DOM操作
Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.
Ø Document对象
创建文本节点：document.createTextNode()
创建元素节点：document.createElement()
我们所认知的html页面中所有标签里面的属性都是attribute
八、使用JS完成省市二级联动
事件(onchange)
使用一个二维数组来存储省份和城市(二维数组的创建？)
获取用户选择的省份(使用方法传参的方式：this.value)
遍历数组(获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下所有的城市)
创建文本节点和元素节点并进行添加操作
createTextNode()
createElement()
appendChild()
Ø Date对象
getTime()
返回 1970 年 1 月 1 日至今的毫秒数。
解决浏览器缓存问题
全局属性和函数可用于所有内建的 JavaScript 对象
1464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
