javascript (2)

这里记录下一些js容易忘的知识

1、乘方和开根号

Math.pow(a,b)      →        a的b次方
Math.sqrt(a)          →       a开方

2、用户输入

prompt就是专门用来弹出能够让用户输入的对话框的，但必须要用一个变量来接受用户输入的值
例：

[javascript]  view plain  copy

1. var a = prompt("请输入内容")  

结果：

3、document.write() 文档打印输出，直接在文档中显示

注意：不是window.write()

4、隐藏样式的三种方法

display:none;         visibility:hidden;       overflow:hidden;
区别：第一种和第二种的区别在于第一种隐藏不占位置，第二种隐藏仍占有位置，第三种则是隐藏超出盒子的部分内容

5、判断用户输入事件（当用户输入内容时触发）

正常浏览器支持：oninput
IE678支持的：onpropertychange

6、两个小循环：while(退出条件){语句} 和 do{语句} while(退出条件) 的区别

区别：后者是至少执行一次而前者则不一定

7、各节点的相互关系

父节点 ： parentNode  亲父亲

兄弟节点：nextSibling（ie678认识）    nextElementSibling（其他浏览器认识的）      下一个兄弟节点
                 previousSibling（ie678认识）   previousElementSibling（其他浏览器认识的）    上一个兄弟节点
兼容写法：obj.nextElementSibling || obj.nextSibling     
需要注意的是必须要先写正常浏览器后写ie678

子节点：firstChild（ie678）     firstElementChild（正常浏览器）        第一个孩子节点
              lastChild（ie678）     lastElementChild（正常浏览器）        最后一个孩子节点
兼容写法：同上 

孩子节点：childNodes（官方） 选出制定元素的全部孩子节点，包括HTML节点、属性节点、文本节点
                火狐、谷歌等高级浏览器会把换行也看做是子节点
一般情况下我们可以通过nodeType来判断具体是什么节点，nodeType = 1 元素节点，nodeType = 2 属性节点，nodeType = 3 文本节点
               children  选出所有的孩子，只有元素节点，但是ie678会将注释节点也算为节点

8、arguments对象

arguments是存储了函数传递过来的实参，JavaScript在创建函数时，会在函数内部创建一个arguments对象实例，arguments对象只有函数开始时才可用，访问单个参数的方式与访问数组元素的方式相同
  例：

[javascript]  view plain  copy

1. function fn(a,b){  
2.        if(fn.length == arguments.length){  
3.            console.log(a+b);  
4.        }else{  
5.            console.error("对不起，您的参数不匹配，正确的参数个数为'+ fn.length + '")  
6.        }  
7.    }  
8.    fn(1,2);  
9.    fn(1,2,3);  

结果：

arguments.callee 返回的是正在执行的函数，在函数体内使用。在函数递归调用时推荐使用arguments.callee代替函数名本身

9、++前置和++后置

a++： 每次自加1，是先运算后自加
++a： 每次自加1，是先自加后运算
例：

[javascript]  view plain  copy

1. var a = 10,b = 20,c = 30;  
2.     ++a;  
3.     a++;  
4.     c = ++a+(++b)+(c++)+a++;  
5.     console.log(c)   //  77  

10、isNaN（a）判断a是不是数字

[javascript]  view plain  copy

1. console.log（isNaN（"12"））   //  true  

11、按钮不可用(disabled属性)

disabled = “disabled”或 disabled = true

12、转换为字符串类型的方法

String(转换目标）

转换目标.toString(基数)，基数用于指定转化为几进制

13、获取相应位置的字符的方法：charAt(字符位置)  返回的是字符串

例：
    

[javascript]  view plain  copy

1. var txt = "abcdefg";  
2. console.log(txt.charAt(5))  // f  

14、获取字符串位置的方法：indexOf("字符")  返回的是数值

indexOf()        返回前面起第一个字符的位置
lastIndexOf()       返回后面起第一个字符的位置(仍是从左边开始数)
例：

[javascript]  view plain  copy

1. var txt = "abcdefgfh";  
2. console.log(txt.indexOf(“f”))  // 5  
3. console.log(txt.lastIndexOf(“f”))  // 7  

15、网址编码

encodeURIComponent()       函数可把字符串作为URI组件进行编码
decodeURIComponent()       函数可把字符串作为URI组件进行解码

16、slice()和substr()

两者都是用来截取字符串的
slice（“起始位置”[结束位置]）      但不包括结束位置,起始位置可以是负数，如果为负数，则是从右往左开始取
substr(起始位置，[取的个数])          substr(-1) ie678会报错
两者区别：substr(0始终会把小的值作为起始位置，大的值作为结束位置，例如：substr(6,3)会自动变为substr(3,6)
                           

17、js常用的访问css属性的方法

点语法：box.style.attribute          获得的属性带有单位，且不可以给属性传递参数

利用[]访问：box.style[attribute]       获得的属性不带单位，可以给属性传递参数

以上两个只能获得行内的样式，但是我们想要获取内嵌或外链式的样式该怎么办？

可以用： obj.currentStyle (ie 和 opera常用)     window.getComputedStyle("元素","伪类") （w3c常用，两个参数是必须的没有伪类用null代替）  
注意：获得的值带有单位
兼容写法：

[javascript]  view plain  copy

1. function getStyle(obj,attr){  
2.        if(obj.currentStyle){  
3.            return obj.currentStyle[attr];  
4.        }  
5.        else{  
6.            return window.getComputedStyle(obj,null)[attr];  
7.        }  
8.    }  

18、in运算符

in运算符也是一个二元运算符，但是对运算符左右两边的操作数要求比较严格。in运算符要求第一个（左边的）操作数必须是字符串类型或者是可以转化为字符串类型的其他类型，而第二个（右边的）操作数必须是数组或对象，只有第一个操作数是第二个操作数的属性名，才会返回true,否则则返回false

19、判断是不是怪异模式的浏览器

[javascript]  view plain  copy

1. document.compatMode === "CSS1Compat"    //  CSS1Compat代表已经声明，非怪异模式  
2.   
3. document.compatMode === "BackCompat"    //  BackCompat代表未声明，是怪异模式  

20、防止鼠标拖动选择文字

清除选种的内容：

[javascript]  view plain  copy

1. window.getSelection ? window.getSelection().removeAllRanges() : document.selsection.empty();  

21、阻止冒泡的兼容写法

[javascript]  view plain  copy

1. if (event && event.stopPropagation){  
2.        event.stopPropagation()    //w3c标准  
3.    }  
4.     else{  
5.        event.cancelBubble = true;   // IE浏览器  
6.    }  

22、判断当前选择对象的兼容写法

火狐、谷歌等高级浏览器：   event.target.id

IE浏览器：    event.srcElement.id

兼容写法： 

[javascript]  view plain  copy

1. var targetId = event.target ? event.target.id : event.srcElement.id  

可以利用这个做点击除模态框自己外的空白处隐藏模态框，其原理就是当点击对象的targetId不为模态自身的id时都隐藏盒子

23、获得用户鼠标选择的内容

标准浏览器：      window.getSelection()
IE浏览器：         document.selection.createRange().text;
兼容写法：

[javascript]  view plain  copy

1. if (window.getSelection){  
2.       var txt = window.getSelection().toString();   //转为字符串  
3.    }  
4.     else{  
5.        var txt = document.selection.createRange().text;    
6.    }