层叠样式表 CSS:
.addClass(); .css(); .hasClass(); .height(); .innerHeight(); .innerWidth(); .offset(); .outerHeight(); .outerWidth(); .position(); .removeClass(); .scrollLeft(); .scrollTop(); .toggleClass(); .width();
事件 Events:
$('#foo').bind('click', function() { alert('User clicked on "foo."'); }); //注册点击事件 $('#other').blur(function() { $('#target').blur(); }); //移除焦点时 $('.target').change(function() { alert('Handler for .change() called.'); }); //表单改变时 $('#other').click(function() { $('#target').click(); }); //单击时 $('#target').dblclick(function() { alert('Handler for .dblclick() called.'); }); //双击时 $("body").delegate("p", "click", function(){ $(this).after("<p>Another paragraph!</p>"); }); //给p标签注册鼠标事件 $("#theone").live("click", aClick); //激活#theone上的click事件,并调用aClick函数 $("#theone").die("click", aClick); //禁用#theone上的click事件 $(window).error(function(){ return true; }); //隐藏js脚本错误 $("p").click(function(event) { alert( event.currentTarget === this ); // true }); //当前事件的对象 $("a").each(function(i) { $(this).bind('click', {index:i}, function(e){ alert('my index is ' + e.data.index); }); }); //事件的索引 //在div上存储数据 $("div").data("blah"); // undefined $("div").data("blah", "hello"); // blah设置为hello $("div").data("blah"); // hello $("div").data("blah", 86); // 设置为86 $("div").data("blah"); // 86 $("div").removeData("blah"); //移除blah $("div").data("blah"); // undefined $("a").click(function(event){ alert( event.isDefaultPrevented() ); // false event.preventDefault(); alert( event.isDefaultPrevented() ); // true }); //isDefaultPrevented? function immediatePropStopped(e) { var msg = ""; if ( e.isImmediatePropagationStopped() ) msg = "called" else msg = "not called"; $("#stop-log").append( "<div>" + msg + "</div>" ); } $("button").click(function(event) { immediatePropStopped(event); event.stopImmediatePropagation(); //停止执行该事件 immediatePropStopped(event); }); //isImmediatePropagationStopped 判断函数或事件是否被禁止执行 function propStopped(e) { var msg = ""; if ( e.isPropagationStopped() ) msg = "called" else msg = "not called"; $("#stop-log").append( "<div>" + msg + "</div>" ); } $("button").click(function(event) { propStopped(event); event.stopPropagation(); propStopped(event); }); //isPropagationStopped? stopPropagation? $(document).bind('mousemove',function(e){ $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); }); //相对于文档的鼠标坐标 $("a").click(function(event) { event.preventDefault(); }); //阻止链接的所有行为,包括打开链接 $("a").mouseout(function(event) { alert(event.relatedTarget.nodeName); // "DIV" }); //返回与事件有关联的对象 $("button").click(function(event) { return "hey"; }); $("button").click(function(event) { $("p").html( event.result ); }); //返回鱼事件相关的结果 $("p").click(function(event){ event.stopImmediatePropagation(); }); $("p").click(function(event){ // This function won't be executed $(this).css("background-color", "#f00"); }); //停止执行某事件 $("body").click(function(event) { $("#log").html("clicked: " + event.target.nodeName); }); //返回被点击对象 event.timeStamp; //时间的时间戳,可以用来计算两次事件间隔的时间 $("a").click(function(event) { alert(event.type); // "click" }); //返回事件类型 $('#whichkey').bind('keydown',function(e){ $('#log').html(e.type + ': ' + e.which ); }); //返回按键的ascii码 $('#target').focus(function() { alert('Handler for .focus() called.'); }); //聚焦事件时 $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); }); var fo = 0, b = 0; $("input").focusout(function() { fo++; $("#fo").text("focusout fired: " + fo + "x"); }).blur(function() { b++; $("#b").text("blur fired: " + b + "x"); }); //移出焦点时 $('#target').keydown(function() { alert('Handler for .keydown() called.'); }); //按下按键时 $('#target').keypress(function() { alert('Handler for .keypress() called.'); }); //按下按键时 $('#target').keyup(function() { alert('Handler for .keyup() called.'); }); //抬起按键时 $("p").live("myCustomEvent", function(e, myName, myValue){ $(this).text("Hi there!"); $("span").stop().css("opacity", 1).text("myName = " + myName).fadeIn(30).fadeOut(1000); }); $("button").click(function () { $("p").trigger("myCustomEvent"); }); //live? $(window).load(function () { // run code }); $('#book').load(function() { // Handler for .load() called. }); //读取事件 $('#target').mousedown(function() { alert('Handler for .mousedown() called.'); }); //鼠标按下事件 $("div.overout").mouseover(function(){ $("p:first",this).text("mouse over"); $("p:last",this).text(++i); }).mouseout(function(){ $("p:first",this).text("mouse out"); }); //鼠标经过和离开 $("div.enterleave").mouseenter(function(){ $("p:first",this).text("mouse enter"); $("p:last",this).text(++n); }).mouseleave(function(){ $("p:first",this).text("mouse leave"); }); //鼠标进入和离开 $("div").mousemove(function(e){ var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; var clientCoords = "( " + e.clientX + ", " + e.clientY + " )"; $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords); $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords); }); //鼠标移动时 $('#target').mouseup(function() { alert('Handler for .mouseup() called.'); }); //鼠标松开按键时 $("p").one("click", function(){ alert( $(this).text() ); }); //只执行一次事件 var obj = { name: "John", test: function() { alert( this.name ); $("#test").unbind("click", obj.test); } }; $("#test").click( jQuery.proxy( obj, "test" ) ); // This also works: // $("#test").click( jQuery.proxy( obj.test, obj ) ); // 代理事件 $(document).ready(function() { // Handler for .ready() called. }); //当文档完全加载时 $(window).resize(function() { $('#log').append('<div>Handler for .resize() called.</div>'); }); //当窗口大小改变时 $('#target').scroll(function() { $('#log').append('<div>Handler for .scroll() called.</div>'); }); //当拖动滚动条时 $('#target').select(function() { alert('Handler for .select() called.'); }); //当选择时 $('#target').submit(function() { alert('Handler for .submit() called.'); return false; }); //当表单提交时 $("li").toggle( function () { $(this).css({"list-style-type":"disc", "color":"blue"}); }, function () { $(this).css({"list-style-type":"disc", "color":"red"}); }, function () { $(this).css({"list-style-type":"", "color":""}); } ); //切换开关,第一次点击蓝色,第二次点击是红色,第三次点击是默认色,循环 $("button:first").trigger('click'); //触发第一个button的click事件 $("input").triggerHandler("focus"); //触发focus事件 $('#foo').unbind('click', handler); //移除click事件 $("body").undelegate("#theone", "click", aClick); //移除委任的事件 $(window).unload( function () { alert("Bye now!"); } ); //窗口关闭时