层叠样式表 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!"); } ); //窗口关闭时










