Javascript笔记

最新推荐文章于 2024-07-30 10:56:44 发布

安happy

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量727

点赞数

分类专栏： javascript 文章标签： javascript js

本文链接：https://blog.csdn.net/u013254241/article/details/26589383

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript

<1>.JS基础

//style="cursor: pointer;"设置鼠标的形状

1.任何标签都可以加ID，包括link

2.任何标签的任何属性，也都可以修改

3.HTML里怎么写，JS里就怎么写 (除了以下的className)

Eg:

<html>

<head>

<title>无标题文档</title>

<style>

#div1 {width:100px; height:100px;border:1px solid black;}

.box {background:red;}

</style>

function toRed()

{

varoDiv=document.getElementById('div1');

oDiv.className='box';

}

</script>

</head>

<body>

</div>

</body>

</html>

4.为a链接添加JS

<a href=“javascript:;”></a> 以防页面刷新

5.两种操作属性的方法

<html>

<head>

<title>无标题文档</title>

function setText(name)

{

varoTxt=document['getElementById']('txt1');

//第一种操作属性的方法

//oTxt.value='dsfasdfasdf';

//第二种操作属性的方法

oTxt[name]='dsfasdfasdf';

}

function setStyle(name, value)

{

varoDiv=document.getElementById('div1');

oDiv.style[name]=value;

}

</script>

</head>

<body>

</body>

</html>

6.样式的优先级

*<标签<class<ID<行间样式

以下例子，你会发现先点“变红”按钮，再点”变绿“按钮，显示正常；但若先点”变绿“按钮，再点”变红“按钮，其div的颜色不能再变红。这是因为行间样式的优先级大于class.

<html>

<head>

<title>无标题文档</title>

<style>

#div1 {width:200px; height:200px;border:1px solid black;}

.box {background:red;}

</style>

function toRed()

{

varoDiv=document.getElementById('div1');

oDiv.className='box';//这属于class

}

function toGreen()

{

varoDiv=document.getElementById('div1');

oDiv.style.background='green';//这属于行间样式

}

</script>

</head>

<body>

<inputtype="button" value="变绿" οnclick="toGreen()" />

</body>

</html>

建议：style与className别相互使用，设置其属性时使用其中一种方式

7.用window.onload提取行间样式事件

<html>

<head>

<title>无标题文档</title>

varoBtn=document.getElementById('btn1');

oBtn.οnclick=function() //匿名函数

{

alert('a');

};

</script>

</head>

<body>

</body>

</html>

以上代码会有错，这是因为HTML加载是从上往下依次运行，若遇到错误，即停止解析，以上代码运行到“varoBtn=document.getElementById('btn1');“会有错，因为此时没有btn1这个对象。将脚本放到按钮后，就不会有错。也可通过window.onload来解决。如下：

<html>

<head>

<title>无标题文档</title>

window.οnlοad=function () //本页全加载完后，再运行此语句

