JS常用函数

前言

这里主要介绍一些常用的javascript函数,这里并不会介绍jQuery,因为在手机WEB项目中可能不会使用jQuery,主要尽量使用javascript控制,减少开销,提供响应速度。渐渐的发现,写博客真的是需要耐心的,我会坚持的。此帖会一直更新所用到的js函数。

皓眸大前端开发学习
转载请注明出处:http://www.haomou.net/2014/08/05/2014_js/

querySelector

querySelector和querySelectorAll是W3C提供的新的查询接口(http://www.w3.org/TR/selectors-api/#nodeselector ),接口定义:

1
2
3
4
5
6
7
8
9
10
module dom {
[Supplemental, NoInterfaceObject]
interface NodeSelector {
Element querySelector(in DOMString selectors);
NodeList querySelectorAll(in DOMString selectors);
};
Document implements NodeSelector;
DocumentFragment implements NodeSelector;
Element implements NodeSelector;
};

从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持它们。
如想获取页面class属性为”red”的元素,除了使用document.getElementsByClassName(‘red’)还可以使用document.querySelector(‘.red’)和document.querySelectorAll(‘.red’)。可以使用css选择器来查询元素,比如:document.querySelector(‘#red’)查询id=red,document.querySelector(‘a[href=aaa]’),查询href属性为aaa

addEventListener

大家都知道事件的用法就是当某个事件(状况)被触发了之后就会去执行某个Function, 尤其是Javascript, 在当红AJAX的催化下, 了解Javascript的Event用法更加重要, 在这里就大概介绍一下Javascript的Event用法.
Mozilla中:
addEventListener的使用方式: target.addEventListener(type, listener, capture/bubble);

  1. target: 文档节点、document、window 或 XMLHttpRequest。
  2. type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
  3. listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
  4. capture/bubble :是否使用捕捉,一般用 false 。capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件.
    capture/bubble的参数是布尔值, True表示用capture, False则是bubble.Windows Internet Explorer不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.
    1
    2
    3
    4
    5
    document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 
    ...
    btn1Obj.addEventListener("click",method1,false);
    btn1Obj.addEventListener("click",method2,false);
    btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3

IE中:
添加事件使用target.attachEvent(type, listener);

  1. target: 文档节点、document、window 或 XMLHttpRequest。
  2. type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
  3. listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);}); 
    ...
    document.getElementById("btn").onclick = method1;
    document.getElementById("btn").onclick = method2;
    document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行
    写成这样:
    var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
    btn1Obj.attachEvent("onclick",method1);
    btn1Obj.attachEvent("onclick",method2);
    btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1

上述两种模式可以使用:
‘’’{bash}
typeof window.addEventListener != “undefined”
```
判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.
W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:
W3C格式:
》》removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
》》detachEvent(event,function);

谢谢!

转载请注明出处:http://www.haomou.net/2014/08/05/2014_js/

有问题请留言。T_T 皓眸大前端开发学习 T_T