javascript学习笔记二
1、js的string对象
**创建 String对象
*** var str = "abc";
**方法 和 属性（文档）
*** 属性 length ： 字符串的长度
***方法
（1）与html相关的方法
-- bold() : 加粗
-- fontcolor() :设置字符串的颜色
-- fontsize() :设置字体的大小
-- link() : 将字符串显示成超链接。
--- str.link("Hello.html");
-- sup() sub() : 上标和下标。
(2) 与java相关的方法
-- concat() : 连接字符串
var str1 = "abc";
var str2 = "def";
document.write(str1.concat(str2))；
-- charAt() : 返回指定位置的字符串。
var str3 = "abcdefg";
document.write(str3.charAt(1));//如果超出了下标范围，则返回空字符串。
-- indexOf() : 返回字符串位置，
var str4 = "abcdef";
document.write(str4.indexOf(“ab”));//如果字符串不存在，返回-1
-- split() : 切割字符串，返回数组。
var str5 = "a-b-c-d";
var arr1 = str5.split("-");
document.write(arr1.length);
-- replace() : 替换字符串
传递两个参数：
---第一个是被替换的部分。
---第二个是替换的新串。
var str6 = "abcde";
document.write(str6.replace("a","S"));
-- substr() 和 substring()
substr(start, len); 返回一个从start位置开始， len长的子字符串。
substring(start, end);返回一个从start 到 end 的字字符串（有头无尾，而且两个位置可以交换）。
2、js的Araay对象
**创建数组：（三种方式）
--var arr1 = [1,2,3];
--var arr2 = new Array(3);
--var arr3 = new Array(1,2,3);
--var arr = [];表示创建一个空数组。
**属性： length ： 返回数组的长度
**方法：
--concat() : 数组的连接
var arr1 = [1,2,3]；
var arr2 = [4,5,6];
arr1.concat(arr2);
--join() : 根据指定的字符分割数组（就是将逗号换成指定符号）
var arr = ["a","b","c"];
arr.join("-");
--push() : 向数组末尾添加元素，返回新的数组长度
如果添加的是一个数组，这个时候把数组当成一个整体字符串添加进原来数组。
var arr = ["a","b","c"];
var arr1 = ["oo","qq"];
arr.push("xx");
arr.push(arr1);
--pop() : 表示删除最后一个元素，并且返回这个元素。
var arr =["yi","er","san"];
document.write(arr.pop());
document.erite(arr);
--reverce() : 颠倒数组中的元素顺序
var arr = [1,2,3,4,5,6];
arr.reverce();
document.write(arr);
3、js的Date方法
**在java中获取当前的时间
Date date = new Date();
//格式化
toLocaleString();
**js中获取当前时间
var date = new Date();
//此方法获得的时间格式与我们常用格式不符，需要格式化。
**js中格式化当前时间
toLocaleString();
*** date.toLocaleString();
**js中获取当前年的方法
getFullYear();
*** date.getFullYear();
**js中返回当前月的方法(0~11)
getMonth();
*** date.getMonth();
**js中返回当前星期的方法(0!6)
getDay();
*** date.getDay();
**js中返回当前每月天数的方法
getDate();
*** date.getDate();
**js中放回当前小时的方法(0~23)
getHours();
*** date.getHours();
**js中返回当前分钟的方法(0~50)
getMinutes();
*** date.getMinutes();
**js中返回当前秒的方法(0~59)
getSeconds();
*** date.getSeconds();
**js中返回1970年1月1日到现在的毫秒数（java中使用long类型）
getTime();
*** date.getTime();
4、js的Math对象
**进行数学运算的一个对象。
** 该对象只有静态方法（相当于java中的工具类），使用时直接用对象名使用 ： Math.method();
** 对常用方法进行了解（其他计算方法使用时自行查阅文档）
*** ceil(x); : 向上舍入。
*** floor(x); : 向下舍入。
*** floor(x); :四舍五入。
*** random(x); : 获得一个0-1的伪随机数。
--- 得到0-9的随机数：
Math.random()*10
Math.floor(Math.random()*10);
*** pow(x,y); : 返回x的y次幂的值。
** 一个重要的属性 ： PI ： 圆周率。
5、RegExp
创建方式：
var reg = new RegExp(pattern);
var reg = /^正则规则$/;
规则的写法：
[0-9]
[A-Z]
[a-z]
[A-z]
\d 代表数据
\D 非数字
\w 查找单词字符
\W 查找非单词字符
\s 查找空白字符
\S 查找非空白字符
n+ 出现至少一次
n* 出现0次或多次
n? 出现0次或1次
{5} 出现5
{2,8} 2到8次
方法：
test(str):检索字符串中指定的值。返回 true 或 false
需求：
校验邮箱：
var email = haohao_827@163.com
var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
reg.test(email);
6、js的全局对象函数（Functions）
** 这些方法不属于任何对象，但是又是常用操作的，所以就定义在全局对象中
** 这些方法，使用的时候直接写方法名，不用new。
*** eval() : 执行js代码（如果字符串是一个js代码，使用该方法直接执行
**** var str = "alert('12345');";
eval(str);
*** 对字符进行编码和解码的方法
**** encodeURI（） ： 对字符串进行编码（有81个字符不用编码）（常用）
decodeURI（） ： 对使用encodeURI进行编码的字符串进行解码。
**** encodeURIComponent（） 和 decodeURLComponent（）
escape() 和 unescape()
同样是对字符进行编码解码，但是只有73个字符不用编码。
（使用该方法的原因是为了给汉字进行编码，使得在传输过程中不会出像乱码）
（可以直接对一整个字符串进行编码解码，而自动对需要编码的字符进行编码。）
*** isNaN() : 判断字符串是否为数字（注： 是否不是数字！）
var str = "123";
isNaN(str);
**** 如果是数字，返回 false
**** 如果不是数字，返回 true
*** parseInt() 或者 parseFloat() : 将是数字的字符串转换为数字（两个方法一样的作用）
var str = "1234";
parseInt(str);
*** Number() 和 String() 和 Boolean()
强制转换
7、js方法的重载（面试）
**重载： 两个方法的名称相同，参数不同，我们调用方法的时候通过传入不同参数来选择对应的方法。
** js中不存在重载，
其只会调用最接近调用处的那个方法，
js的方法，会将参数存入到一个数组： arguments中。
** 虽然js中没有重载，但是我们可以通过 arguments来模拟重载的效果。
*** function add(){
var num = arguments.length;
var sum = 0;
for(var i = 0; i<num;i++){
sum =sum +arguments[i];
}
return sum;
}
8、js的bom对象
** bom : broswer object model : 浏览器对象模型
** navigator ：获取客户机的信息（浏览器的信息，比如名字）
-- navigator.appName;
** screen : 获取屏幕的信息（比如宽，高）
-- screen.width;
-- screen.height;
** location : 请求url地址
-- href 属性
*** 获取到请求的url地址。
--- location.href;
*** 设置url地址
--- 页面上安置一个按钮，按钮上绑定一个事件，一点击这个按钮，就跳转到指定页面
--- location.href = "Hello.html";
示例： <input type="button" value="按钮" onclick="href1();" />
---- 鼠标点击事件 onclick="js的方法;"
** history : 请求的url的历史记录
-- 创建三个页面
1、 创建a.html,超链接到 b.html 超链接到 c.html。
2、 在b.html上创建两个按钮，一个前进，一个后退，
3、 在两个按钮上绑定鼠标点击事件： 前进、后退
-- 到访问的上一个页面
history.back();
history.go(-1);
-- 到访问的下一个页面
history.forward();
history.go(1);
** (重)： window对象
***窗口对象
***顶层对象（所有的bom对象都是在window里面的对象属性）
***属性： 只记录常用的，其他的查阅文档
**** opener ： 返回一个创建了该窗口的窗口对象。
***方法：
-- window.alert() : 页面弹出一个提示框。（没有返回值）
--- 可简写： alert();
--- alert("显示的内容");
-- window.confirm() : 确认框
--- var flag = window.confirm("显示内容"); (返回ture，false)
-- prompt() : 输入对话框(样式较差，一般少用)
--- window.prompt("显示的内容","输入框中的默认值"); （返回输入的文本）
-- open() : 打开一个窗口
--- open("打开的新窗口的地址","","窗口的特征：长，高等");
--- 创建一个按钮，点击这个按钮，打开一个新窗口。
window.open("Hello.html","","width=200,height=300");
-- close() : 关闭窗口（浏览器兼容性比较差
--- window.close();
-- 定时器方法：
--- setInterval("js代码",毫秒数)；
---- 表示在毫秒数之后执行，循环执行。
---- window.setInterval("alert('123');",3000);
--- setTimeout("js代码",毫秒数);
---- 表示在毫秒数之后执行，只执行一次。
---- window.setTimeout("alert('abc');",4000);
--- clearInterval() : 清除setInterval设置的定时器（可用按钮演示）
var id1 = setInterval("alert("a");",3000);
clearInterval(id1);
--- clearTimeout() : 清除setTimeout设置的定时器（可以用按钮演示）
var id2 = setTimeout("alert(1);",4000);
clearTimeout(id2);
注意： 在自己的页面使用 window 调用 方法 和 属性 是调用的本页面对象的方法和属性
如果想要在本页面调用其它页面的方法和属性，就要使用 opener 或者其他属性来
获得其他窗口对象。
9、js的dom对象
* dom ： document object model ： 文档对象模型
** 文档： 超文本文档（超文本标记文档） html、xml
** 对象： 提供了属性和方法
** 模型： 使用属性和方法操作超文本标记型文档
*** 可以使用js里面的dom中的对象的属性和方法，对标记型文档进行操作。
*** 想要操作标记型文档，首先需要对标记型文档里面的所有内容封装成对象。
----将html里面的标签、属性、文本内容都封装成对象
*** 要对标记型文档进行操作，就要解析标记型文档：
**** 解析过程：
根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象。
---- document 对象： 整个html文档
---- element 对象 ： 标签对象
---- 属性对象（依赖于 element对象）
---- 文本对象（依赖于 element对象）
***** Node 节点对象 ： 是上述解析产生的对象的父对象
---- 如果在document/element等对象中找不到想要的方法，那么就到Node对象中寻找。
** DOM模型有三种：
DOM level 1 ： 将html文档封装成对象
DOM level 2 ： 在level1中添加了一些新功能，例如：对于事件的恶和css样式的支持。
DOM level 3 ： 支持xml1.0的一些新特性。
* DHTML： 不是一种语言，是很多技术的简称
** html ：封装数据。
** css ：使用属性和属性值设置样式。
** dom ：操作html文档（标记型文档）。
** javascript ： 专门指的是js的语法语句。
10、document对象
* 表示整个的文档
** 常用方法
*** write() 方法：
（1）向页面输出变量（值）
（2）向页面输出html代码。
-- var str = "abc";
document.write(str);
docuemnt.write("<hr/>");
*** getElementById() 方法：(返回拥有指定id的第一个对象的引用)
--通过id获得元素（标签）对象
如：使用getElementById获得input标签
var input1 = document.getElementById("idName");
传递的参数是 input里面的id的值。
得到input里面的value值
input1.name;(标签对象.属性名称)
向input里面设置一个value值
input1.value = "aaaa";
*** getElementsByName();
-- 通过标签的name属性值得到标签
-- 返回一个集合（数组）
示例：
var inputs = document.getElementsByName("name1");
for(var i=0;i<inputs.length;i++){
var input1 = inputs[i];
alert(input1);
}
*** getElementsByTagName("标签名称");
-- 通过标签的名称得到元素
-- 返回的也是一个集合（数组）
示例：
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var input1 = inputs[i];
alert(input1);
}
*** 注意： 当 使用 getElementsByName 或者 getElementsByTagName获得的数组中只有一个元素时，
我们可以不使用遍历，而是使用下标直接来获取该标签对象。
*** hasChildNodes() 该方法用来检查一个元素是否有子节点，返回值是 true 或 false
*** replaceChild()把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
*** getAttribute() 返回一个给定元素的一个给定属性节点的值
var attributeValue = element.getAttribute("attributeName");
*** getAttributeNode("属性的名称")--Node 返回的是一个属性节点对象
*** setAttribute()将给定元素节点添加一个新的属性值或改变它的现有属性的值。
element.setAttribute("attributeName","attributeValue");
*** createElement()按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.
var reference = document.createElement("标签名");
*** createTextNode()创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。
var textNode = document.createTextNode("text");
*** appendChild()为给定元素增加一个子节点：
var newreference = element.appendChild(newChild).
*** insertBefore()把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
*** removeChild()从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
*** ChildNodes：返回一个数组，这个数组由给定元素节点的子节点构成：
var nodeList = node.childNodes;
*** firstChild：该属性返回一个给定元素节点的第一个子节点，返回这个节点对象的指针。
var reference = node.firstChild;
*** lastChild：对应 firstChild 的一个属性。
*** nextSibling: 返回一个给定节点的下一个兄弟节点。
*** previousSibling：返回一个给定节点的上一个兄弟节点
*** parentNode：返回一个给定节点的父节点。
*** innerHTML： 属性，innerHTML 属性可以用来读，写某给定元素里的 HTML 内容。
*** nodeName: 如果节点是元素节点，返回这个元素的名称，如果是属性节点，返回这个属性的名称
如果是文本节点，返回一个内容为#text 的字符串
var name = node.nodeName;
*** nodeType：返回一个整数，这个数值代表着给定节点的类型
1 为元素节点， 2 属性节点， 3 为文本节点。
*** nodeValue：返回给定节点的当前值： 文本返回内容。 属性返回值。 元素返回null
11、js的事件
事件
事件源
响应行为
1、js的常用事件
onclick:点击事件
onchange:域内容被改变的事件
需求：实现二级联动
<select id="city">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="sh">上海</option>
</select>
<select id="area">
<option>海淀</option>
<option>朝阳</option>
<option>东城</option>
</select>
<script type="text/javascript">
var select = document.getElementById("city");
select.onchange = function(){
var optionVal = select.value;
switch(optionVal){
case 'bj':
var area = document.getElementById("area");
area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
break;
case 'tj':
var area = document.getElementById("area");
area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
break;
case 'sh':
var area = document.getElementById("area");
area.innerHTML = "<option>浦东</option><option>杨浦</option>";
break;
default:
alert("error");
}
};
</script>
onfoucus:获得焦点的事件
onblur:失去焦点的事件
需求： 当输入框获得焦点的时候，提示输入的内容格式
当输入框失去焦点的时候，提示输入有误
<label for="txt">name</label>
<input id="txt" type="text" /><span id="action"></span>
<script type="text/javascript">
var txt = document.getElementById("txt");
txt.onfocus = function(){
//友好提示
var span = document.getElementById("action");
span.innerHTML = "用户名格式最小8位";
span.style.color = "green";
};
txt.onblur = function(){
//错误提示
var span = document.getElementById("action");
span.innerHTML = "对不起 格式不正确";
span.style.color = "red";
};
</script>
onmouseover:鼠标悬浮的事件
onmouseout:鼠标离开的事件
需求：div元素 鼠标移入变为绿色 移出恢复原色
#d1{background-color: red;width:200px;height: 200px;}
<div id="d1"></div>
<script type="text/javascript">
var div = document.getElementById("d1");
div.onmouseover = function(){
this.style.backgroundColor = "green";
};
div.onmouseout = function(){
this.style.backgroundColor = "red";
};
</script>
onload:加载完毕的事件
等到页面加载完毕在执行onload事件所指向的函数
<span id="span"></span>
<script type="text/javascript">
window.onload = function(){
var span = document.getElementById("span");
alert(span);
span.innerHTML = "hello js";
};
</script>
2、事件的绑定方式
(1)将事件和响应行为都内嵌到html标签中
<input type="button" value="button" onclick="alert('xxx')"/>
(2)将事件内嵌到html中而响应行为用函数进行封装
<input type="button" value="button" onclick="fn()" />
<script type="text/javascript">
function fn(){
alert("yyy");
}
</script>
(3)将事件和响应行为 与html标签完全分离
<input id="btn" type="button" value="button"/>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("zzz");
};
</script>
****this关键字
this经过事件的函数进行传递的是html标签对象
<input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
<script type="text/javascript">
function fn(obj){
alert(obj.name);
}
</script>
3、阻止事件的默认行为
IE：window.event.returnValue = false;
W3c: 传递过来的事件对象.preventDefault();
//ie：window.event.returnValue = false;
//W3c：传递过来的事件对象.preventDefault();
//W3c标准
if(e&&e.preventDefault){
alert("w3c");
e.preventDefault();
//IE标签
}else{
alert("ie");
window.event.returnValue = false;
}
//通过事件返回false也可以阻止事件的默认行为
<a href="demo11.html" onclick="return false">点击我吧</a>
4、阻止事件的传播
IE：window.event.cancelBubble = true;
W3c: 传递过来的事件对象.stopPropagation();
if(e&&e.stopPropagation){
alert("w3c");
e.stopPropagation();
//IE标签
}else{
alert("ie");
window.event.cancelBubble = true;
}
