标签：
1、上节课内容回顾 * html里面form表单 * css * javascript
2、内容补充 1、js和html两种结合方式 * 使用外部文件方式 * <script type="text/javascript" src="1.js">不能写js代码</script> 2、padding：内边距 * padding: 20px; * 另外一种设置方式： /* 设置内边距 按照顺时针顺序 */ padding:20px 40px 60px 10px;
3、js的运算符里面 == 和 ===区别 if（i==3）：数值的比较 if(i===3):类型和值 ** == 比较只是值，与类型无关 ** === 比较的是类型和值
3、js的String对象 ** 创建String对象 - var str = "abc"; - var str1 = new String("aaa"); * 属性：length 字符串的长度
* 方法： ** 与html相关的方法（设置样式的方法） - bold() 使用粗体显示字符串。 - fontcolor() 使用指定的颜色来显示字符串。 * document.write(str.fontcolor("red")); - fontsize() 使用指定的尺寸来显示字符串。 * size 参数必须是从 1 至 7 的数字。 - link() 将字符串显示为链接。 * document.write(str.link("01-内容补充.html")); - sub() 把字符串显示为下标。 - sup() 把字符串显示为上标。
** 和java相似的方法（java里面也有类似的方法 split ） - charAt() 返回在指定位置的字符。 * document.write(str1.charAt(7)); * 如果没有这个字符，返回“” - concat() 连接字符串。 * document.write(str1.concat(str2)); - indexOf() 检索字符串。 返回字符的位置，如果没有返回-1 * indexOf() 方法对大小写敏感！ - replace() 替换字符串 * 传递两个参数 replace(old,new) * old: 要替换的部分 * new：替换成的部分 - split() 把字符串分割为字符串数组。 * var arr = str3.split("-");
- * substr() 从起始索引号提取字符串中指定数目的字符。 * 两个参数 - * substring() 提取字符串中两个指定的索引号之间的字符。 * var str4 = "abcdef123456"; document.write("substr: "+str4.substr(3,5)); //def12 ** 从第三开始，向后截取五位 document.write("<br/>"); document.write("substring: "+str4.substring(3,5)); //de [3,5) ** 从第三位开始到第五位结束，但是不包含第五位 [3,5)
4、js的Array对象 * 创建数组方式 三种 1、var arr1 = [1,2,"4"]; 2、var arr2 = new Array(3); 3、var arr3 = new Array(4,5,6); * 属性：length 设置或返回数组中元素的数目。 * 方法： - concat()：连接数组 * document.write("concat: "+arr.concat(arr1)); - join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 * document.write("new: "+arr2.join("-")); - push() 向数组的末尾添加一个或更多元素，并返回新的长度。 * //创建一个数组 arr4 var arr4 = ["aaaa","bbbb","cccc"]; //执行push方法 document.write("length: "+arr3.push(arr4)); //执行push方法之后的值 document.write("<br/>"); document.write("new: "+arr3); ** 添加的是一个元素，如果添加数组，会把作为一个整体添加进去 - pop() 删除并返回数组的最后一个元素 * //pop方法 document.write("<hr/>"); var arr5 = ["tom","jack","mary"]; //输出原始值 document.write("old:"+arr5); //执行pop方法 document.write("<br/>"); document.write("执行pop的返回值："+arr5.pop()); //执行pop之后数组的值 document.write("<br/>"); document.write("new:"+arr5); - reverse() 颠倒数组中元素的顺序。 * //reverse方法 document.write("<hr/>"); var arr6 = [11,12,13,14]; document.write("old:"+arr6); //执行reverse方法 document.write("<br/>"); document.write(arr6.reverse());
5、js的Date对象 * 创建Date对象 var date = new Date();
// Date date = new Date(); * 方法： - toLocaleString():根据本地时间格式，把 Date 对象转换为字符串。 - 获取年：getFullYear() 从 Date 对象以四位数字返回年份 （不使用getYear方法） - 月: getMonth() 从 Date 对象返回月份 (0 ~ 11) ,需要加1 - 星期：getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6) * 判断一下，如果0 ，加7，表示的星期日 - 日：getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31) - 小时 getHours() - 分钟：getMinutes() - 秒：getSeconds()
- getTime() 返回 1970 年 1 月 1 日至今的毫秒数 ** 应用场景：防止浏览器缓存
6、js的Math对象 * 一些数学运算 * Math里面的方法，都是静态的方法 - ceil(x) 对一个数进行上舍入。 - floor(x) 对一个数进行下舍入。 - round(x) 把一个数四舍五入为最接近的整数 * var a = 12.6; //ceil document.write(Math.ceil(a)); //floor document.write("<br/>"); document.write(Math.floor(a)); //round document.write("<br/>"); document.write(Math.round(a));
- random() 返回 0 ~ 1 之间的随机数 * //生成0-9之间的随机数 document.write("<hr/>"); document.write(Math.floor(Math.random()*10));
7、js的全局函数 * 不属于任何一个对象，使用直接写方法名 eval(); * 常用方法： - eval()：执行字符串里面的js代码 var str = "alert(‘123‘);"; //alert(str); eval(str); - isNaN():判断当前是否是个数字 * NaN:表示不是一个数字 * 返回是true false * 如果不是数字返回 ture * 如果是数字返回 false * 字符编码，ie浏览器url编码，火狐浏览器base64编码 - encodeURI()：把字符进行编码 - decodeURI()：把字符进行解码
- parseInt():转换类型 * document.write(parseInt(str4)+1);
8、js的函数重载 * java里面的重载：肯定有重载，方法名相同，参数不同 * js里面 没有重载，可以通过一些其他的方式来模拟重载的效果 — js里面没有重载 - js的函数里面有一个数组arguments，这个数组用于存储传递过来的参数
* 面试题目：js里面是否存在重载？ 1、js里面不存在重载 2、但是可以使用其他方式来模拟实现，使用arguments数组来实现模拟重载的效果
9、js的bom对象 * broswer object model: 浏览器对象模型 * 对象： ** navigator（了解）：浏览器的信息 - navigator.appName; - window.navigator.appName; ** screen（了解）：屏幕的信息 - screen.width - window.screen.width ** location（重点掌握属性href）：URL 的信息 * 引入 * <input type="button" value="button"/>
* 鼠标点击事件 onclick="js方法"
- 属性 href 设置或返回完整的 URL。 1、获得url路径地址 - location.href 2、设置url路径地址 //设置url地址，实现页面跳转到的地址 function href1() { location.href = "01-内容补充.html"; }
** history（三个方法）：url的历史信息 * back() 加载 history 列表中的前一个 URL * forward() 加载 history 列表中的下一个 URL
* go() 加载 history 列表中的某个具体页面 * -1:上一个页面 1：下一个页面
** 模拟实现向上一个页面，和下一个页面 - 创建一个页面h1.html 写超链接 到 h2.html - 在h2.html中写超链接到 h3.html
** window（重点）：窗口对象，顶层对象 * 方法： 1、alert(): 在页面弹出一个提示框 - window.alert(); 2、confirm(): 表示一个确认框 - var aa = window.confirm("显示在提示框上的内容"); - 有返回值，如果点击确定，返回true；点击取消，返回false
3、prompt() 显示可提示用户输入的对话框。 - prompt(text,defaultText) ** text:显示在输入框上的内容 ** defaultText：表示输入框的默认值 4、open() 打开一个新的浏览器窗口 - window.open(‘url地址‘,‘‘,‘width=200,height=100‘) 5、close():关闭窗口(有些浏览器不支持)
* 实现定时器的效果 - 每一秒，在页面上alert 123； * 方法： - setInterval(): 比如设置的是一秒，每一秒就会去执行js代码（不断的执行） ** setInterval("js代码",毫秒数) **setInterval("add1();",毫秒数) - setTimeout()：比如设置的是三秒，表示三秒后去执行js代码（只会执行一次） ** setTimeout("js",毫秒数);
- clearInterval(): 清除设置的setInterval() * setInterval()时候返回一个id * 想要清除 clearInterval(id); - clearTimeout(): 清除设置的setTimeout() * setTimeout()时候返回一个id * 想要清除 clearTimeout(id)
10、js的dom对象 * document object model 文档对象模型 ** 文档：标记型文档（html、xml） ** 对象：js是基于对象，对象里面包括属性和方法。学习js提供的dom对象里面的属性和方法 ** 模型：js提供的dom对象里面的属性和方法对标记型文档进行操作
**** 使用dom对象里面的属性和方法如何对标记型文档进行操作
* 要想操作标记型文档，首先要对标记型文档里面的所有内容进行封装成对象。 **包括 标签、文本、属性
** 要想进行操作，首先必须要解析html（标记型文档）
** 解析html（标记型文档）过程： - 根据html的层级结构，在内存中分配一个树形结构， - document对象：整个文档 - 元素对象（标签对象）element - 属性对象 - 文本对象 - 节点对象 Node：是dom里面所有对象的父对象
* DHTML介绍 * DHTML不是一种技术，而是很多技术的简称 * 包含： ** html: 封装数据 ** css：提供了很多属性和属性值，来实现数据样式的变化 ** javascript（专门指的是ECMAScript）：提供了一些语法 ** dom：文档对象模型，对标记型文档进行操作
11、dom的document对象 * 方法： ** getElementById() - 通过id得到元素（标签） - var u1 = document.getElementById("id1"); alert(u1.id);
** getElementsByName() - 通过name属性值得到元素对象（数组） - var a1 = document.getElementsByName("username"); //alert(a1.length); //遍历数组 for(var i=0;i<a1.length;i++) { var input1 = a1[i]; alert(input1.value); } - 获取一个标签，直接使用数组下标实现 var a2 = document.getElementsByName("username1")[0]; alert(a2.value);
** getElementsByTagName() - 通过标签的名称获取元素对象（数组） - //使用getElementsByTagName()返回是数组 var a3 = document.getElementsByTagName("input"); //alert(a3.length); //遍历数组 for(var m=0;m<a3.length;m++) { var input2 = a3[m]; //alert(input2.value); }
- 获取一个标签，使用getElementsByTagName var a4 = document.getElementsByTagName("input")[0]; //alert(a4.length); alert(a4.value);
** write(); 向页面输出内容，也可以输出html代码
12、window案例 * 案例开发步骤 1、创建两个页面 * 第一个页面： ** 有两个文本输入框 ** 一个按钮，写一个鼠标点击事件 onclick ***鼠标点击事件： 打开一个新的页面 open()
* 第二个页面 ** 有一个表格 有三个字段 操作 编号 姓名 ** 在操作里面有按钮： *** 点击这个按钮之后，把按钮所在行的内容赋值到第一个页面对应的文本框里面 ** 页面关闭 close()
标签：
原文地址：http://www.cnblogs.com/huajiancao/p/4735391.html
