JavaScript学习笔记

2017-05-23  本文已影响11人  MVBin

什么是JavaScript

JavaScript是一种脚本语言，是一种弱类型语言（可以不用声明变量的类型，与强类型语言不同）。

如何使用JavaScript

  1. 在HTML或XHTML文档中直接编写JavaScript代码
  2. 在HTML或XHTML文档中引入扩展名为.js的JavaScript文件

以上两种方式的使用位置最好放在HTML或XHTML文档的最后，即</body>标签之前，这样有利于页面的快速加载。

JavaScript中的注释方式

  1. 单行注释使用//代码行
  2. 多行注释使用/* 多行代码 */

JavaScript中的变量

  1. 可以不用显示的声明变量的类型，但最好声明
  2. 变量的命名要规范（驼峰命名法等），且区分大小写，不能包含标点符号或空格
  3. 以var关键字进行变量的声明

JavaScript中的内置函数

JavaScript中的内置对象

JavaScript中使用window对象

  1. 使用window.onload在页面加载时调用指定函数，如：window.onload = showPic();在页面加载时调用showPic()函数
  2. 使用window.open打开一个新的窗口，如：window.open(url, name, features)，其中url表示打开的新窗口的链接地址，name是新窗口的名字，features是一个字符串，用来设置新的窗口的特征，如宽度，高度等，属性之间以逗号进行分割

JavaScript中的事件处理函数

  1. onmouseover当鼠标指责悬停在某个元素上时调用指定函数，如：onmouseover="uf_Over();"
  2. onmouseout当鼠标指针离开某个元素时调用指定函数
  3. onclick当鼠标点击某个元素时调用指定函数，如：onclick="showPic();add();return false;"
  4. onkeypress当敲击键盘上任意一个按键时调用指定函数，这个时间处理函数请谨慎使用

注意：以上事件处理函数调用的指定函数的数量可以有多个，并用分号分割开即可。

HTML或XHTML文档中的节点

  1. 元素节点，如：<body>,<p>等
  2. 文本节点，如：<a>This is a link</a>中的This is a link
  3. 属性节点，如：![](images/1.jpg)中的src

获取页面（Document）中元素的三种方法

  1. 使用getElementById("xxx")根据id获取元素节点（唯一），如：document.getElementById("form1");获取id为form1的元素节点

  2. 使用getElementsByTagName("xxx")根据标签的名字获取元素数组，如：document.getElementsByTagName("li");获取li标签的元素数组，该方法返回的是一个数组，因此，数组相关的一些属性和方法就可以使用，如：获取数组长度等

  3. 使用getElementsByClassName("xxx")根据class属性的值获取元素数组，如：document.getElementsByClassName("sale");获取元素中class属性为sale的元素数组，有的元素的class属性有多个值，如class="sale red big"，要获取类似的元素，依然可以使用document.getElementsByClassName("red pig");注意：class属性值得顺序，数量并不重要，只要是含有这些值得元素都可以进行获取。由于getElementsByClassName("xxx")这个方法适用于较新版本的浏览器，为了兼容老版本浏览器，我们可以改写该方法，如：

     function getElementsByClassName(node, classname) {//node是节点元素，classname是class值
     if(node.getElementsByClassName) {//判断是否可以使用该方法
         return node.getElementsByClassName(classname);//如果可以，返回该方法
     } else {
         var results = new Array();
         var nodes = node.getElementsByTagName("*");
         for(var i = 0; i < nodes.length; i++) {
             if(nodes[i].className.indexOf(classname) != -1) {//判断每个节点的class属性值是否包含classname
                 results[results.length] = nodes[i];//如果包含
             }
         }
         return results;
     }
 }

操作元素中的属性节点

  1. 使用getAttribute("xxx")获取xxx属性节点的值，如：document.getElementById("p1").getAttribute("title");

  2. 使用setAttribute("xxx", "yyyy")将xxx属性节点的值修改为yyyy，如该属性节点不存在，则会先创建该属性，然后再设置值。

  3. 使用childNodes获取任意元素的所有子元素，返回的是一个数组，如：document.getElementsByTagName("body")[0].childNodes获取body元素下的所有子元素。

  4. 使用nodeType获取节点的类型，返回的是一个数字，其中，1为元素节点；2为属性节点；3为文本节点。

  5. 使用nodeValue获取文本节点的值

  6. 使用firstChild获取节点的第一个子元素

  7. 使用lastChild获取节点的最后一个子元素

  8. 使用nodeName获取节点的标签名称，返回值为标签名的大写英文，如IMG等

  9. 使用innerHTML获取节点中的html代码，也可以写入相应的html代码

  10. 使用createElement创建一个新的元素节点，如：var para = document.createElement("p");创建一个p标签，变量para代表对这个p标签的引用

  11. 使用appendChild向父节点中插入子节点，如：

    var testdiv = document.getElementById("testdiv");//获取父节点testdiv
var para = document.createElement("p");//创建新的节点p
testdiv.appendChild(para);//将节点p插入到testdiv中

  12. 使用createTextNode创建新的文本节点，如：

    //接上边代码
var textNode = document.createTextNode("hello world");//创建一个新的文本节点textNode
para.appendChild(textNode);//插入该文本节点

  13. 使用parentNode获取父节点

  14. 使用insertBefore将一个新元素插入到一个现有元素的前面，其调用语法：parentElement.insertBefore(newElement, targetElement)，因此需要知道三个元素，父元素parentElement，要插入的元素newElement，目标元素targetElement

  15. 使用nextSilbing获取该元素的下一个兄弟元素

  16. JavaScript没有内置一个insertAfter函数用来在一个元素后面插入新元素，因此，可以编写一个这样的函数，如：

    function insertAfter(newElement, targetElement) {
    var parentElement = targetElement.parentNode;//获取父元素
    if(parentElement.lastChild == targetElement) {//判断父元素的最后一个子元素是不是目标元素
        parentElement.appendChild(newElement);//如果是，直接插入子节点
    } else {
        parentElement.insertBefore(newElement, targetElement.nextSibling);//如果不是
    }
}

Ajax

这一部分的学习请参考Ajax学习笔记

上一篇下一篇

猜你喜欢

热点阅读