【资源帖】JS复习贴

[zptcsoft]

引言

本学期的学习内容为利用Javascript的方式实现交互开发，在内容上主要分为三个部分，JS语言基础、文档对象模型（DOM）和浏览器对象模型（BOM）等。

内容

JS语言基础

基础语法

数据类型

运算符

程序结构

条件语句

循环语句

其他语句

JS语言核心对象

数组

Date对象

函数

对象和原型

DOM

事件

/*
事件 触发代码的机制
        事件类型 
            鼠标事件 单击  双击  鼠标经过 鼠标移出  
            键盘事件 
            表单
        处理事件
            绑定事件
                addEventListener  IE8-不支持
            移除事件
                 自定义事件

*/

获取元素

1. 通过CSS选择器选择元素

//querySelectorAll 选择给定CSS选择器的所有匹配元素
//返回DOM列表
var matches = document.querySelectorAll('div.foo');
for (i=0; i<matches.length; i++)
     console.log(matches[i].innerHTML);

//querySelector  选择给定CSS选择器的第一个匹配元素
//返回DOM元素
//以下两句话等效
var match = document.querySelectorAll('div.foo')[0];
var match = document.querySelector('div.foo');

//也可以做一个类似jquery的功能函数，来简化书写
//选择匹配元素列表, 两个参数，第一个为选择器（字符串类型），第二个为范围（节点类型）可选参数
function $(selector, context) {
     return (context || document).querySelectorAll(selector);
 }
 
//选择匹配的第一个元素
function $1(selector, context) {
     return (context || document).querySelector(selector);
}

2. 通过类名找到元素

//getElementsByClassName 获取指定ClassName的元素列表
var matches = document.getElementsByClassName('foo');

//输出元素数
console.log(matches.length);
//遍历元素
for (var i=0; i<matches.length; i++)
     console.log(matches[i].innerHTML);

3. 通过标签名找到元素

//getElementsByTagName 获取指定标签名的元素列表
var matches = document.getElementsByTagName('fa');

//输出元素数
console.log(matches.length);
//遍历元素
for (var i=0; i<matches.length; i++)
     console.log(matches[i].innerHTML);

4. 通过ID找到元素

//getElementById 获取指定ID的元素
var el = document.getElementById('foo');
el.innerHTML = 'Hello World!';

DOM遍历

1. 匹配元素

//matches() 返回元素是否匹配给定选择器
//语法 var result = element.matches(selectorString); 
//IE实现了非标准的msMatchesSelector方法

<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>

<script type="text/javascript">
  var birds = document.getElementsByTagName('li');

  for (var i = 0; i < birds.length; i++) {
    if (birds[i].matches('.endangered')) {
      console.log('The ' + birds[i].textContent + ' is endangered!');
    }
  }
</script>

// matches polyfill
this.Element && function(ElementPrototype) {
  ElementPrototype.matches = ElementPrototype.matches ||
      ElementPrototype.matchesSelector ||
      ElementPrototype.webkitMatchesSelector ||
      ElementPrototype.msMatchesSelector ||
      function(selector) {
            var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1;
            while (nodes[++i] && nodes[i] != node);
            return !!nodes[i];
      }
}(Element.prototype);

2. 父元素

//parentNode 获取父元素
var el = document.querySelector('div');
var parent = el.parentNode;

3. 兄弟元素

//有过滤器的情况下，获取所有兄弟元素
function getSiblings(el, filter) {
    var siblings = [];
    el = el.parentNode.firstChild;
    do { if (!filter || filter(el)) siblings.push(el); } while (el = el.nextSibling);
    return siblings;
}
//有过滤器的情况下，获取兄弟后续元素
//过滤器可缺省
function getNextSiblings(el, filter) {
    var siblings = [];
    while (el= el.nextSibling) { if (!filter \|\| filter(el)) siblings.push(el); }
    return siblings;
}
//有过滤器的情况下，获取前面兄弟元素
//过滤器可缺省
function getPreviousSiblings(el, filter) {
    var siblings = [];
    while (el = el.previousSibling) { if (!filter \|\| filter(el)) siblings.push(el); }
    return siblings;
}

//应用举例
// 过滤函数示例
function exampleFilter(el) {
    return elem.nodeName.toLowerCase() == 'a';
}

// 使用
el = document.querySelector('div');
// 获取所有兄弟元素
var sibs = getSiblings(el);
// 获取a兄弟元素
var sibs_a = getSiblings(el, exampleFilter);

4. 获取最近祖先元素

//closest 返回最近祖先元素
//closset 是新特性，只有现代浏览器支持，所以需要polyfill。

var el = document.querySelector('span');
console.log(el.closest('div'));

// matches polyfill
this.Element && function(ElementPrototype) {
    ElementPrototype.matches = ElementPrototype.matches ||
    ElementPrototype.matchesSelector ||
    ElementPrototype.webkitMatchesSelector ||
    ElementPrototype.msMatchesSelector ||
    function(selector) {
        var node = this, nodes = (node.parentNode  || node.document).querySelectorAll(selector), i = -1;
        while (nodes[++i] && nodes[i] != node);
        return !!nodes[i];
    }
}(Element.prototype);

 // closest polyfill
this.Element && function(ElementPrototype) {
    ElementPrototype.closest = ElementPrototype.closest  ||
    function(selector) {
        var el = this;
        while (el.matches && !el.matches(selector)) el = el.parentNode;
        return el.matches ? el : null;
    }
}(Element.prototype);

5. 获取后代元素

//遍历子元素
var el = document.querySelector('div');
var children = el.childNodes,
      number_of_children = children.length;
for (var i=0; i<number_of_children; i++)
     console.log(children[i].innerHTML);
//第一个和后一个
var firstChild = el.firstChild;
var lastChild = el.lastChild;

操作DOM

1. 创建DOM

//createElement() 创建元素
//appendChild 附加元素
var el = document.createElement('div');
el.innerHTML = '<p>Hello World!</p>';
document.body.appendChild(el);

2. 替换DOM

//replaceChild() 替换元素
var el = document.querySelector('div');
var newEl = document.createElement('p');
newEl.innerHTML = '<b>Hello World!</b>';
el.parentNode.replaceChild(newEl, el);

3. 空置DOM

//设置innerHTML为空
var el = document.querySelector('div');
el.innerHTML = '';

4. 删除DOM

//removeChild删除节点
var el = document.querySelector('div');
el.parentNode.removeChild(el);

5. 插入DOM

//在某个元素前插入DOM
function insertBefore(el, referenceNode) {
      referenceNode.parentNode.insertBefore(el, referenceNode);
}
//在某个元素后插入DOM
function insertAfter(el, referenceNode) {
      referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}
//使用
var newEl = document.createElement('div');
newEl.innerHTML = '<p>Hello World!</p>';
var ref = document.querySelector('div.before');
insertBefore(newEl, ref);

//在指定位置插入DOM（文本形式）

操作CSS

获取CSS

function getStyle(obj,style){
    if(obj.currentStyle){
        return obj.currentStyle[style];//IE
    }else{
        return getComputedStyle(obj,false)[style];//webkit
    }
}
//obj.style.width
//obj.currentStyle.width
//getComputedStyle(obj,false).width

设置CSS

1. style属性
2. style对象
3. csstext
4. class操作

   BOM

   window对象

   history对象

   navigator对象

   常用API

   网络存储

   cookie对象

   locallstorage和sessionstorage

   Page Visibility API

   后记

[zptcsoft]

非常不错的逐行新闻滚动效果