1.字符串类型
var str ="hehe";
var str2 =newString("hehe");
注意：获取字符串的长度是length属性，不是length函数
2.Math ： 相当于java里的工具类，里面的函数相当于java里的静态函数，可以用Math直接调用
var ran = Math.random();3.日期类型 Date
1）var d1 =newDate();--> 得到当前浏览器时间对象
var d2 =newDate("1992-04-01");---> 创建一个指定日期值的date对象
2）常见函数：
getFullYear()---> 获得四位的年
getMonth()---> 获得日期对象里的月（0~11）
。。。。。
一.概念解析
1.软件解析xml文档的两种方式： dom sax
dom -- 浏览器软件将html文档加载进内存，封装成一颗“文档树”，html里的所有标签都被封装成“标签对象”成为“文档树”上的一个节点。
父标签对象对子标签对象拥有所有的操作权限（增删改查）
sax -- 将文档逐行解释找到对应的标记，当再次访问时会重新逐行解释（一次快）
dom里的常见内置对象
document --- 代表整个文档对象（主要只body部分，地址栏以下，状态栏以上）
window ---- 代表整个浏览器窗口对象，document是window的一个属性，使用window功能时，window可以省略
2.获取html文档里的相应的标签对象
1）目的：通过修改标签的属性或样式，达到修改文档和添加动态效果的目的
2）API
var tag = document.getElementById("标签的id属性值"); 【重点】element元数标签
var tags = document.getElementsByTagName("标签名");--- 返回值是一个数组
父标签.getElementsByTagName("标签名");
var tags = document.getElementsByName("标签的name属性值");--- 通常只有表单标签会定义name属性
var tags = document.getElementsByClassName("标签的class属性值");--- 通过css样式获取标签
3）修改属性或者样式
修改 --- tag.属性名=新值
获取 --- var value = tag.属性名
添加或者修改样式
--单独指定一个css样式 tag.style.color="red" tag.style.backgourndColor="blue"--批量修改指定一类风格 tag.className ="一个class值"3.标签对象的常见属性一
1）innerHTML：代表标签体里的内容（文本，一个标签）
2)this: 代表产生事件的当前标签对象
4.删除标签对象
1) parentTag.removeChild(childTag);--- 从父标签对象中删除孩子标签对象
2）标签对象的一些关系属性：
tag.parentNode --- 获取tag的父标签对象
tag.childNodes --- 获取tag的所有孩子节点（文本，子标签）
tag.firstChild --- 获取tag的第一个孩子
tag.lastChild
tag.nextSibling --- 获取tag的下一个同级标签
tag.previousSibling --- 获取tag的上一个同级标签
注意：存在浏览器差异，谷歌浏览器会将标签间的空格也算作一个节点。
3）在js里，以tbody为表格的基础标签
<table><tbody><tr>....</tr></tbody></table>4)删除辅助功能：弹出确认框
var ba = window.confirm("提示文字");---》 函数返回一个boolean值代表确认框里的选择
5.添加新的标签
1）创建一个新标签 -- var tag = document.createElement("标签名");
eg:<h1>HelloWorld</h1>
var tag = document.createElement("h1");
tag.innerHTML ="HelloWorld";2）添加到网页里的指定位置
parentTag.appendChild(newTag);---> 将newTag添加到现有标签的最后面，称为父标签的最后一个孩子节点
parentTag.insertBefore(newTag,oldTag);---> 将newTag添加到oldTag之前
3）为新标签添加事件的代码
newTag.onclick =function(){ js功能代码 或者 直接调用现有的函数 }6.替换标签的方法
parentTag.replaceChild(newTag,oldTag);--> 用新标签替换掉旧的标签
Dom编程注意事项： innerHTML（普通标签） 和 value（表单元素）
//选中所有
function selectAll(){//1. 获取所有的checkbox标签
var inps = document.getElementsByTagName("input");for(var i=0;i<inps.length;i++){if(inps[i].type =="checkbox"){//2. 设置它们的属性checked为true
inps[i].checked =true;}}}
十.下拉列表的处理
1. options -- 下拉列表标签对象的一个属性，属性值为数组类型。作用是获取下拉列表里的所有的option选项标签对象
2. selectedIndex -- 下拉列表标签的一个属性，表示被选中的option的下标
3. 下拉列表需要注册onchange事件（失去焦点并且值发生改变）
4. 清空下拉列表： tag.options.length =0;5. 生成下拉列表里的一个option标签： var opt =newOption(text,value);<head><meta http-equiv="content-type" content="text/html" charset="UTF-8"/><title>CITYJS</title><script type="text/javascript">
var liaoning =[{text:"沈阳",value:"shengyang"},{text:"大连",value:"dalian"},{text:"铁岭",value:"tieling"}];
var shanxi =[{text:"朔州",value:"shuozhou"},{text:"太原",value:"taiyuan"},{text:"运城",value:"yuncheng"}];
var jiangsu =[{text:"南京",value:"nanjing"},{text:"无锡",value:"wuxi"},{text:"徐州",value:"xuzhou"}];
function getCityArray(proValue){if(proValue =="liaoning")return liaoning;if(proValue =="shanxi")return shanxi;if(proValue =="jiangsu")return jiangsu;}// 当第一个下拉列表失去焦点并且值改变时，执行该函数。 函数会初始化city下拉列表填充数据
function initCity(tag){// 此处tag参数代表 pro下拉列表//1. 获取被选中的省份名
var proValue = tag.options[tag.selectedIndex].value;//2. 根据省份名获取对应的城市数组
var cityArray =getCityArray(proValue);//3. 遍历数组，将数组里的每一个对象封装成option，设置给城市下拉列表
var citySelect = document.getElementById("city");
citySelect.options.length =1;// 清空下拉列表for(var i=0;i<cityArray.length;i++){
var obj = cityArray[i];// 一个城市对象 （ text，value）
var opt =newOption(obj.text,obj.value);// 封装一个option选项//将封装好的opt设置到城市下拉列表里 citySelect
citySelect.options[i+1]= opt;}}</script></head><body><select name="pro" onchange="initCity(this)"><option>请选择省</option><option value="liaoning">辽宁</option><option value="shanxi">山西</option><option value="jiangsu">江苏</option></select><select name="city" id="city"><option>请选择城市:</option></select></body></html>
十一.BOM — browser object model 浏览器对象模型
1.bom -- 一组与浏览器相关的内置对象以及他们的函数和属性 （window）
2.window的常用功能（使用window的函数时，可以省略window）
1）open("url")--- 打开一个新的浏览器窗口，并在窗口里显示url指定的资源。函数有返回值，为当前打开的新窗口对象
var w = window.open("url");close()--- 关闭窗口对象
2）对话框
警告框 -- window.alert("......");
确认框 -- var ba = window.confirm("....");
提示输入框 --- var str = window.prompt("....");3）定时器
var id = window.setTimeout(fun,time);--- 在time毫秒后，执行一次fun函数
window.clearTimeout(id);---移除定时器
var id = window.setInterval(fun,time);--- 周期定时器，每隔time毫秒，执行一次fun函数
window.clearInterval(id);
eg:显示系统时间
<head><meta http-equiv="content-type" content="text/html;charset=UTF-8"><title>SYSDATE</title><style type="text/css">
#d1{width:38%;height:50px;background: #5494F3}</style><script type="text/javascript">
function fun(){
var d1 = document.getElementById("d1");
d1.innerHTML =newDate();}
window.setInterval(fun,1000);//系统时间动态进行（1秒进行一次）
function fun2(){
var d2 = document.getElementById("d2");
d2.innerHTML = d2.innerHTML+".";}
var interval2 = window.setInterval(fun2,1000);
function fun3(){
window.clearInterval(interval2);
location.href="/mavenweb/emp/showEmp";}
window.setTimeout(fun3,5000);//5秒以后跳到showEmp(action)</script></head><body><div id="d1"></div><div id="d2">正在加载</div></body></html>4）location -- window的一个属性，而location有一个href属性，用来在js代码里向其他资源跳转（类似于超链接）
location.href ="url";5）history -- 是window的一个属性
history.back()-- 退回到上一个浏览的网页
history.forward()-- 前进
history.go(num)-- num为负数则表示后退，num为正数是前进 ， num为0表示刷新
轮播图
<head><meta http-equiv="content-type" content="text/html;charset=UTF-8"><title>LunBoTu</title><style type="text/css">
#d1{width:300px;height:420px;margin:10px auto}</style><script type="text/javascript" src="../js/jquery-1.8.3.js"></script><script type="text/javascript">
var imageArray =["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg"];
var num =0;
function changeImageSrc(){if(num==5){num=0;}
var image = document.getElementById("image");
image.src="../viewjs/image/"+imageArray[num++];}
var id1 = window.setInterval(changeImageSrc,1000);
function stop(){
window.clearInterval(id1);}
function start(){
id1 = window.setInterval(changeImageSrc,1000);}</script></head><body><div id="d1" onmouseout="start()" onmouseover="stop()"><img src="../viewjs/image/1.jpg" id="image"/></div></body></html>
1.字符串类型
var str ="hehe";
var str2 =newString("hehe");
注意：获取字符串的长度是length属性，不是length函数
2.Math ： 相当于java里的工具类，里面的函数相当于java里的静态函数，可以用Math直接调用
var ran = Math.random();3.日期类型 Date
1）var d1 =newDate();--> 得到当前浏览器时间对象
var d2 =newDate("1992-04-01");---> 创建一个指定日期值的date对象
2）常见函数：
getFullYear()---> 获得四位的年
getMonth()---> 获得日期对象里的月（0~11）
。。。。。
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