{

varoBtn=document.getElementById('btn1');

oBtn.οnclick=function()

{

alert('a');

};

</script>

</head>

<body>

</body>

</html>

8.行为、样式、结构三者分离

也就是js、css不能写在行间样式里

9.this的使用，以及自定义属性（案例是选项卡）

window.οnlοad=function ()

{

varoDiv=document.getElementById('div1');

varaBtn=oDiv.getElementsByTagName('input');

varaDiv=oDiv.getElementsByTagName('div');

for(vari=0;i<aBtn.length;i++)

{

aBtn[i].index=i;//input标签没有index属性，这是自定义的

aBtn[i].οnclick=function()

{

for(vari=0;i<aBtn.length;i++)

{

aBtn[i].className='';

aDiv[i].style.display='none';

}

this.className='active';//this表当前选择的按钮对象

//alert(this.index);

aDiv[this.index].style.display='block';

};

}

};

</script>

10.”==”与”===”的区别

“==”:先转换为同一个类型，再比较；“===”：不转换类型，直接比较。

11.Json与数组的区别

Json是以键值-键名对的形式存放数据，它没length属性,Eg:var json={a:12,b:13}; json.a的值就是12，并且json.a还可重新赋值。它通过for(var i in json){ alert(json[i]);}来实现循环遍历。

12.arguments用来保存传进来的参数，它是个数组

function sum()

{

var result=0;

for(var i=0;i<arguments.length;i++)

{

result+=arguments[i];

}

return result;

}

alert(sum(12, 6, 8, 6, 8, 6)；

13.使用同一个方法处理不同的操作

function css(obj, name, value)

{

if(arguments.length==2) //获取行间样式的值

{

returnobj.style[name];

}

else

{

obj.style[name]=value;//设置该行间样式的值

}

window.οnlοad=function ()

{

varoDiv=document.getElementById('div1');

alert(css(oDiv,'width')); //获取行间样式的值

//css(oDiv,'background', 'green'); //设置该行间样式的值

};

</script>

14.获取非行间样式的值

<!DOCTYPE HTML>

<html>

<head>

<title>无标题文档</title>

<style>

#div1 {width:200px; height:200px;background:red;}

</style>

window.οnlοad=function ()

{

varoDiv=document.getElementById('div1');

If(oDiv.currentStyle)

{

//currentStyle是IE的专有属性，即只能在IE浏览请中使用

alert(oDiv.currentStyle.width);//注意：其属性只能为单一属性，像background这种复合属性不识别，而background-color就可以

}

else

{

// getComputedStyle(oDiv,false)在火狐、谷歌中使用，其第二个参数随你写，无意义

alert(getComputedStyle(oDiv,false).width);

}

};

</script>

</head>

<body>

</div>

</body>

</html>

15.数组

(1）.length既可以获取，又可以设置。例子：快速清空数组

(2)添加

push(元素)，从尾部添加

unshift(元素)，从头部添加

(3) 删除

pop()，从尾部弹出

shift()，从头部弹出

(4) splice

vararr=[1,2,3,4,5,6];

//删除：splice(起点, 长度)

//arr.splice(2,3);

//插入：splice(起点, 长度, 元素...);

//arr.splice(2, 0,'a', 'b', 'c');

arr.splice(2, 2,'a', 'b');//先删两个元素，再插入两个元素，也就是实现了替换

alert(arr);

</script>

（5）.sort

var arr=[12, 8, 99, 19, 112];//注意：这里的arr.sort()会像字符排序一样

arr.sort(function (n1, n2){//按数字大小排序

return n1-n2;

/*if(n1<n2)

{

return -1;//这里的值只要是负数就行

}

else if(n1>n2)

{

return 1; //这里的值只要是正数就行

}

else

{

return 0;

}*/

});

alert(arr);

</script>

（6） join

var arr=[1,2,3,4];

alert(arr.join('- -p'));//显示结果“1- -p2- -p3- -p4”

</script>

<2>深入

1. 定时器的运用

<html>

<head>

<title>无标题文档</title>

window.οnlοad=function ()

{

varoBtn1=document.getElementById('btn1');

varoBtn2=document.getElementById('btn2');

vartimer=null;

oBtn1.οnclick=function()

{

timer=setInterval(function(){//setTimeout与其使用一样，它是间隔的

alert('a');//setInterval是连续的

},1000);

};

oBtn2.οnclick=function()

{

clearInterval(timer);

};

</script>

</head>

<body>

<inputid="btn2" type="button" value="关闭" />

</body>

</html>

2. 字符串的兼容

Var str=”adck”;str[0]的兼容性不好，在IE9中不能识别。所以改为str.charAt(0),它全兼容。

DOM

1. 浏览器的支持

IE：支持DOM 10%左右(IE9基本都支持)；Chrome:支持60%； fireFox:99%

2. DOM节点

1>.childNodes , nodeType ，children

<html>

<head>

<title>无标题文档</title>

window.οnlοad=function ()

{

varoUl=document.getElementById('ul1');

//IE6-8

alert(oUl.childNodes.length);//在IE9下其结果为5，在IE6-8下其结果为2；

for(vari=0;i<oUl.childNodes.length;i++)

{

//nodeType==3 -> 文本节点

//nodeType==1 -> 元素节点

//alert(oUl.childNodes[i].nodeType);

if(oUl.childNodes[i].nodeType==1)

{

oUl.childNodes[i].style.background='red';

}

// alert(oUl.children.length);//在任何浏览器下其结果都为2；

};

</script>

</head>

<body>

<ul id="ul1"> 文本节点1

<li>元素节点2</li> 文本节点3

<li>元素节点4</li> 文本节点5

</ul>

fafafsdfasd 文本节点

<span>qwerqwre 元素节点</span>

</body>

</html>

注意：childNodes在IE9下是包括文本节点，而在IE6-8中不包括文本节点;文本节点的nodeType的值为3，元素节点的nodeType值为1;children在任何浏览器下都不算文本节点的个数，只算元素节点。

2>. parentNode

window.οnlοad=function ()

{

varaA=document.getElementsByTagName('a');

for(vari=0;i<aA.length;i++)

{

aA[i].οnclick=function()

{

this.parentNode.style.display='none';

};

}

};

</script>

</head>

<body>

<li>dfasdf <ahref="javascript:;">隐藏</a></li>

<li>fghfgcvn <ahref="javascript:;">隐藏</a></li>

<li>vcbxcvbc <ahref="javascript:;">隐藏</a></li>

</ul>

</body>

3>offsetParent 用来获取一个元素用来定位的那个父级。

css中的绝对定位元素是根据有定位的父级来定位的，若直接的父级没定位，就往上找。

？？Js第二定律

4>.首尾子节点（有兼容性问题）（firstChild、firstElementChild; lastChild、lastElementChild）

window.οnlοad=function ()

{

varoUl=document.getElementById('ul1');

//IE6-8

//oUl.firstChild.style.background='red'; //firstChild只有在IE6-8浏览器中有效

//高级浏览器

//oUl.firstElementChild.style.background='red'; //firstElementChild在IE9中有效

if(oUl.firstElementChild)

{

oUl.firstElementChild.style.background='red';

}

else

{

oUl.firstChild.style.background='red';

}

};

</script>

</head>

<body>

<li>1</li> //其结果这里应该为红色

</ul>

</body>

注意：lastChild、lastElement;nextSibling、nextElementSibling(下一个兄弟节点)；previousSibling、previousElementSibling(上一个兄弟节点)这几组与firstChild同样处理兼容性问题。

3. DOM方式操纵元素属性

获取：getAttribute(名称) 设置：setAttribute(名称，值)

删除：removeAttribute(名称)

window.οnlοad=function ()

{

varoTxt=document.getElementById('txt1');

varoBtn=document.getElementById('btn1');

oBtn.οnclick=function ()

{

//oTxt.value='asdfasd';

//oTxt['value']='xczcvb';

oTxt.setAttribute('value', 'erwertwert');

};

</script>

</head>

<body>

</body>

4. 用className选择元素

function getByClass(oParent, sClass)//获取oParent节点下，class等于sClass的元素节点数组

{

var aResult=[];

var aEle=oParent.getElementsByTagName('*');//获取该节点下的所有元素节点

for(vari=0;i<aEle.length;i++)

{

if(aEle[i].className==sClass)

{

aResult.push(aEle[i]);

}

return aResult;

}

window.οnlοad=function ()

{

var oUl=document.getElementById('ul1');

var aBox=getByClass(oUl,'box');

for(vari=0;i<aBox.length;i++)

{

aBox[i].style.background='red';

}

};

</script>

</head>

<body>

<liclass="box"></li>//背景为红色

<liclass="box"></li>//背景为红色

</ul>

</body>

5. 创建、插入和删除DOM元素

a) 创建DOM元素

i. createElement(标签名) 创建一个节点

ii. appendChild(节点) 先把元素从原有的父级上删掉，再添加到新的父级上（追加一个节点）

1. 例子：为ul插入li

b) 插入元素

i. insertBefore(节点, 原有节点) 在已有元素前插入

1. 例子：倒序插入li

c) 删除DOM元素

i. removeChild(节点) 删除一个节点

1. 例子：删除li

window.οnlοad=function ()

{

var oBtn=document.getElementById('btn1');

var oUl=document.getElementById('ul1');

var oTxt=document.getElementById('txt1');

oBtn.οnclick=function()

{

var oLi=document.createElement('li'); //创建一个新的li元素

var aLi=oUl.getElementsByTagName('li');

oLi.innerHTML=oTxt.value;

//父级.appendChild(子节点);

//oUl.appendChild(oLi); //顺序插

if(aLi.length>0) //为了解决兼容性问题

{

oUl.insertBefore(oLi, aLi[0]); //倒序插，注意：aLi[0]在没有任何li的前提下，IE会报错，而谷歌不会。

}

else

{

oUl.appendChild(oLi);

}

};

</script>

</head>

<body>

</ul>

</body>

6. 文档碎片

文档碎片在谷歌、IE9高级浏览器中不能提高性能，反而有降低的趋势，但在低级浏览器中能有点提高。

window.οnlοad=function ()

{

var oUl=document.getElementById('ul1');

var oFrag=document.createDocumentFragment();

for(vari=0;i<10000;i++)

{

var oLi=document.createElement('li');

oFrag.appendChild(oLi);

}

oUl.appendChild(oFrag);

};

</script>

</head>

<body>

</ul>

</body>

7. 表格应用

使用tBodies、tHead、tFoot、rows、cells获取数据，以下实现表格的隔行变色，删除、添加表格的效果：

function changeBgd(){//实现隔行变色

var oTab=document.getElementById("tab1");

var aTr=oTab.tBodies[0].rows;

for(vari=0;i<aTr.length;i++){

if(i%2==0){

aTr[i].style.background="grey";

}

function cleBgd(){//清空原背景色

var oTab=document.getElementById("tab1");

var aTr=oTab.tBodies[0].rows;

for(vari=0;i<aTr.length;i++){

if(i%2==0){

aTr[i].style.background="";

}

window.οnlοad=function(){

var oTab=document.getElementById("tab1");

var n=oTab.tBodies[0].rows.length;

changeBgd();

var oBtn=document.getElementById("add");

var oName=document.getElementById("name");

var oAge=document.getElementById("age");

oBtn.οnclick=function(){ //添加一行

cleBgd();

var oTr=document.createElement("tr");

varoTd=document.createElement("td");

oTd.innerHTML=++n;

oTr.appendChild(oTd);

varoTd=document.createElement("td");

oTd.innerHTML=oName.value;

oTr.appendChild(oTd);

varoTd=document.createElement("td");

oTd.innerHTML=oAge.value;

oTr.appendChild(oTd);

varoTd=document.createElement("td");

oTd.innerHTML='<ahref="javascript:;"> 删除 </a>';

oTr.appendChild(oTd);

// 删除一行

oTd.getElementsByTagName('a')[0].οnclick=function(){

cleBgd();

oTab.tBodies[0].removeChild(this.parentNode.parentNode);

changeBgd();

}

oTab.tBodies[0].appendChild(oTr);

changeBgd();

}

</script>

</head>

<body>

姓名：<input id="name"type="text" />

年龄：<input id="age"type="text" />

<thead>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

toLowerCase()对字符串进行大小写转换，search(‘ ‘)进行模糊查询，split().

Js运动基础

1. offsetLeft:获得当前的左像素点；

filter:alpha(opacity:30);这是IE浏览器设置透明度。

Opacity:0.3; 这是谷歌、火狐浏览器设置透明度。

2.Math.ceil(4.31)=5;这是向上取整； Math.floor(4.31)=4 这是向下取整。

3．右侧悬浮栏

<style>

#div1{width:100px; height:150px; background:red; position:absolute; right:0;bottom:0;}

</style>

window.οnscrοll=function()

{

var oDiv=document.getElementById('div1');

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

//oDiv.style.top=document.documentElement.clientHeight-//oDiv.offsetHeight+scrollTop+'px';

startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);

};

var timer=null;

function startMove(iTarget)

{

var oDiv=document.getElementById('div1');

clearInterval(timer);

timer=setInterval(function(){

var speed=(iTarget-oDiv.offsetTop)/4;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(oDiv.offsetTop==iTarget)

{

clearInterval(timer);

}

else

{

oDiv.style.top=oDiv.offsetTop+speed+'px';

}

}, 30);

}

</script>

</head>

<bodystyle="height:2000px;">

<divid="div1"></div>

</body>

4. offset的bug

if(div1{width:200px; border:1px;}) then div1.offsetWidth=202;

if(div2{width:200px; border:1px; padding:10px;}) then div1.offsetWidth=222;

<style>

#div1 {width:200px; height:200px;background:red;border:1px solid black;}

</style>

setInterval(function (){

var oDiv=document.getElementById('div1');

oDiv.style.width=oDiv.offsetWidth-1+'px'; //div的宽度不减反增，这是因为此时oDiv.offsetWidth=202，div的宽度就是201，比之前还增加了

}, 30);

</script>

</head>

<body>

</body>

以上bug的解决方法如下：

function getStyle(obj, name) //此方法可只获得width的200px,不包括border、padding等值

{

if(obj.currentStyle)

{

returnobj.currentStyle[name];

}

else

{

returngetComputedStyle(obj, false)[name];

}

setInterval(function (){

var oDiv=document.getElementById('div1');

oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';

}, 30);

</script>

5.注意小数的精度问题

例如：<script>

alert(0.07*100);

</script>

其结果：

所以在编写缓冲运动时一定要注意这个问题。

Event

1. js第二定律：但凡好用的东西，都不兼容。

window.οnlοad=function()

{

document.οnclick=function (ev)

{

//IE

//alert(event.clientX+','+event.clientY);

//FF

//alert(ev.clientX+','+ev.clientY);

var oEvent=ev||event;//获取event对象的兼容性写法

alert(oEvent.clientX+','+oEvent.clientY);

};

2.事件冒泡

Document.οnclick=function (){

Alert(“document被触发了”);

}

aBtn.οnclick=function (){

Alert(“按钮被触发了”);

}

当你点击按钮时，首先触发按钮的点击事件，再触发document的点击事件。事件冒泡也就是，你触发了某子级事件，其父级、父级的父级…….等等到最顶层事件都被触发。解决此问题，如下：

取消冒泡：oEvent.cancelBubble=true

安happy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript笔记

JavaScript.JS基础//////style="cursor: pointer;"设置鼠标的形状1.任何标签都可以加ID，包括link2.任何标签的任何属性，也都可以修改3.HTML里怎么写，JS里就怎么写 (除了以下的className)Eg:无标题文档#div1 {width:100px; height:100px;border:1px
复制链接

扫一扫

专栏目录