标签：整数 int append 文档 exti please war 城市 表单
1、js的String对象
* 属性：length，字符串的长度
* 方法
** 与html相关的方法
*** bold()：加粗字符串
*** fontcolor(): 设置字体的颜色
*** fontsize()：设置字体的大小
*** link(): 把字符串设置成超链接
*** sub(): 下标
*** sup()：上标
** 与java相似的方法
*** charAt(): 返回指定位置的字符
**** 代码 字符的位置从0开始，使用这个方法的使用，如果位置超过了字符串，显示空字符串
//charAt方法
var str = "abcd";
document.write(str.charAt(4));
*** concat()：连接字符串
**** 代码
var str1 = "java";
document.write(str.concat(str1));
*** indexOf()：检索字符串
**** 代码 如果字符存在，返回位置；如果不存在返回的是-1
var str2 = "ABCDEFG";
document.write(str2.indexOf("T"));
*** substr()：两个参数 比如 substr(1,3)
- 第一个参数：从哪个位置开始，字符串的开始位置是0
- 第二个参数：从哪个位置开始，向后取几位字符
*** substring()：两个参数 比如 substring(1,3)
- 第一个参数：从哪个位置开始，字符串的开始位置是0
- 第二个参数：到哪个位置结束，但是不包含结束的位置 [1,3)
**** 代码
//substr和substring方法
document.write("<hr/>");
var str3 = "abcdefg";
document.write("substr: "+str3.substr(1,3)); // bcd
document.write("<br/>");
document.write("substring: "+str3.substring(1,3)); // bc [1,3)
2、js的Array对象
* 创建数组（三种方式）
** var arr1 = [1,2,3];
** var arr2 = new Array(4);
** var arr3 = new Array(5,6,7);
* 属性：length，数组的长度
** //length属性
var arr1 = [1,2,3,4];
document.write(arr1.length);
* 方法
** concat()：连接数组
*** 代码
//concat()方法
document.write("<hr/>");
var arr2 = [6,7,8];
document.write(arr1.concat(arr2));
** join(): 根据指定的分割符进行分割
*** 代码
//join方法
document.write("<hr/>");
var arr3 = ["AA","BB","CC"];
document.write(arr3);
document.write("<br/>");
document.write(arr3.join("-"));
** push()：向数组的末尾添加元素，返回添加之后的长度
*** 代码
//push方法
document.write("<hr/>");
var arr4 = ["tom","jack","mary"];
document.write("before: "+arr4);
document.write("<br/>");
document.write("length: "+arr4.push("zhangsan"));
document.write("<br/>");
document.write("after: "+arr4);
*** 如果使用push方法添加的是一个数组，把数组当成一个整体（元素）添加进去
//使用push添加数组
document.write("<hr/>");
var arr5 = ["A","B","C"];
var arr6 = ["T","Q","W"];
document.write("before: "+arr5);
document.write("<br/>");
document.write("length: "+arr5.push(arr6));
document.write("<br/>");
document.write("after: "+arr5);
for(var i=0;i<arr5.length;i++) {
alert(arr5[i]);
}
** pop() 删除并返回数组的最后一个元素
*** 代码
//pop()方法
document.write("<hr/>");
var arr7 = ["zhangsan","lisi","wangwu"];
document.write("before: "+arr7);
document.write("<br/>");
document.write("return: "+arr7.pop());
document.write("<br/>");
document.write("after: "+arr7);
** reverse() 颠倒数组中元素的顺序。
*** 代码
//reverse() 颠倒数组中元素的顺序。
document.write("<hr/>");
var arr8 = [10,20,30];
document.write(arr8);
document.write("<br/>");
document.write(arr8.reverse());
3、js的Date对象
* 创建Date对象 var date = new Date();
* 方法
** toLocaleString()：把时间转换成本地格式的时间
*** 代码
var date = new Date();
document.write(date.toLocaleString());
** 得到当前的年 getFullYear() 从 Date 对象以四位数字返回年份
//得到当前的年
document.write("<hr/>");
document.write(date.getFullYear());
** 得到当前的月 getMonth() 从 Date 对象返回月份 (0 ~ 11)
** 返回值 0-11，得到准确的月份 +1
document.write(date.getMonth()+1);
** 得到当前的星期 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
*** 如果当前的时间是星期日，通过这个方法得到值是0
** 得到当前的天 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
//得到当前的天
document.write("<hr/>");
document.write(date.getDate());
** 得到当前的小时 getHours()
** 得到当前的分钟 getMinutes()
** 得到当前的秒 getSeconds()
*** document.write(date.getHours()+" - "+date.getMinutes()+" - "+date.getSeconds());
** 得到毫秒数： getTime() 返回 1970 年 1 月 1 日至今的毫秒数
*** document.write(date.getTime()); 防止页面的缓存
4、js的Math对象
* 在Math里面的方法是静态方法，直接使用Math.方法名称调用
** ceil(x) 对一个数进行上舍入。
* 只要小数点后面有值，+1
** floor(x) 对一个数进行下舍入。
* 小数点后面无论是几，舍去
** round(x) 把一个数四舍五入为最接近的整数
**var m = 10.4;
document.write(Math.ceil(m)); // 11
document.write("<br/>");
document.write(Math.floor(m)); // 10
document.write("<br/>");
document.write(Math.round(m)); // 11
** random()：得到随机数
*** document.write(Math.ceil(Math.random()*10));
5、js的全局函数
* 方法不属于任何一个对象，这些方法使用，直接写方法名称来使用
* 方法
** eval()：比如字符串是一个js代码，使用这个方法执行js代码
*** var str = "alert(‘abc‘);";
//alert(str);
eval(str);
** encodeURI(): 对字符串进行编码
** decodeURI()：对编码之后的字符串进行解码
*** var str1 = "aacc测试中文";
var encode1 = encodeURI(str1);
document.write(encode1);
document.write("<hr/>");
var decode1 = decodeURI(encode1);
document.write(decode1);
** isNaN():判断是否是数字
** 返回的值是true和false
*** 如果是一个数字，返回false
*** 如果不是一个数字，返回true
** parseInt()： 转换成数字
6、js的函数的重载
* js里面不存在函数重载
* 在js的函数里面有一个数组是 arguments
** arguments数组用于存储向方法里面传递的参数
** 使用arguments模拟重载的效果
//模拟重载的效果
function add1() {
var sum = 0;
//遍历数组
for(var i=0;i<arguments.length;i++) {
sum += arguments[i];
}
return sum;
* js里面存在重载吗？
** js里面不存在重载
** 但是可以通过函数里面arguments数组模拟重载的效果
7、js的bom对象
* bom：browser object model，浏览器对象模型
* 在bom里面提供了一些对象，使用这些对象可以操作
* navigator：得到浏览器的一些信息
document.write(navigator.appName);
* screen：得到屏幕信息
document.write(screen.width+" "+screen.height);
* location：使用属性href，第一个功能：得到当前请求的地址；第二个功能：设置请求的地址
** 第一个功能：document.write(location.href);
** 第二个功能：location.href = "hello.html";
*** 知识引入，在表单输入项里面，button，<input type="button" value="href" onclick="js的方法"/>
*** 在button上面属性 onclick，表示是鼠标点击事件 onclick="js的方法"
* history：得到请求的地址的历史
** 创建三个页面
** //到上一个页面
function forward1() {
history.back();
}
//到下一个页面
function next1() {
history.forward();
}
** 还有一个方法实现相同的效果 go()
history.go(-1);
history.go(1);
* window（****）：窗口对象，是一个顶层对象
** 方法
*** alert()：在页面弹出一个框
*** confirm()：确认框
//confirm方法
var flag = window.confirm("确认删除?");
//alert(flag);
if(flag) {
alert("删除成功");
} else {
alert("删除失败");
}
*** prompt(): 输入框
window.prompt("please input:","10");
*** open(): 打开一个新窗口
* window.open("打开页面url地址","","窗口特征");
* window.open("hello.html","","width=200,height=100");
*** close()：关闭窗口
*** 两个很重要的方法（用于定时器效果）
**** setInterval("js代码",毫秒数): 表示在一定的时间内，重复执行js代码
*** window.setInterval("alert(‘12345‘);",3000);
*** setTimeout("js代码",毫秒数)：表示在一定时间之后，执行js代码一次
*** window.setTimeout("alert(‘abc‘);",4000);
*** clearInterval() 取消由 setInterval() 设置的 timeout。
window.clearInterval(id1);
*** clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
window.clearTimeout(id2);
8、js的dom对象
* document object model: 文档对象模型
** 文档：标记型文档 html xml
** 对象：对象里面有属性和方法
*** 使用js的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作
** 如果想要对标记型文件进行操作，首先解析标记型文档
*** 第一步：需要把标记型文档里面的所有内容都封装成对象
** 标签 、 属性、 文本内容都封装成对象
*** 使用dom解析html过程（画图分析过程）
** 根据html的层级结构在内存中分配一个树形结构
** dom里面提供了很多的对象，使用这些对象可以对html进行操作
** document对象：整个文档
** element对象：标签对象（元素对象）
** 属性对象
** 文本对象
** Node节点对象，这个对象是其他对象的父对象
9、DHTML的介绍
* 不是一种技术，是很多技术的简称
* html： 封装数据的作用
* css：使用属性和属性值添加样式
* ECMAScript: 专门js的语句和语法
* dom：对标记型文档进行操作
10、document对象
* document对象代表整个文档
**通过document对象可以得到html中标签对象
** 方法
*** getElementById(): 可以通过id得到标签的对象
*** 如果想要得到标签里面的属性的值：标签对象.属性名称
**** //得到的是input标签对象
var input1 = document.getElementById("testid");
//得到input标签里面的value的值
alert(input1.value);
*** getElementsByName(): 通过name的值得到所有标签，返回的是一个数组,
**** 遍历数组得到每一个标签对象，通过标签对象名称.属性名称, 得到属性值
**** var inputs1 = document.getElementsByName("testname");
//alert(inputs1.length);
//遍历数组
for(var i=0;i<inputs1.length;i++) {
//获取每一个input对象
var input1 = inputs1[i];
//得到每一个input的value值
alert(input1.value)
}
**** 如果要得到的标签只有一个，如果也是通过name属性得到，返回的也是一个数组，而不是一个对象
**** 可以直接通过数组的下标获取标签对象，通过标签对象名称.属性名称, 得到属性值
**** var inputs2 = document.getElementsByName("username")[0].value;
*** getElementsByTagName(): 根据标签名称得到标签的对象，返回的是一个数组,
**** 遍历数组得到每一个标签对象，通过 标签对象名称.属性名称, 得到属性值
**** //getElementsByTagName，返回是数组
var inputs3 = document.getElementsByTagName("input");
alert(inputs3.length);
//遍历数组
for(var a=0;a<inputs3.length;a++) {
//得到每一个input标签对象
var input3 = inputs3[a];
//得到value的值
alert(input3.value);
}
**** 如果要得到的标签只有一个，如果也是通过name属性得到，返回的也是一个数组，而不是一个对象。
**** 可以直接通过数组的下标获取标签对象，通过 标签对象名称.属性名称, 得到属性值
**** var inputs4 = document.getElementsByTagName("input")[0]; //返回数组
*** write方法：向页面输出内容，输出html代码
11、debug调试（断点调试模式）
* 首先设置断点，双击左边，出现蓝色的点
* 运行程序，不要使用run as，而要使用debug as运行
* 单步执行 快捷键 F6
* 去掉断点
12、内容补充
* list的遍历常用三种方式：普通for循环，迭代器，增强for
* set的遍历两种：迭代器，增强for
* map的遍历两种：第一种得到所有的key，通过key得到value；第二种得到key和value的关系
* 可变参数 public void get1(int...nums){}
** 在方法的参数列表中只能有一个可变参数，可变参数放到参数列表的最后
* 泛型 List<Integer> list = new ArrayList<Integer>();
Map<String,String> map = new HashMap<String,String>();
* 自动拆装箱
** 装箱：把基本数据类型转化成包装类
** int：Integer
** char：Character
1、案例：在末尾添加节点
* 步骤
第一步：创建li标签
document.createElement("标签名称");
第二步：创建文本
document.createTextNode("文本内容");
第三步：把文本放到li下面
li.appendChild(node);
第四步：把li放到ul下面
ul.appendChild(node)
* 代码
function add1() {
//创建li标签
var li1 = document.createElement("li");
//创建文本
var tex1 = document.createTextNode("DDD");
//把文本添加到li下面
li1.appendChild(tex1);
//把li添加到ul的下面
//获取到ul标签
var ul1 = document.getElementById("ulid");
ul1.appendChild(li1);
}
2、Element对象（标签对象）
* 首先要得到标签对象
* 获取属性：getAttribute(name)方法。
* //getAttribute(name)方法：得到属性的值
var input1 = document.getElementById("textid");
//alert(input1.value);
alert(input1.getAttribute("value"));
* 设置属性：setAttribute(name,value)方法。
* //setAttribute(name,value)方法
alert(input1.getAttribute("name"));
input1.setAttribute("name","textname");
alert(input1.getAttribute("name"));
* 删除属性：removeAttribute(name)方法。
* alert(input1.id);
input1.removeAttribute("id");
alert(input1.id);
* 不能删除value的值
* 得到标签下面的子标签的操作
** childNodes属性，得到标签下面的子标签，浏览器的兼容性很差，所以一般不使用这个属性
** 获取标签下面的子标签的唯一有效方法，是使用getElementsByTagName()方法
//getElementsByTagName()方法
var lis1 = ul1.getElementsByTagName("li");
alert(lis1.length);
3、Node对象
* Node节点对象，是其他对象的父对象
* 属性
* 在dom解析时候，需要把html的所有部分都封装成对象，包含标签 属性 文本
* nodeName
* nodeType
** 如果标签对象 1
** 如果属性对象 2
** 如果文本对象 3
* nodeValue
** 标签对应的属性的值
var div1 = document.getElementById("div1");
alert(div1.nodeName); // DIV (大写的标签名称)
alert(div1.nodeType); // 1
alert(div1.nodeValue); // null
** 属性对象对应的node里面的三个属性的值
var id1 = div1.getAttributeNode("id");
alert(id1.nodeName); //id 属性名称
alert(id1.nodeType); // 2
alert(id1.nodeValue); //div1 属性的值
** 文本对象对应的node里面的三个属性的值
var tex1 = div1.firstChild;
alert(tex1.nodeName); //#text
alert(tex1.nodeType); // 3
alert(tex1.nodeValue); //文本内容
* parentNode：获取父节点
** //获取到li的标签
var li1 = document.getElementById("li1");
//得到父标签ul
var ul1 = li1.parentNode;
alert(ul1.id);
* 父节点，子节点，同辈节点
* 方法
** appendChild()：
*** 添加到末尾
*** 特点：类似剪切黏贴的效果
** insertBefore(newNode,oldNode): 可以在某个节点之前插入
** 方法里面有两个参数：第一个参数要添加的节点，第二个参数是在谁之前添加
*** /*
1、得到在谁之前添加的节点 li4
2、创建节点
* 创建标签 li
* 创建文本
* 把文本添加到标签下面
3、得到ul标签
4、通过ul标签进行添加 insertBefore(newNode,oldNode)
*/
** removeChild()：删除节点
*** 首先不能自己删除自己，通过父节点删除
*** /*
1、得到要删除的标签
2、得到删除节点的父节点
3、通过父节点删除 removeChild()
*/
** replaceChild(newNode,oldNode)方法:替换节点
** 有两个参数：第一个替换成的节点，第二个被替换的节点
** /*
1、得到要替换的节点
2、创建新的节点
* 创建标签
* 创建文本
* 把文本添加到标签下面
3、获取父节点
4、通过父节点进行替换
*/
** cloneNode(boolean)方法:复制节点
*** 参数：是否复制子节点
*** //得到ul标签
var ul1 = document.getElementById("ul1");
var ul21 = ul1.cloneNode(true)
//放到div里面
var divv = document.getElementById("divv");
divv.appendChild(ul21);
4、Node方法的总结
* 获取标签对象
** getElementById("id的值")
** getElementsByName("name的值")：返回数组
** getElementsByTagName("标签名称")：返回数组
* 查找标签的子标签的唯一有效方法是 getElementsByTagName("标签名称");
* appendChild方法：在末尾添加节点，类似剪切黏贴效果
* insertBefore() replaceChild() removeChild(): 通过父节点操作
5、innerHTML属性
* 浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。
* 实现的功能：
** 第一个：获取标签里面的文本内容
*** //得到div标签
var div11 = document.getElementById("div11");
alert(div11.innerHTML);
** 第二个：向标签里面设置内容（文本内容，html代码）
** var div12 = document.getElementById("div12");
//div12.innerHTML = "张三李四王二赵六";
//向div里面设置表格 <table border=‘1‘><tr><td>123456</td></tr></table>
div12.innerHTML = "<table border=‘1‘><tr><td>123456</td></tr></table>";
** var tab = "<table>";
tab += "<tr>";
tab += "</tr>";
tab += "</table>";
6、案例：动态显示时间
* 得到当前的时间 var date = new Date(); date.toLocaleString();
* 步骤
/*
1、得到当前的时间
new Date(); 使用toLocaleString方法
2、使用定时器向div里面每一秒写一次时间 setInterval("方法",1000);
* 首先得到div
* 使用innerHTML属性写时间
*/
7、案例：全选练习
* 页面 复选框和按钮
** 复选框name值必须要一样
** 如果判断是否被选中，通过checked属性进行判断
***通过属性checked，这个checked==true 表示复选框是选中的，如果checked==false 表示复选框是没有选中
* 步骤
（1）全选和全不选的操作
/*
1、得到要全选的复选框
* 通过name得到这些复选框 使用方法 getElementsByName()
2、返回的数组，遍历数组，得到每一个复选框
3、把每一个复选框属性checked值设置成true | false
*/
（2）反选的操作
/*
1、得到要全选的复选框
* 通过name得到这些复选框 使用方法 getElementsByName()
2、返回数组，遍历数组，得到每一个复选框
3、判断当前的复选框是选中还是不选中，
* if语句 checked==true 选中，把checked的值设置成false
* 如果checked==false 不选中，把checked值设置成true
*/
（3）使用复选框实现全选和全不选的操作
/*
1、判断全选和全不选的复选框的状态
* 首先得到复选框
* 使用checked属性进行判断 选中 true 不选中 false
2、如果是选中，调用全选的方法
3、如果没有选中，调用全不选的方法
*/
8、案例：下拉列表的左右选择
* 创建页面
* 实现思路：
** 如果判断是否是选中：使用属性selected进行判断，如果selected==true表示选中状态，selected==true表示没有选中状态
** appendChild： 类似剪切黏贴的效果
** 把左边的option的标签加到右边的select下面
*** 首先获取左边选中的option
*** 获取右边select标签，在select使用方法appendChild
（1）实现选择添加到右边
/*
1、得到左边的select标签
2、得到select1下面的option的标签 使用方法getElementsByTagName方法
3、返回的是数组，遍历数组，得到每一个option标签
4、判断是否是选中的状态
* 使用if语句，使用属性selected进行判断，true是选中，false没有选中
5、如果是选中状态，添加到右边
* 获取select2的标签（右边的标签）
* 在select2的标签执行appendChild方法完成添加
*/
（2）实现全部添加到右边
/*
1、得到左边的select标签
2、得到select1下面的option的标签 使用方法getElementsByTagName方法
3、返回的是数组，遍历数组，得到每一个option标签
4、得到select2的标签
5、在select2里面执行appendChild方法完成添加
*/
（3）实现选择添加到左边
/*
1、得到右边select标签
2、得到select下面的option
3、返回的是数组，遍历数组，得到每一个option
4、判断每一个option是否是选中的状态
5、如果是选中的状态，添加到左边
* 得到左边的select标签
* 在左边的select标签执行appendChild方法
*/
（4）实现全部添加到左边
/*
1、得到右边select标签
2、得到select下面的option
3、返回的是数组，遍历数组，得到每一个option
4、得到左边的select标签
5、执行appendChild方法完成添加到左边
*/
*** 写js的方法名称时候，不要使用单个的单词：add、select
* add_1() add1()
* 不要这样写：_add1();
9、案例：省市联动
* 创建页面：有两个下拉框，左边下拉框里面有内容，右边空
* 实现步骤
/*
** 最终结果：点击左边的国家，把国家对应的城市添加到右边的select里面
实现的步骤：
** 使用到事件 onchange事件，改变事件
** onchange="add1(this.value);得到当前选择的值
** 拿到传过来的值，和数组里面的第一个值进行比较
*** 首先遍历数组，因为是一个二维数组，每次遍历之后的结果就是一个数组
*** 获取到遍历之后的数组的第一个值，和传过来的值进行比较
** 如果比较的值相同，把第一个值后面的内容添加到第二个select里面
*** 得到第一个值后面的所有的值，遍历数组，但是遍历需要从1开始
** 把这个值放到select2里面
*** 得到select2
*** 要向select2里面添加的是option标签，但是需要创建（三步）
*** 把option标签添加到select2下面使用appendChild方法
** 遇到问题：
第一个选择国家，在第二个下拉框里面可以正常显示国家的城市，但是第二次在点击一个国家之后，会把第二个国家的城市
在第一个国家城市后面做一个追加
** 解决方法：
*** 只有调用方法的时候，把右边的下拉框清空（删除右边的select里面的option就可以了）
*** 使用removeChild方法删除，通过父节点（得到s2）
*/
10、案例：动态生成表格
* 创建页面：两个输入框和一个按钮（事件）
* 实现步骤
/*
1、得到输入框里面的值
2、根据输入的值创建表格
* 生成行 <tr> 使用for循环生成行
** 生成列：在tr里面 <td> 使用for循环生成单元格
* 在最外面要<table>
3、把生成的表格的代码写到div里面（使用innerHTML属性）
*/
* 代码片段
//生成表格的代码
var tab = "<table border=‘1‘ bordercolor=‘blue‘>";
//生成行
for(var i=1;i<=h;i++) {
tab += "<tr>";
//循环列
for(var j=1;j<=lie;j++) {
tab += "<td>AAAAAAAAAAA</td>";
}
tab += "</tr>";
}
tab += "</table>";
11、junit单元测试
* 针对一个方法进行的测试
* 在java里面默认没有junit的，如果想要使用junit，需要引入支持jar包
* 但是在myeclipse开发工具中，自带了jar，拿过来直接使用
* jnnit包含 3.x 4.x 使用4.x
** 使用单元测试，写一个单元测试的方法，方法有书写规范， public void get1() { }
* 使用注解 @Test：表示对方法进行单元测试
** 运行单元测试 选择这个方法，点击JUnit Test完成单元测试，当出现绿色的条时候，表示测试通过，但是出现红棕色的条
表示测试失败
标签：整数 int append 文档 exti please war 城市 表单
原文地址：http://www.cnblogs.com/one2miss/p/7363893.html
