Chinaunix首页 | 论坛 | 博客
  • 博客访问: 7111732
  • 博文数量: 3857
  • 博客积分: 6409
  • 博客等级: 准将
  • 技术积分: 15948
  • 用 户 组: 普通用户
  • 注册时间: 2008-09-02 16:48
个人简介

迷彩 潜伏 隐蔽 伪装

文章分类

全部博文(3857)

文章存档

2017年(5)

2016年(63)

2015年(927)

2014年(677)

2013年(807)

2012年(1241)

2011年(67)

2010年(7)

2009年(36)

2008年(28)

分类: JavaScript

2014-07-08 11:51:20

原文地址:Javascriptx学习总结 作者:minminmsn

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=……接上面,这样无论怎样都可以居中右靠

阅读(491) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~