Javascriptx学习总结

JavaScript 学习总结




第一章 认识JavaScript


1，JavaScript是什么
JavaScript是一种可以用来给网页增加交互性的编程语言。
脚本语言(Scripting language)
标签
包含在HTML页面内部（通常放在部分）
存储在外部文件中
?

综合总结如下：
js的组成:
ECMAScript
DOM：操作文档（页面）
BOM：操作窗口


关于变量：
var 
typeof():number,string,boolean,object,undefined,null,function


关于运算：
隐式：==,-
显式: parseInt/NaN
==/===


关于事件：
onmouseover/onmouseout/onclick  
事件的处理不放在行间
window.onload=function(){...}
元素名.事件名 =function(){...}


获取元素：
getElementById(元素的id名字) 
getElementsByTagName("")  按标签名字取-〉数组
数组.length


关于数组：
数组.sort()
字符串.split(解析分隔符)
数组.join(元素之间的连接符)


关于样式：
style.display=block/none
style.background=颜色
复选框.checked=true/false




结构、表现、行为相分离：
1、布局---html
2、样式---  (.css)
   
3、js
     ()
   


4，数组
数组的定义
使用Array关键字定义
例如：var arr=new Array();
             var arr=new Array(1,2,3,4);
使用[]定义
例如：var arr=[1,2,3,4]
数组的属性
数组的长度：length属性


数组的方法
push：向数组尾部添加元素
pop：从数组尾部弹出一个数据
shift：从数组头部删除一个元素
unshift：向数组头部添加一个元素
sort：排序
排序规则：字母序对字符串进行排序
比较函数
concat：连接两个数组
split：解析字符串为数组
join：输出数组时元素之间的分隔符


例子：
数组的排序，从小到大排序



5，函数
函数的返回值
没有return/return ;：undefined
规则：令一个函数只返回一种类型的值
函数的参数
一般的参数：
参数类型
参数个数
arguments：参数数组，可变参，不定参
例子：

上面会显示5，数组里面的第2个元素


例子：
模拟“重载”的处理



6，CSS函数
css(‘background’)
css(‘background’,’red’);




第三章，DOM（Ducument Object Model）


1，获取节点
getElementById
获取子节点：childNodes
子节点的个数
操作子节点
例子：
window.onload=function (){
var oUl=document.getElementById('ul1');

oUl.childNodes[0].style.background=yellow';//ul的第一个子节点，也就是下面的li
}


2，检测节点的类型
nodeType
元素节点：1
文本节点：3
属性节点：2
例子：



3，父节点parentNode
父节点只有一个


例子：隐藏父节点
window.onload=function (){
var aA=document.getElementsByTagName('a');
var i=0;

for(i=0;i aA[i].onclick=function () {
this.parentNode.style.display='none';
}
}
}
this：指向调用该方法或属性的对象。


4，offsetParent
获取当前元素用于定位的父节点


5，子节点
firstChild，firstElementChild
lastChild, lastElementChild


例子：
window.onload=function (){
var oUl=document.getElementById('ul1');

//IE低版本
//oUl.firstChild.style.background='red';

//FF，IE11
//oUl.firstElementChild.style.background='red';

var oFirst=oUl.firstElementChild||oUl.firstChild;

oFirst.style.background='red';
}


