注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

php开发lamp

《西安--木木》-经历丰富了生活。 架构师QQ群: 246695517

 
 
 

日志

 
 

js基础--javascript学习体系详解  

2013-03-23 12:45:44|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1:查找节点

1:查找节点

getElementById()//查找标签属性为id值的节点

getElementsTagName()//查找元素节点如div ,p元素

getElementsByName()//查找标签属性为name值的节点 用于表单 IE9以下不支持,自己测试下


 

2:节点的操作

2:节点的操作

增加,删除,修改 //dom对子元素操作要站在父级元素层次 操作子元素

childNodes//中含有空白的文本节点,文本节点

children//查找子节点不包含文本节点,空白节点。 //大多浏览器均支持

parentNode//来获取父元素

*节点信息
每个节点都拥有的属性:
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)

《1.增加元素节点

createElement()//创建元素节点 如:div

creatTextNode()//创建文本节点

appendChild()// 给某个元素插入子元素,并插在最后。
父节点.appendChild(追加子元素);

//克隆节点

oldnode.cloneNode(true/false)//代表克隆节点,克隆子节点/不克隆子节点

《2.删除元素节点

parentnode.removeChild()//必须得站在其父节点的高度,通过removeChild才能删除。

《3.修改(替换)节点

parentnode.replaceChild()

//先创建一个新节点准备,再到要被替换的节点。
//然后到旧节点的父节点上去,站在父节点的高度上。
//父节点.replaceChild(新节点);

/*
直接插入html内容[不是w3c的标准,但主流浏览器都支持]
//innerHTML属性
节点的innerHTML属性是可读可写的。
可读是把某个节点的html代码读取出来。
如果赋值,则相当于把节点的html修改。
*/

 

 

======js操作节点的属性和css属性======
对于<input type="" name="" value="" />
上面的type,name,value是节点内部的属性名

js如何操作标签内的属性?
答:先找到节点,节点.属性名。

有一个例外:节点.class ==>节点.className


对应css属性
{
 width:200px;
 font-size:14px;
}
对于css属性如何操作?
答:找到节点
节点.style.css属性。

css属性的命名规律:
如果css属性不含“-”,则js中属性与css属性相同。
如果css属性含有“-”,则js中的相应属性为css属性去掉“-”,并把“-”后的首字母大写。
*/

3.DOM 事件

3.DOM 事件

主要的DOM事件分类3类
1:页面上的变化引起的,比如失去焦点,关闭页面
2:鼠标变化引起的,比如,鼠标经过,鼠标双击,鼠标单击。
3:键盘事件

onload 页面加载完成

onclick 点击

onblur 元素失去焦点

onchange 域的内容被改变

onfocus 元素获得焦点

onkeydown 某个键盘被按下

onmousemove 鼠标移到元素之上

onmouseout 鼠标从某元素移开

onmousedown 鼠标按钮被按下

 

BOM操作

BOM浏览器对象模型
BOM ---window
DOM----document

docuemnt对象其实是window的一个属性或叫子对象。
*/

/*
window对象的子对象
window.navigator //浏览器的相关信息
window.history  //历史记录,或者前今后退
window.screen   //表示分辨率
window.location  //地址栏,控制页面跳转
window.document //DOM模型

window.document,为什么之前的学习中,直接document??
答:因为window对象是最大的一个对象,所有对象都在其内部。

些document默认就是在全局window下面属性或子对象。
*/


/*
window对话框
alert()
confirm()//确认对话框
prompt('提示信息','默认值')//提示输入框
*/


/*
window定时器

window.setTimeout('事件',时间)
是指:经过指定“时间”后执行“事件”一次

window.setInterval('事件',时间)
是指:每隔指定时间执行一次事件

 

清除window定时器

再创建定时器的时候,
把创建结果赋给一个“定时器变量”
var clock=window.setInterval();
再用:
clearInterval(clock);//清除定时器
*/

 


4.4种事件的绑定

4.4种事件的绑定
1:标签内绑定事件

onclick="t();"

2:元素对象绑定事件

document.getElementById('id属性值').onclick = t;

3:给某事件绑定多个执行函数

此处牵扯到浏览器兼容

IE9以上和w3c标准做法

addEventListener('事件名不加on',t);

addEventListener('事件名不加on',t1);

removeEventListener('事件名不加on',t);//去除事件

例子://给同一个事件增加了2个执行函数

document.getElementById('id属性值').

addEventListener('click',t);

document.getElementById('id属性值').

addEventListener('click',t1);

 

ie9以下事件绑定做法

attachEvent('事件带on',函数);//增加事件

detachEvent('事件带on',函数);//删除事件

例子:兼容性做法

var iddom = document.getElementById('idvalue');

var prefix='';

if(iddom.attachEvent){

prefix='on';

iddom.addEventListener=iddom.attachEvent;

}

iddom.addEventListener(prefix+'click',t);

iddom.addEventListener(prefix+'click',t2);

 

//增加事件时,为了记录事件发生时的各种信息,Ie9以下记录在window.Event对象中,w3c事件发生后,以参数形式传给执行函数。

W3C:Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

iddom.addEventListener('click',t);

t(event){

event=event ||window.Event;//兼容性处理

var keynum = ev.which||ev.keyCode;

/*

以下W3C code

if(window.event) // IE
  {
  keynum =
e.keyCode
  }
else if(e.which) // Netscape/Firefox/Opera
  {
  keynum =
e.which
  }

*/

}


 
5.js扑捉模型与冒泡模型,事件的中断(IE9以下不支持扑捉模型)

5.js扑捉模型与冒泡模型,事件的中断(IE9以下不支持扑捉模型)

//事件在dom模型触发的顺序
//事件的冒泡模型:
//从dom树的子节点向父节点执行事件叫做冒泡。
//找到子节点后向上冒泡执行
//填写第三个参数true,事件执行变成扑捉模型。
//扑捉模型:
//扑捉模型是从父节点向子节点执行--查找时执行
//
 
event.stopPropagation(event);//w3c标准终止事件冒泡执行,与扑捉执行
event.cancelBubble=false;//IE9以下终止事件冒泡执行,与扑捉执行
 

 
6.词法分析与作用域链
 

6.词法分析与变量作用域链

//在函数运行时,会先进行词法分析(预编译)ECMAscript
1:分析参数
2:分析变量声明
3:分析函数声明

如何分析变量声明,以var str='local'为例,
分为分析过程 和 执行过程。

先分析 ,后执行


先分析 var str; ,即仅仅声明一个str变量,str变量此时,默认有赋值,值是undefined,

然后在进行,执行过程。

 

要理解闭包,首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

 

 


 
7.js函数声明与arguments参数详解
8.js中this指向
9.闭包
//函数的作用域,不取决于运行时的环境,而取决与函数声明时的环境。
10.构造函数的特点
11:js面向对象封装(原形链继承)
12:原型冒充和复制来完成继承
13:js面向对象多态
14:js面向对象静态方法

 
  评论这张
 
阅读(351)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017