元素中的所有class="head"的元素
jQuery事件函数
jQuery事件处理方法是jQuery中的核心函数。
事件处理程序指的是当HTML中发生某些事件时所调用的方法。
术语由事件“触发”(或“激发”)经常会被使用。
通常会把jQuery代码放到
部分的事件处理方法中:
实例
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Thisisaheading
Thisisaparagraph.
Thisisanotherparagraph.
亲自试一试
在上面的例子中,当按钮的点击事件被触发时会调用一个函数:
$("button").click(function(){..somecode...})
该方法隐藏所有
元素:
$("p").hide();
单独文件中的函数
如果您的网站包含许多页面,并且您希望您的jQuery函数易于维护,那么请把您的jQuery函数放到独立的.js文件中。
当我们在教程中演示jQuery时,会将函数直接添加到
部分中。
不过,把它们放到一个单独的文件中会更好,就像这样(通过src属性来引用文件):
实例
jQuery名称冲突
jQuery使用$符号作为jQuery的简介方式。
某些其他JavaScript库中的函数(比如Prototype)同样使用$符号。
jQuery使用名为noConflict()的方法来解决该问题。
varjq=jQuery.noConflict(),帮助您使用自己的名称(比如jq)来代替$符号。
亲自试一试
结论
由于jQuery是为处理HTML事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:
∙把所有jQuery代码置于事件处理函数中
∙把所有事件处理函数置于文档就绪事件处理器中
∙把jQuery代码置于单独的.js文件中
∙如果存在名称冲突,则重命名jQuery库
jQuery事件
下面是jQuery中事件方法的一些例子:
Event函数
绑定函数至
$(document).ready(function)
将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)
触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)
触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件
如需完整的参考手册,请访问我们的jQuery事件参考手册。
jQuery隐藏和显示
通过hide()和show()两个函数,jQuery支持对HTML元素的隐藏和显示:
实例
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
亲自试一试
hide()和show()都可以设置两个可选参数:
speed和callback。
语法:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
speed参数规定显示或隐藏的速度。
可以设置这些值:
"slow","fast","normal"或毫秒。
callback参数是在hide或show函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
实例
$("button").click(function(){
$("p").hide(1000);
});
亲自试一试
jQuery切换
jQuerytoggle()函数使用show()或hide()函数来切换HTML元素的可见状态。
隐藏显示的元素,显示隐藏的元素。
语法:
$(selector).toggle(speed,callback)
speed参数可以设置这些值:
"slow","fast","normal"或毫秒。
实例
$("button").click(function(){
$("p").toggle();
});
亲自试一试
callback参数是在该函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
jQuery滑动函数-slideDown,slideUp,slideToggle
jQuery拥有以下滑动函数:
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
speed参数可以设置这些值:
"slow","fast","normal"或毫秒。
callback参数是在该函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
slideDown()实例
$(".flip").click(function(){
$(".panel").slideDown();
});
亲自试一试
slideUp()实例
$(".flip").click(function(){
$(".panel").slideUp()
})
亲自试一试
slideToggle()实例
$(".flip").click(function(){
$(".panel").slideToggle();
});
亲自试一试
jQueryFade函数-fadeIn(),fadeOut(),fadeTo()
jQuery拥有以下fade函数:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
speed参数可以设置这些值:
"slow","fast","normal"或毫秒。
fadeTo()函数中的opacity参数规定减弱到给定的不透明度。
callback参数是在该函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
fadeTo()实例
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
亲自试一试
fadeOut()实例
$("button").click(function(){
$("div").fadeOut(4000);
});
亲自试一试
jQuery自定义动画
jQuery函数创建自定义动画的语法:
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是params。
它定义产生动画的CSS属性。
可以同时设置多个此类属性:
animate({width:
"70%",opacity:
0.4,marginLeft:
"0.6in",fontSize:
"3em"});
第二个参数是duration。
它定义用来应用到动画的时间。
它设置的值是:
"slow","fast","normal"或毫秒。
实例1
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:
300},"slow");
$("#box").animate({width:
300},"slow");
$("#box").animate({height:
100},"slow");
$("#box").animate({width:
100},"slow");
});
});
亲自试一试
实例2
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:
"100px"},"slow");
$("#box").animate({fontSize:
"3em"},"slow");
});
});
亲自试一试
HTML元素默认是静态定位,且无法移动。
如需使元素可以移动,请把CSS的position设置为relative或absolute。
jQuery效果-来自本页
函数
描述
$(selector).hide()
隐藏被选元素
$(selector).show()
显示被选元素
$(selector).toggle()
切换(在隐藏与显示之间)被选元素
$(selector).slideDown()
向下滑动(显示)被选元素
$(selector).slideUp()
向上滑动(隐藏)被选元素
$(selector).slideToggle()
对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()
淡入被选元素
$(selector).fadeOut()
淡出被选元素
$(selector).fadeTo()
把被选元素淡出为给定的不透明度
$(selector).animate()
对被选元素执行自定义动画
Callback函数在当前动画100%完成之后执行。
jQuery动画的问题
许多jQuery函数涉及动画。
这些函数也许会将speed或duration作为可选参数。
例子:
$("p").hide("slow")
speed或duration参数可以设置许多不同的值,比如"slow","fast","normal"或毫秒。
实例
$("button").click(function(){
$("p").hide(1000);
});
亲自试一试
由于JavaScript语句(指令)是逐一执行的-按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。
为了避免这个情况,您可以以参数的形式添加Callback函数。
jQueryCallback函数
当动画100%完成后,即调用Callback函数。
典型的语法:
$(selector).hide(speed,callback)
callback参数是一个在hide操作完成后被执行的函数。
错误(没有callback)
$("p").hide(1000);
alert("Theparagraphisnowhidden");
亲自试一试
正确(有callback)
$("p").hide(1000,function(){
alert("Theparagraphisnowhidden");
});
亲自试一试
jQuery包含很多供改变和操作HTML的强大函数。
改变HTML内容
语法
$(selector).html(content)
html()函数改变所匹配的HTML元素的内容(innerHTML)。
实例
$("p").html("W3School");
亲自试一试
添加HTML内容
语法
$(selector).append(content)
append()函数向所匹配的HTML元素内部追加内容。
语法
$(selector).prepend(content)
prepend()函数向所匹配的HTML元素内部预置(Prepend)内容。
实例
$("p").append("W3School");
亲自试一试
语法
$(selector).after(content)
after()函数在所有匹配的元素之后插入HTML内容。
语法
$(selector).before(content)
before()函数在所有匹配的元素之前插入HTML内容。
实例
$("p").after("W3School.");
亲自试一试
jQueryHTML操作-来自本页
函数
描述
$(selector).html(content)
改变被选元素的(内部)HTML
$(selector).append(content)
向被选元素的(内部)HTML追加内容
$(selector).prepend(content)
向被选元素的(内部)HTML“预置”(Prepend)内容
$(selector).after(content)
在被选元素之后添加HTML
$(selector).before(content)
在被选元素之前添加HTML
如需完整的参考手册,请访问我们的jQueryHTML操作参考手册。
jQueryCSS操作
jQuery拥有三种用于CSS操作的重要函数:
∙$(selector).css(name,value)
∙$(selector).css({properties})
∙$(selector).css(name)
CSS操作实例
函数css(name,value)为所有匹配元素的给定CSS属性设置值:
实例
$(selector).css(name,value)
$("p").css("background-color","red");
亲自试一试
函数css({properties})同时为所有匹配元素的一系列CSS属性设置值:
实例
$(selector).css({properties})
$("p").css({"background-color":
"red","font-size":
"200%"});
亲自试一试
函数css(name)返回指定的CSS属性的值:
实例
$(selector).css(name)
$(this).css("background-color");
亲自试一试
jQuerySize操作
jQuery拥有两种用于尺寸操作的重要函数:
∙$(selector).height(value)
∙$(selector).width(value)
Size操作实例
函数height(value)设置所有匹配元素的高度:
实例
$(selector).height(value)
$("#id100").height("200px");
亲自试一试
函数width(value)设置所有匹配元素的宽度:
实例
$(selector).width(value)
$("#id200").width("300px");
亲自试一试
jQueryCSS函数-来自本页
CSS属性
描述
$(selector).css(name,value)
为匹配元素设置样式属性的值
$(selector).css({properties})
为匹配元素设置多个样式属性
$(selector).css(name)
获得第一个匹配元素的样式属性值
$(selector).height(value)
设置匹配元素的高度
$(selector).width(value)
设置匹配元素的宽度
如需完整的参考手册,请访问我们的jQueryCSS函数参考手册。
jQuery拥有供AJAX开发的丰富函数(方法)库。
jQueryAJAX实例
AJAXisnotaprogramminglanguage.
Itisjustatechniqueforcreatingbetterandmoreinteractivewebapplications.
点击按钮,改变内容亲自试一试
上面的例子摘自我们的AJAX教程,但使用jQuery进行了修改。
什么是AJAX?
AJAX=AsynchronousJavaScriptandXML.
AJAX是一种创建快速动态网页的技术。
AJAX通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。
这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。
您可以在我们的AJAX教程中学习更多有关AJAX的知识。
AJAX和jQuery
jQuery提供了用于AJAX开发的丰富函数(方法)库。
通过jQueryAJAX,使用HTTPGet和HTTPPost,您都可以从远程服务器请求TXT、HTML、XML或JSON。
而且您可以直接把远程数据载入网页的被选HTML元素中!
写的更少,做的更多
jQuery的load函数是一种简单的(但很强大的)AJAX函数。
它的语法如下:
$(selector).load(url,data,callback)
请使用selector来定义要改变的HTML元素,使用url参数来指定数据的web地址。
亲自试一试
只有当您希望向服务器发送数据时,才需要使用data参数。
只有当您需要在执行完毕之后触发一个函数时,您才需要使用callback参数。
LowLevelAJAX
$.ajax(options)是低层级AJAX函数的语法。