document.getElementById("elementId") ;//原始的W3C DOM
$("#elementId"); //jQuery
$("elementId"); //Prototype,MooTools
Ext.getDom("elementId") ;//Ext JS3
dojo.byId("elementId"); //Dojo
document.querySelectorAll("selectors") ;//Native(如上)
$("selectors") ;//jQuery
$$("selectors") ;//Prototype,MooTools
dojo.query("selectors") ;//Dojo
Ext.query("selectors") ;//Ext JS3
$(element).css(‘prop‘,‘value‘);
$(element).css({‘prop1‘:‘value1‘,‘prop2‘,‘value2‘});
$(element).css(‘prop‘) ;
//更新元素的全部内容 $(element).html("<p>new internal HTML</p>"); $(element).text(‘The <div> and <span> element carry no inherent semantics.‘);
//在DOM加载时执行指定脚本 $(fx)
//在某个元素上监听某个事件 $(elementOrSelector).bind(‘event‘,handlerFx); //在多个元素上监听某个事件 $(elements).bind(‘event‘,handlerfx); //停止监听 $(elementOrSelector).unbind(‘event‘,handlerFx);
$(‘a‘,$(‘#container‘)[0]).on(‘click‘,function(){alert(‘That tickles!‘)})
$(‘#container‘).delegate(‘a‘,‘click‘,function(){alert(‘That tickles!‘)})
$(‘a‘).bind(‘click‘,function(e){ e.preventDefault() e.stopPropagation()} )
//jQuery——通过多余的参数传入额外数据 $(elementOrSelector).bind(‘event‘,handlerFx);
//jQuery触发自定义事件 $(elements).trigger(‘event‘) ； $(elements).trigger(‘event‘,{foo:‘bar‘,baz:42}); $(elements).trigger(‘event‘,[‘bar‘,42]);
//给element绑定hello事件 element.bind("hello",function(){ alert("hello world!"); }); //触发hello事件 element.trigger("hello");
这段代码这样写似乎感觉不出它的好处，看了下面的例子也许你会明白使用自定义事件的好处了：
我们已一个选项卡的插件为例：我们让ul列表来响应点击事件，当用户点击一个列表项时，给这个列表项添加一个名为active的类，同时将其他列表项中的active类移除，以此同时让刚刚点击的列表对应的内容区域也添加active类。
<ul id="tabs"> <li data-tab="users">Users</li> <li data-tab="groups">Groups</li> </ul> <div id="tabsContent"> <div data-tab="users">part1</div> <div data-tab="groups">part2</div> </div>
$.fn.tabs=function(control){ var element=$(this); control=$(control); element.delegate("li","click",function(){ var tabName=$(this).attr("data-tab"); //点击li的时候触发change.tabs自定义事件 element.trigger("change.tabs",tabName); }); //给element绑定一个change.tabs自定义事件 element.bind("change.tabs",function(e,tabName){ element.find("li").removeClass("active"); element.find(">[data-tab=‘"+ tabName +"‘]").addClass("active"); }); element.bind("change.tabs",function(e,tabName){ control.find(">[data-tab]").removeClass("active"); control.find(">[data-tab=‘"+ tabName +"‘]").addClass("active"); }); //激活第一个选项卡 var firstName=element.find("li:first").attr("data-tab"); element.trigger("change.tabs",firstName); return this; };
$("ul#tabs").tabs("#tabsContent");
var handler = window.setTimeout(callback,intervalInMs); window.clearTimeout(handler);
原文：http://www.cnblogs.com/jsStudyjj/p/5011063.html