JavaScript

2015-08-01 16:20

JavaScript使用时需要注意的地方

1、
引入JS的位置：最好的做法是把<script>的标签放到HTML文档的最后、</body>标签之前；
作用：这样能使浏览器更快地加载页面；

1.2、
引入JS必须有完整开始和结束标签<script></script>，
<script />这样写不行；

2、
JavaScript是解释型语言，由浏览器中的JavaScript解释器来解释并执行；

3、
JavaScript是弱类型语言
不需要声明变量的类型；
并且可以在程序过程中改变变量的数据类型；

4、
声明和赋值最有效率的方法：
用一条语句声明多个变量并赋值；
var i = 1, a = "ok";

5、
单引号与双引号的嵌套使用，逃离符号；
var a = "it's a dog", b = 'he said, "Are you OK ?"', c = "he said, \"Are you OK ?\"", d = 'it\'s a dog';
养成良好的习惯：在代码中统一用单引号或双引号表示字符串；

6、
可以把不同的数据类型混在一起存入一个数组；
var arr = ["scott",23,false];

7、
创建数组和对象，可以没有new，也可以new；
var arr = Array();//var arr = new Array(); 
arr[0] = "scott"; 
arr[1] = 23; 
arr[2] = false; 
或
var arr = ["scott",23,false];

var obj = Object();//var obj = new Object();
obj.name = "scott";
obj.age = 23;
obj.marry = false;
或
var obj = {name:"scott", age:23, marry:false};

8、
相等操作符==并不表示完全相等，会认为空字符串""和false的含义相同；
要进行严格比较，就要使用全等操作符===，这个全等操作符会执行严格的比较，不仅比较值，还比较变量的数据类型；
不等操作符!=也是如此，!==执行严格的比较；
var pk1 = "", pk2 = false;

if(pk1 == pk2){
alert("yes");//yes
}

if(pk1 === pk2){
alert("yes");
}else{
alert("no");//no
}

if(pk1 !== pk2){
alert("no");//no
}

 

2015-08-04 13:58

JavaScript内建函数

/*JavaScript内建函数：
分为五类：
　　 ·常规函数
　　 ·数组函数 var array = new Array();
　　 ·日期函数 var date = new Date();
　　 ·数学函数
　　 ·字符串函数

    常规函数
　　 javascript常规函数包括以下9个函数：
　　 (1)alert函数：显示一个警告对话框，包括一个OK按钮。
　　 (2)confirm函数：显示一个确认对话框，包括OK、Cancel按钮。
　　 (3)escape函数：将字符转换成Unicode码。
　　 (4)eval函数：计算表达式的结果。
　　 (5)isNaN函数：测试是(true)否(false)不是一个数字。
　　 (6)parseFloat函数：将字符串转换成符点数字形式。
　　 (7)parseInt函数：将符串转换成整数数字形式(可指定几进制)。
　　 (8)prompt函数：显示一个输入对话框，提示等待用户输入。
　　 (9)unescape函数：解码由escape函数编码的字符。
*/
    var input = prompt("请输入您的姓名","姓名");
    alert(input);

    var cfm = confirm("确定否！");
    alert(cfm);

    //日期函数
    //getYear函数：返回日期的“年”部分。返回值以1900年为基数，例如1999年为99。
    //getMonth函数：返回日期的“月”部分，值为0～11。其中0表示1月，2表示3月，...，11表示12月。
    //getDay函数：返回星期几，值为0～6，其中0表示星期日，1表示星期一，...，6表示星期六。
    var date = new Date();
    var yyyymmdd = (1900 + date.getYear()) + "-" + (1 + date.getMonth()) + "-" + date.getDate();
    var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var i = date.getDay();
    var hh24miss = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
    alert(yyyymmdd + " " + week[i] + " " + hh24miss);

 

实用JavaScript函数

//把函数绑定到window.onload事件
function addLoadEvent(functionName){
    //把现有的window.onload事件处理函数的值存入变量oldonload
    var oldonload = window.onload;
    //如果window.onload事件没有绑定函数，直接把新函数添加给它；
    //如果window.onload事件已经绑定了函数，就把新函数追加到现有函数的末尾，这将把那些在页面加载完毕时执行的函数创建为一个队列；
    if(typeof window.onload != "function"){
        window.onload = functionName;
    }else{
        window.onload = function(){
            oldonload();
            functionName();
        }
    }
}

//在指定的已有子节点之后插入新的子节点
function insertAfter(newElement, targetElement){
    //把目标元素的parentNode属性值保存到变量parent里；
    var parent = target.parentNode;
    //判断目标元素是不是parent的最后一个子元素；
    //如果是，就直接将新元素追加到parent元素上；
    //如果不是，就把新元素插入到目标元素的下一个兄弟元素之前
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

 

2015-08-04 12:36

W3C DOM

　　“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

　　DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。 DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。 最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

　　W3C DOM 标准被分为 3 个不同的部分：

　　Core DOM - 针对任何结构化文档的标准模型

　　XML DOM - 针对 XML 文档的标准模型

　　HTML DOM - 针对 HTML 文档的标准模型

　　

　　Core DOM：核心DOM

　　常见的Core DOM方法如下：  

　　1、创建节点  createElement() 方法可创建元素节点。此方法可返回一个 Element 对象。  createTextNode() 可创建文本节点。此方法可返回 Text 对象。

　　2、复制节点  cloneNode(Boolean) 方法创建节点的拷贝，并返回该副本。  

　　3、插入节点  appendChild() 方法向节点添加最后一个子节点。     insertBefore() 方法在指定的已有子节点之前插入新的子节点。  

　　4、删除节点  removeChild() 方法删除指定元素的某个指定的子节点。  

　　5、替换节点  replaceChild() 方法用新节点替换某个子节点。  

　　6、查找节点  getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。  getElementsByTagName() 方法可返回带有指定标签名的对象的集合。  hasChildNodes() 方法判断当前元素节点是否拥有子节点。  

　　7、查找、修改、删除节点属性  getAttribute() 方法返回指定属性名的属性值。  setAttribute() 方法创建或改变某个新属性。  removeAttribute() 方法删除指定的属性。

　　常见的Core DOM属性如下：  

　　nextSibling 属性返回被选节点的下一个同级节点（在相同树层级中的下一个节点）。  

　　previousSibling 属性返回选定节点的上一个同级节点（在相同树层级中的前一个节点）。  

　　parentNode 属性返回指定节点的父节点。   

　　childNodes 属性返回节点的子节点集合，以 NodeList 对象。  

　　firstChild 属性返回指定节点的首个子节点，以 Node 对象。  

　　lastChild 属性返回被选节点的最后一个子节点。  

　　nodeType 属性返回以数字值返回指定节点的节点类型。  

　　nodeValue 属性设置或返回指定节点的节点值。