欢迎莅临阿Q的项目

专业WP商业设计开发销售中心

jQuery 自学手册

花了两天时间系统性的学习jQuery,获益匪浅。之前摸着石头写的一些jQuery程序也得到了相应的改良,以下便是我这两天的学习心得...

层叠样式表 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!"); } ); //窗口关闭时
如果喜欢本文,请分享给朋友们