jQuery快速入门.docx
《jQuery快速入门.docx》由会员分享,可在线阅读,更多相关《jQuery快速入门.docx(59页珍藏版)》请在冰点文库上搜索。
jQuery快速入门
一.jQuery语法实例
$(this).hide()
演示jQueryhide()函数,隐藏当前的HTML元素。
$("#test").hide()
演示jQueryhide()函数,隐藏id="test"的元素。
$("p").hide()
演示jQueryhide()函数,隐藏所有
元素。
$(".test").hide()
演示jQueryhide()函数,隐藏所有class="test"的元素。
jQuery语法
jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。
基础语法是:
$(selector).action()
∙美元符号定义jQuery
∙选择符(selector)“查询”和“查找”HTML元素
∙jQuery的action()执行对元素的操作
示例
$(this).hide()-隐藏当前元素
$("p").hide()-隐藏所有段落
$("p.test").hide()-隐藏所有class="test"的段落
$("#test").hide()-隐藏所有id="test"的元素
提示:
jQuery使用的语法是XPath与CSS选择器语法的组合。
在本教程接下来的章节,您将学习到更多有关选择器的语法。
文档就绪函数
您也许已经注意到在我们的实例中的所有jQuery函数位于一个documentready函数中:
$(document).ready(function(){
---jQueryfunctionsgohere----
});
这是为了防止文档在完全加载(就绪)之前运行jQuery代码。
二.jQuery选择器
在前面的章节中,我们展示了一些有关如何选取HTML元素的实例。
关键点是学习jQuery选择器是如何准确地选取您希望应用效果的元素。
jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。
选择器允许您对HTML元素组或单个元素进行操作。
在HTMLDOM术语中:
选择器允许您对DOM元素组或单个DOM节点进行操作。
jQuery元素选择器
jQuery使用CSS选择器来选取HTML元素。
$("p")选取
$("p.intro")选取所有class="intro"的
$("p#demo")选取id="demo"的第一个
jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素。
$("[href]")选取所有带有href属性的元素。
$("[href='#']")选取所有带有href值等于"#"的元素。
$("[href!
='#']")选取所有带有href值不等于"#"的元素。
$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
jQueryCSS选择器
jQueryCSS选择器可用于改变HTML元素的CSS属性。
下面的例子把所有p元素的背景颜色更改为红色:
实例
$("p").css("background-color","red");
更多的选择器实例
语法
描述
$(this)
当前HTML元素
$("p")
所有
元素
$("p.intro")
所有class="intro"的
$(".intro")
所有class="intro"的元素
$("#intro")
id="intro"的第一个元素
$("ulli:
first")
每个
$("[href$='.jpg']")
所有带有以".jpg"结尾的属性值的href属性
$("div#intro.head")
id="intro"的
三.jQuery事件函数
jQuery事件处理方法是jQuery中的核心函数。
事件处理程序指的是当HTML中发生某些事件时所调用的方法。
术语由事件“触发”(或“激发”)经常会被使用。
通常会把jQuery代码放到
$("button").click(function(){
$("p").hide();
Thisisaparagraph.
Thisisanotherparagraph.
Clickme
亲自试一试
在上面的例子中,当按钮的点击事件被触发时会调用一个函数:
$("button").click(function(){..somecode...})
该方法隐藏所有
元素:
单独文件中的函数
如果您的网站包含许多页面,并且您希望您的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实例
jQueryhide()
演示简单的jQueryhide()函数。
$("p").click(function(){
$(this).hide();
Ifyouclickonme,Iwilldisappear.
另一个hide()演示。
如何隐藏部分文本。
$(".ex.hide").click(function(){
$(this).parents(".ex").hide("slow");
div.ex
{
background-color:
#e5eecc;
padding:
7px;
border:
solid1px#c3c3c3;
}
Hideme
Contact:
HelenBennett
GardenHouseCrowtherWay
London
MarieBertrand
265,BoulevardCharonne
Paris
jQueryslideToggle()
演示简单的slidepanel效果
$(".flip").click(function(){
$(".panel").slideToggle("slow");
div.panel,p.flip
margin:
0px;
5px;
text-align:
center;
background:
div.panel
height:
120px;
display:
none;
W3School-领先的Web技术教程站点
在W3School,你可以找到你所需要的所有网站建设教程。
请点击这里
jQueryfadeTo()
演示简单的jQueryfadeTo()函数。
$("div").fadeTo("slow",0.25);
yellow;width:300px;height:300px">点击这里查看淡出效果jQueryanimate()演示简单的jQueryanimate()函数。
yellow;width:
300px;height:
300px">
点击这里查看淡出效果
jQueryanimate()
演示简单的jQueryanimate()函数。
$("#start").click(function(){
$("#box").animate({height:
300},"slow");
$("#box").animate({width:
100},"slow");
StartAnimation
style="background:#98bf21;height:100px;width:100px;position:relative">jQuery隐藏和显示通过hide()和show()两个函数,jQuery支持对HTML元素的隐藏和显示:实例$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});亲自试一试
style="background:
#98bf21;height:
100px;width:
100px;position:
relative">
jQuery隐藏和显示
通过hide()和show()两个函数,jQuery支持对HTML元素的隐藏和显示:
$("#hide").click(function(){
$("#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参数的知识。
$("p").hide(1000);
Thisisaparagraphwithlittlecontent.
Thisisanothersmallparagraph.
jQuery切换
jQuerytoggle()函数使用show()或hide()函数来切换HTML元素的可见状态。
隐藏显示的元素,显示隐藏的元素。
$(selector).toggle(speed,callback)
speed参数可以设置这些值:
$("p").toggle();
切换
callback参数是在该函数完成之后被执行的函数名称。
jQuery滑动函数-slideDown,slideUp,slideToggle
jQuery拥有以下滑动函数:
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
slideDown()实例
$(".panel").slideDown();
$(".panel").slideDown("slow");
slideUp()实例
$(".panel").slideUp()
})
$(".panel").slideUp("slow");
slideToggle()实例
$(".panel").slideToggle();
copyright@ 2008-2023 冰点文库 网站版权所有
经营许可证编号:鄂ICP备19020893号-2