这里记录下一些js容易忘的知识
1、乘方和开根号
Math.pow(a,b) → a的b次方Math.sqrt(a) → a开方
2、用户输入
prompt就是专门用来弹出能够让用户输入的对话框的,但必须要用一个变量来接受用户输入的值例:
var a = prompt("请输入内容")
结果:
3、document.write() 文档打印输出,直接在文档中显示
注意:不是window.write()
4、隐藏样式的三种方法
display:none; visibility:hidden; overflow:hidden;区别:第一种和第二种的区别在于第一种隐藏不占位置,第二种隐藏仍占有位置,第三种则是隐藏超出盒子的部分内容
5、判断用户输入事件(当用户输入内容时触发)
正常浏览器支持:oninputIE678支持的: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对象只有函数开始时才可用,访问单个参数的方式与访问数组元素的方式相同例:
function fn(a,b){
if(fn.length == arguments.length){
console.log(a+b);
}else{
console.error("对不起,您的参数不匹配,正确的参数个数为'+ fn.length + '")
}
}
fn(1,2);
fn(1,2,3);
结果:
arguments.callee 返回的是正在执行的函数,在函数体内使用。在函数递归调用时推荐使用arguments.callee代替函数名本身
9、++前置和++后置
a++: 每次自加1,是先运算后自加++a: 每次自加1,是先自加后运算
例:
var a = 10,b = 20,c = 30;
++a;
a++;
c = ++a+(++b)+(c++)+a++;
console.log(c) // 77
10、isNaN(a)判断a是不是数字
console.log(isNaN("12")) // true
11、按钮不可用(disabled属性)
disabled = “disabled”或 disabled = true12、转换为字符串类型的方法
String(转换目标)转换目标.toString(基数),基数用于指定转化为几进制
13、获取相应位置的字符的方法:charAt(字符位置) 返回的是字符串
例:var txt = "abcdefg";
console.log(txt.charAt(5)) // f
14、获取字符串位置的方法:indexOf("字符") 返回的是数值
indexOf() 返回前面起第一个字符的位置lastIndexOf() 返回后面起第一个字符的位置(仍是从左边开始数)
例:
var txt = "abcdefgfh";
console.log(txt.indexOf(“f”)) // 5
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代替)
注意:获得的值带有单位
兼容写法:
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return window.getComputedStyle(obj,null)[attr];
}
}
18、in运算符
in运算符也是一个二元运算符,但是对运算符左右两边的操作数要求比较严格。in运算符要求第一个(左边的)操作数必须是字符串类型或者是可以转化为字符串类型的其他类型,而第二个(右边的)操作数必须是数组或对象,只有第一个操作数是第二个操作数的属性名,才会返回true,否则则返回false19、判断是不是怪异模式的浏览器
document.compatMode === "CSS1Compat" // CSS1Compat代表已经声明,非怪异模式
document.compatMode === "BackCompat" // BackCompat代表未声明,是怪异模式
20、防止鼠标拖动选择文字
清除选种的内容:window.getSelection ? window.getSelection().removeAllRanges() : document.selsection.empty();
21、阻止冒泡的兼容写法
if (event && event.stopPropagation){
event.stopPropagation() //w3c标准
}
else{
event.cancelBubble = true; // IE浏览器
}
22、判断当前选择对象的兼容写法
火狐、谷歌等高级浏览器: event.target.idIE浏览器: event.srcElement.id
兼容写法:
var targetId = event.target ? event.target.id : event.srcElement.id
可以利用这个做点击除模态框自己外的空白处隐藏模态框,其原理就是当点击对象的targetId不为模态自身的id时都隐藏盒子
23、获得用户鼠标选择的内容
标准浏览器: window.getSelection()IE浏览器: document.selection.createRange().text;
兼容写法:
if (window.getSelection){
var txt = window.getSelection().toString(); //转为字符串
}
else{
var txt = document.selection.createRange().text;
}