6，DOM元素的查找
用id选择元素
用tagName选择元素
用className选择元素
选出所有元素
利用if做筛选
封装为函数
function getByClass(oParent, sClass){
var aEle=oParent.getElementsByTagName('*');
var aResult=[];   //可能存在多个，放在数组中
var i=0;

for(i=0;i if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload=function (){
var oUl=document.getElementById('ul1');
var aBox=getByClass(oUl, 'box');
var i=0;

for(i=0;i aBox[i].style.background='yellow';
}
}


7，创建、插入和删除元素
创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点)
追加一个节点
例子：为ul插入li
window.onload=function (){
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function () {
var oLi=document.createElement('li');
oLi.innerHTML=oTxt.value;
oUl.appendChild(oLi);
}
}
InnerHTML是一个标签内部的东西

   这里是标签内部的东西，存储在innerHTML中

插入元素
insertBefore(节点, 原有节点) 在已有元素前插入
例子：倒序插入li
window.onload=function (){
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function () {
var oLi=document.createElement('li');
var aLi=oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
if(aLi.length==0){
oUl.appendChild(oLi);
}
else{
oUl.insertBefore(oLi, aLi[0]);
}
}
}




删除DOM元素
removeChild(节点) 删除一个节点
例子：删除li
window.onload=function (){
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
var i=0;
for(i=0;i aA[i].onclick=function () {
oUl.removeChild(this.parentNode);
}
}
}




第四次课 处理事件


1，在document上加事件
document.onclick=function (){
alert('a');
}


2，从event对象获取点击坐标（考虑到不同浏览器的兼容性问题）
document.onclick=function(ev){
if(ev){
alert(ev.clientX+","+ev.clientY);
}else{
alert(event.clientX+","+event.clientY);
}
}


3，或运算
非0---true   0/null/false
12 || false   12
0 || ’abc’    ‘abc’
‘’ || true     true
12 || 0         12
12 || null    12
null || ’abc’    ‘abc’
‘abc’ || 12      ‘abc’
利用或运算处理浏览器兼容性
document.onclick=function (ev){
var oEvent=ev||event;       //将特殊的放在前面

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


4，事件流
事件像冒泡一样从DOM层次结构的底层往上一级级升
事件处理：避免事件冒泡带来的干扰
window.onload=function (){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');

oBtn.onclick=function (ev){
var oEvent=ev||event;
oDiv.style.display='block';

oEvent.cancelBubble=true;   //阻止冒泡
};

document.onclick=function (){
oDiv.style.display='none';
};
};


5，鼠标事件
鼠标位置
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');

oDiv.style.left=oEvent.clientX+'px' ;
oDiv.style.top=oEvent.clientY+'px' ;
};


滚动位置
鼠标跟随改进：
document.onmousemove=function (ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
var scrollTop =document.documentElement.scrollTop  || document.body.scrollTop;
        var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;


oDiv.style.left=oEvent.clientX+scrollLeft+‘px’ ;  //横向滚动处理
oDiv.style.top=oEvent.clientY+ scrollTop +‘px’ ;  //纵向滚动处理
};


6，键盘事件
对比鼠标事件：onclick=onmousedown+onmouseup
键盘事件：onpress= onkeydown+onkeyup
键值keycode
document.onkeydown=function (ev){
var oEvent=ev||event;

alert(oEvent.keyCode);
}


offsetWidth: div的宽度
border:1px;            +
padding(内边距):10px    +
margin(外边距):20px      -
offsetLeft：div的左边距
offsetTop
offsetRight


键盘控制移动：上下左右移动
document.onkeydown=function (ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');


if(oEvent.keyCode==37){//左
oDiv.style.left=oDiv.offsetLeft-10+'px';
}else if(oEvent.keyCode==39) {
oDiv.style.left=oDiv.offsetLeft+10+'px';
}else if(oEvent.keyCode==38) {
oDiv.style.left=oDiv.offsetTop-10+'px';
}else if(oEvent.keyCode==40) {
oDiv.style.left=oDiv.offsetTop+10+'px';
}
};


使用鼠标点击留言:
window.onload=function (){
var oBtn=document.getElementById('btn1');
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');

oBtn.onclick=function () {
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
};
};


Enter键留言：
window.onload=function (){
……


oTxt2.onkeydown=function (ev){  //注意加事件的对象
var oEvent=ev||event;

if( oEvent.keyCode==13){
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
}
};
};


ctrl+enter提交：
window.onload=function (){
……


oTxt2.onkeydown=function (ev){  //注意加事件的对象
var oEvent=ev||event;

if( oEvent.ctrlKey  && oEvent.keyCode==13){
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
}
};
};


7，默认行为


什么是默认行为？
不需要自己编写，浏览器自己即具备的功能。
右键打开快捷菜单（oncontextmenu事件（上下文菜单）：右键菜单）
文本框输入
表单提交
阻止默认行为的一般的写法：return false


弹出自定义右键菜单：
document.oncontextmenu=function (ev){
var oEvent=ev||event;
var oUl=document.getElementById('ul1');
var scrollTop =document.documentElement.scrollTop  || document.body.scrollTop;
               var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;


oUl.style.display='block';
oUl.style.left= oEvent.clientX+scrollLeft+‘px’ ;;
oUl.style.top= oEvent.clientY+ scrollTop +‘px;

return false;  //阻止系统右键菜单
};


弹出自定义右键菜单：
document.onclick=function (){
var oUl=document.getElementById('ul1');
oUl.style.display='none';
};


8，拖拽
onmousedown: 存储距离
onmousemove：根据距离计算DIV最新位置





最后总结：
1、事件对象--注意兼容性
   function(ev)
   var oEvent = ev ||event;




2、事件流  
   父节点，子节点 相同事件
   oEvent.cancelBubble=true; 阻止事件冒泡


3、鼠标事件


   鼠标点击位置：
   oEvent.clientX  鼠标距可视区的左边距
   oEvent.clientY  鼠标距可视区的上边距


   带滚动条的滚动位置（注意兼容性）：
   var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;


   div定位： oDiv.style.left= scrollLeft+oEvent.clientX +'px';
             oDiv.style.top = scrollTop+oEvent.clientY +'px';


4、键盘事件 
   oEvent.keyCode
   取值：测试


   常用取值：13--回车




第5次课  BOM


1，打开窗口
window.open(页面地址, 打开方式);
打开方式：在哪个框架中打开？
_blank:新窗口，默认
_self：当前窗口
例子：
oBtn.onclick=function (){
window.open(‘ ', '_self');
};
运行代码：
document.write()：向页面输出内容


举例：document.write(‘aaa’);  
运行并查看页面源代码
window.onload=function (){
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');

oBtn.onclick=function () {
var oNewWin=window.open('about:blank');
oNewWin.document.write(oTxt.value);
};
};







2，关闭窗口
window.close()
window.onload=function (){
var oBtn=document.getElementById('btn1');

oBtn.onclick=function () {
window.close();
};
};







3，常用属性
window.navigator.userAgent：浏览器版本号
window.location：当前页面地址
读  
alert(window.location);
写
window.location='http://'


4，系统对话
var b = confirm('今天下雨了吗？');
alert(b);
var str = prompt('请输入你的姓名', ‘song');
alert(str);


5，尺寸及坐标
可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
滚动距离
document.body.scrollTop
document.documentElement.scrollTop


侧边栏例子：
window.onscroll=function (){
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;

oDiv.style.top=scrollTop+t+'px';
};



需要解决的问题
页面刚加载
页面大小改变
window.onresize=window.onload=……接上面，这样无论怎样都可以居中右靠