关于JavaScript
1、内部函数被外部函数所嵌套,它自身就形成了一个闭包。
function parentFun(){ function childFun(){} }。
2、classList属性
方便js对dom元素进行曾删改查css类【add( 添加class), remove( 删除class), toggle( 切换class) contains( 判断是否包含某个class )】
3、(词法)静态作用域和动态作用域
静态作用域是在函数定义时就定义好了的;动态作用域是在函数调用时进行定义的。
4、获取组件的个数和属性值
锚的对象(数组):anchors。<a name="html">HTML</a> <a name="css">CSS</a>
获取锚个数:document.anchors.length;
表格对象(数组):forms。<form name="form1"></form> <form name="form2"></form>
获取表格的个数和第一个的表格的名字:document.forms.length / document.forms[0].name;
图片的对象(数组)::images。<img src="../img/abc.png">
5、JavaScript中的布尔值
在js中,false类型有: 空字符 ‘ ’、数字0、undefined、null、false、NaN(NaN值是一个数值,表示一个不能产生正常结果的运算结果,它不能等任何值,包括本身)。其他值都被当做true,如true、字符串"false"、所有对象。
《JavaScript DOM编程艺术》>>>>>>>>>>>>>>>>>>>>.
1、if...else...的条件表达式
条件表达式的求值结果永远是一个布尔值:true、false。
在表达式中比较两个数是否相等,是用"==',如果使用了“=”相当于是进行赋值操作,那么如果相应的赋值操作如果取得成功,则条件表达式的求值结果就是true。
其实:条件语句if和循环语句很相似,但是while要有循环控制的条件,不然会陷入死循环。
if (i < 10) { alert(i); }
while (i<10) { alert(); i++; }
2、js对象的创建
对象可以分为用户自定义对象,内建对象(Math、String、Date)、宿主对象(由web浏览器提供的预定义对象[host object],如:Form、Image、Element,可以利用这些对象获取网页表单、图像等信息).。
document对象可以获取某个给定的网页的任何一个元素。
对于Person就是个自定义对象,对象是统称,实例是个人。
var jeremy = new Person(); jeremy.age=18; var arr = new Array(4)。
3、文档中的每一个元素都是一个对象
<button id="btn" onclick=“clickFun()">点击</button>,利用document.getElementById('btn')可以获取该button,并可以获取它的属性document.getElementById('btn').id。
4、DOM方法
1、getElementById(idName)——获取的是元素节点对象(Object),可通过document对象获取。
2、getElementsByClassName(className)、getElementsByTagName(tagName)——获取的是元素节点数组(Array),可通过document对象获取。
3、getAttribute(attribute)——获取的是元素的属性值,只能由元素节点对象调用。
4、setAttribute(attribute, value)——设置元素节点的属性值,也只能由元素对象调用。
5、childNodes属性、nodeType属性
childNodes:该属性可以获取任何一个元素的所有子元素,返回的节点包含在一个数组中,空格和换行符也被解释为节点。document.getElementsByTagName('body')[0].childNodes。
nodeType:返回节点类型。document.getElementsByTagName('body')[0].nodeType。
元素节点nodeType值:1;
属性节点nodeType值:2;
文本节点nodeType值:3;
6、nodeValue属性、nodeName属性
nodeValue属性可以获取或设置节点的值,获取<p>标签里面的字段内容并重新赋值。
var description = document.getElementById('description');
description.childNodes[0].nodeValue = textContent.getAttribute('title');
nodeName属性总是返回一份大写字母的值,即使元素在html文档中是小写字母。
description.nodeName = "P"。
7、关于window.onload
如果两个函数被同事添加到onload事件上,则只有最后一个会被执行
window.onload = fun1();
window.onload = fun2();
解决方法1:创建匿名函数,容纳这两个函数,再绑定到onload事件
window.onload = function() {
fun1();
fun2();
}
解决方法2:addLoadEvent函数,其只有一个参数,参数是在页面加载完毕时执行的函数的名字。
addLoadEvent函数要完成的操作:
1)把现有的window.onload事件处理函数的值存入oldonload;
2)如果在这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它;
3)如果在这个处理函数上已经绑定了一些函数,就把新函数追加到现有指令的末尾,具体操作如下:
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
}else {
window.onload = function() {
oldonload();
func();
}
}
}
这将把页面加载完毕时执行的函数创建一个队列,把函数添加到队列中的方法如下:
addLoadEvent(fun1());
addLoadEvent(fun2());
8、文档碎片、抽象
文档碎片(document fragnment):创建一个新元素,但它还不是任何一棵树DOM节点树的组成部分,只是游荡在JavaScript中。如:<script>window.onload = function() { var para = document.createElement('p'); }</script>
抽象(abstraction)::把一个非常具体的东西改为一个较为通用的东西的过程叫做抽象。
9、创建和插入节点基本步骤
1、createElement()方法,语法:document.createElement(nodeName);
该方法可以创建一个元素节点。
2、利用createTextNode()方法,语法:document.createTextNode(text);
利用该方法可以向创建的节点添加文本节点。
3、appendChild()方法,语法:parent.appendChild(child);
把创建的节点插入到某个文档的节点树最简单的方法是,让它成为这个文档某个现有节点的子节点。
10、alt属性,JavaScript脚本,style对象
在图片不可用(无法显示)时,用一段描述文字解释这个位置的图片。
JavaScript脚本只应该用来充实文档的内容,要避免使用DOM技术来创建核心内容。
文档中的每个元素都是一个对象,每个元素有一个style属性,style属性也是一个对象(Object)。
11、关于属性中的连字符
JavaScript语言中,访问像font-family属性,不能以这种形式:element.style.font-family,而是以element.style.fontFamily这种形式。注意:用DOM style属性不能用来检索在外部文件的样式和在<head>中设置的样式,只能获取到包含在HTML的样式。style对象的属性值永远是一个字符串,所以覆盖内嵌在标记里的CSS属性值要放在引号中,如:elem.style.color = "black",如果不使用引号,则等号右边的值被解释为一个变量。
一般在js中,变量名一般以下划线"_"连接命名,而css中样式名一般用连字符中划线“-”命名,而要用js调用的类或id应该用驼峰形式命名。element.style.font-family中的连字符会被js解释成减号"-",整个语句解释为:元素的style属性的font属性,把减号后面的内容解释为一个名为family的变量,把整个表达式解释为一个减法运算。
加号或减号之类的操作符是保留字符,不允许用在函数或变量的名字里,也意味着不能用在方法或属性中(方法和属性其实是关联在某个对象上的函数和变量),引用一个中间带减号的CSS属性时,DOM要求用驼峰命名法,如font-family ==> fontFamily。
12、样式单位
DOM表示样式属性时采用的单位并不总是与它们在CSS样式表里的设置相同,但绝大多数样式属性的返回值与它们的设置值都采用同样的计量单位。如p元素设置的color,CSS中的值是grey,检索出来的DOM color的属性值也是grey,但如果CSS中的color值是#999,JS代码检索出来的DOM color就是(153, 153, 153)。
13、className属性
className属性是一个可读/可写的属性,元素节点都有这个属性。通过这个属性设置某个元素的class属性时将替换(而不是追加)该元素原有的class设置,语法:elem.className如
<p class="disclaimer">This is not a true story</p>,设获取p元素的变量为elem,如果为其赋值一个class属性的话:elem.className = "intro",这样会将disclaimer替换掉。要实现class属性追加,应该是elem.style += " intro";intro前面有一个空格,则p的class属性值变为disclaimer intro。
14、setTimeout、clearTimeout
setTimeout("function", interval):让某个函数在经过一段预定的时间之后才开始执行,第一个参数是字符串,是将要执行的那个函数的名字;第二个参数是一个数值,以毫秒为单位设定需要经过多长时间才执行第一个参数的函数,variable = setTimeout(”function“, interval)。
一般,把这个时间执行函数调用赋值给一个变量是比较好的主意,如取消等待执行的函数的话,可以用一个名为clearTimeout的函数来取消“等待执行"队列里的某个函数,取消函数有一个参数,这个参数是保存着setTimeout函数调用返回值的变量,clearTimeout(variable)。
15、设置内外边距为零
使用通配符选择器把所有元内外边距设置为零,这样可以把不同浏览器为元素设置的不同内外边距全部删除了,重新设置这些值后,所有样式就可以一视同仁。 * { padding: 0; margin: 0 } ;