首先推荐一个小插件:W3Cfuns前端开发工具箱
整理一些杂乱的知识点。
1,Dom用于操作html元素
2,window.location.reload();//刷新当前页**********
3,取消默认事件 :return false; 举例:防止复制
document.body.oncopy=function(){
alert(‘谁让你复制的 交钱了吗’);
return false;
}
4,clipboardData.getData(‘text‘)//获取粘贴板内容,text是表示文本格式
5,GetelementById
GetElementsByName
var inputs=document.getElementsByTagName(‘input‘);//获得页面中的标签
6,小记忆方式:在html中属性和值一模一样的,在js中一般要用true或者false改变这个值
7,请仔细阅读协议代码
<script type="text/javascript">
onload=function() {
var btnobj = document.getElementById(‘btn‘);
var i = 5;
var setId= setInterval(function () {
i--;
if (i <= 0) {
clearInterval(setId);//清除计时器
btnobj.value = ‘同意‘;
btnobj.disabled = false;//启用按钮
} else {
btnobj.value = ‘请仔细阅读(‘ + i + ‘)‘;
}
}, 1000);
}
</script>
8,把span变成块级元素 display:block;才可以有宽和高显示出来。
9,动态创建元素var btnObj= document.createElement(‘input‘);
btnObj.type=‘button‘;
重点:创建元素后要添加到想要其所在的父级元素中
添加到dv元素中时: document.getElementById(‘dv‘).appendChild(‘btnobj‘);
添加到body时: document.body.appendChild(‘btnObj‘);
10,把新元素添加到层中第一个元素之前示例:dvobj.insertBefore(‘btnObj‘,‘dvObj.firstChild‘);
11,删除所有元素:
while(dvObj.firstChild){
dvobj.removeChild(dvObj.firstChild);
}
12,innterText和textContent兼容的写法:
if(document.getElementById(‘dv‘).innerText==‘string‘){
IE写法
cocument.getElementById.innerText=‘‘;
}else{
火狐写法
document.getElementById.textContent=‘‘;
}
13,添加class样式 document.gelElementById(‘dv‘).className=‘class‘;
14,js设置浮动元素兼容写法 要用stylefloat(IE) 和 cssfloat(火狐):
if(typeof(dvObj.style.styleFloat)==‘string‘){
dvObj.style.styleFloat=‘right‘;
}else{
dvObj.style.cssFloat==‘right‘;
}
15,CSS:cursor控制鼠标样式的 cursor:pointer小手
16,*****层的显示和隐藏 最好把层的display样式用内嵌的方式写style。******把层
的display用内联的方式定义style,那么第一次点击按钮是不能获取css属性的
17,防止重复创建同一个元素
if(document.getElementById(‘dv‘)){
document.body.removeChild(document.getElementById(‘dv‘));
}
18,this.offsetLeft+‘px‘;
19,position :fixed相对于窗口固定定位
20,
var reg = new RegExp(/\d+/);//正则表达式对象 \d数字 \d+一次到多
次
var reg = /\d{5}/g;//全局搜索模式g
21,
搜索框代码示例:
onload = function() {
document.getElementById(‘txt‘).onfocus = function() {
if (this.value == ‘请输入搜索关键词‘ &&
this.style.color == ‘gray‘) {
this.value = ‘‘;
this.style.color = ‘black‘;
}
};
document.getElementById(‘txt‘).onblur = function() {
if (this.value == ‘‘) {
this.value = ‘请输入搜索关键词‘;
this.style.color = ‘gray‘;
}
};
};
22,
回车实现tab跳转
键替换*************
var txts=document.getElementsByName(‘input‘);
for(var i=0;i<txts.length;i++){
if(txt[i].type==‘text‘)
{
txts[i].onkeydown=function(){ //键盘按下事件
if(window.event.keyCode==13){
window.event.keyCode=9;
}
}
}
}