JQuery详细语法介绍_第1页
JQuery详细语法介绍_第2页
JQuery详细语法介绍_第3页
JQuery详细语法介绍_第4页
JQuery详细语法介绍_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

jQuery语法介绍通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。jQuery语法实例$(this).hide()演示jQueryhide()函数，隐藏当前的HTML元素。$("#test").hide()演示jQueryhide()函数，隐藏id="test"的元素。$("p").hide()演示jQueryhide()函数，隐藏所有<p>元素。$(".test").hide()演示jQueryhide()函数，隐藏所有class="test"的元素。jQuery语法jQuery语法是为HTML元素的选取编制，可以对元素执行某些操作。基础语法是：$(selector).action()美元符号定义jQuery选择符（selector）“查询”和“查找”HTML元素jQueryaction()执行对元素的操作实例$(this).hide()-隐藏当前元素$("p").hide()-隐藏所有段落$("p.test").hide()-隐藏所有class="test"的段落$("#test").hide()-隐藏所有id="test"的元素提示：jQuery使用的语法是XPath与CSS选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。文档就绪函数您也许已经注意到在我们的实例中的所有jQuery函数位于一个documentready函数中：$(document).ready(function(){---jQueryfunctionsgohere----});这是为了防止文档在完全加载（就绪）之前运行jQuery代码。jQuery选择器选择器允许您对元素组或单个元素进行操作。jQuery选择器在前面的章节中，我们展示了一些有关如何选取HTML元素的实例。关键点是学习jQuery选择器是如何准确地选取您希望应用效果的元素。jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。选择器允许您对HTML元素组或单个元素进行操作。在HTMLDOM术语中：选择器允许您对DOM元素组或单个DOM节点进行操作。jQuery元素选择器jQuery使用CSS选择器来选取HTML元素。$("p")选取<p>元素。$("ro")选取所有class="intro"的<p>元素。$("p#demo")选取id="demo"的第一个<p>元素。jQuery属性选择器jQuery使用XPath表达式来选择带有给定属性的元素。$("[href]")选取所有带有href属性的元素。$("[href='#']")选取所有带有href值等于"#"的元素。$("[href!='#']")选取所有带有href值不等于"#"的元素。$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。jQueryCSS选择器jQueryCSS选择器可用于改变HTML元素的CSS属性。下面的例子把所有p元素的背景颜色更改为红色：实例$("p").css("background-color","red");jQuery参考手册-选择器jQuery选择器选择器实例选取\o"jQuery*选择器"*$("*")所有元素\o"jQuery#选择器"#id$("#lastname")id=lastname的元素\o"jQuery.选择器".class$(".intro")所有class="intro"的元素\o"jQueryelement选择器"element$("p")所有<p>元素.class.class$(".intro.demo")所有class=intro且class=demo的元素

\o"jQuery:first选择器":first$("p:first")第一个<p>元素\o"jQuery:last选择器":last$("p:last")最后一个<p>元素\o"jQuery:even选择器":even$("tr:even")所有偶数<tr>元素\o"jQuery:odd选择器":odd$("tr:odd")所有奇数<tr>元素

\o"jQuery:eq()选择器":eq(index)$("ulli:eq(3)")列表中的第四个元素（index从0开始）\o"jQuery:gt选择器":gt(no)$("ulli:gt(3)")列出index大于3的元素\o"jQuery:lt选择器":lt(no)$("ulli:lt(3)")列出index小于3的元素:not(selector)$("input:not(:empty)")所有不为空的input元素

\o"jQuery:header选择器":header$(":header")所有标题元素<h1><h2>...\o"jQuery:animated选择器":animated

所有动画元素

\o"jQuery:contains选择器":contains(text)$(":contains('W3School')")包含文本的所有元素\o"jQuery:empty选择器":empty$(":empty")无子（元素）节点的所有元素:hidden$("p:hidden")所有隐藏的<p>元素\o"jQuery:visible选择器":visible$("table:visible")所有可见的表格

s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素

\o"jQuery[attribute]选择器"[attribute]$("[href]")所有带有href属性的元素\o"jQuery[attribute=value]选择器"[attribute=value]$("[href='#']")所有href属性的值等于"#"的元素\o"jQuery[attribute!=value]选择器"[attribute!=value]$("[href!='#']")所有href属性的值不等于"#"的元素\o"jQuery[attribute$=value]选择器"[attribute$=value]$("[href$='.jpg']")所有href属性的值包含".jpg"的元素

\o"jQuery:input选择器":input$(":input")所有<input>元素\o"jQuery:text选择器":text$(":text")所有type="text"的<input>元素\o"jQuery:password选择器":password$(":password")所有type="password"的<input>元素\o"jQuery:radio选择器":radio$(":radio")所有type="radio"的<input>元素\o"jQuery:checkbox选择器":checkbox$(":checkbox")所有type="checkbox"的<input>元素\o"jQuery:submit选择器":submit$(":submit")所有type="submit"的<input>元素\o"jQuery:reset选择器":reset$(":reset")所有type="reset"的<input>元素\o"jQuery:button选择器":button$(":button")所有type="button"的<input>元素\o"jQuery:image选择器":image$(":image")所有type="image"的<input>元素\o"jQuery:file选择器":file$(":file")所有type="file"的<input>元素

\o"jQuery:enabled选择器":enabled$(":enabled")所有激活的input元素\o"jQuery:disabled选择器":disabled$(":disabled")所有禁用的input元素\o"jQuery:selected选择器":selected$(":selected")所有被选取的input元素\o"jQuery:checked选择器":checked$(":checked")所有被选中的input元素jQuery事件jQuery是为事件处理特别设计的。jQuery事件函数jQuery事件处理函数是jQuery中的核心函数。事件处理函数是当HTML中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。在您<head>中由于jQuery是为事件处理特别设计的，通常是把jQuery代码置于网页<head>部分的“事件处理”函数中：实例<html><head><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").hide();});});</script></head><body><h2>Thisisaheading</h2><p>Thisisaparagraph.</p><p>Thisisanotherparagraph.</p><buttontype="button">Clickme</button></body></html>TIY在上面的例子中，定义了一个处理HTML按钮的点击事件的click函数：$("button").click(function(){..somecode...})click函数内部的代码隐藏所有<p>元素：$("p").hide();所有事件函数都在文档自身的“事件处理器”内部进行定义：$(document).ready(function(){..somecode...})单独文件中的函数如果您的网站包含许多页面，并且您希望您的jQuery函数易于维护，那么请把您的jQuery函数放到独立的.js文件中。当我们在教程中演示jQuery时，会将函数直接添加到<head>部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过src属性来引用文件）：实例<head><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript"src="my_jquery_functions.js"></script></head>jQuery名称冲突jQuery使用$符号作为jQuery的简介方式。某些其他JavaScript库中的函数（比如Prototype）同样使用$符号。jQuery使用名为noConflict()的方法来解决该问题。varjq=jQuery.noConflict()，帮助您使用自己的名称（比如jq）来代替$符号。TIY结论由于jQuery是为处理HTML事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：把所有jQuery代码置于事件处理函数中把所有事件处理函数置于文档就绪事件处理器中把jQuery代码置于单独的.js文件中如果存在名称冲突，则重命名jQuery库jQuery参考手册-事件jQuery事件方法事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。触发实例：$("button#demo").click()上面的例子将触发id="demo"的button元素的click事件。绑定实例：$("button#demo").click(function(){$("img").hide()})上面的例子会在点击id="demo"的按钮时隐藏所有图像。方法描述\o"jQuery事件-ready()方法"ready()文档就绪事件（当HTML文档就绪可用时）\o"jQuery事件-blur()方法"blur()触发、或将函数绑定到指定元素的blur事件\o"jQuery事件-change()方法"change()触发、或将函数绑定到指定元素的change事件\o"jQuery事件-click()方法"click()触发、或将函数绑定到指定元素的click事件\o"jQuery事件-dblclick()方法"dblclick()触发、或将函数绑定到指定元素的doubleclick事件\o"jQuery事件-error()方法"error()触发、或将函数绑定到指定元素的error事件\o"jQuery事件-focus()方法"focus()触发、或将函数绑定到指定元素的focus事件\o"jQuery事件-keydown()方法"keydown()触发、或将函数绑定到指定元素的keydown事件\o"jQuery事件-keypress()方法"keypress()触发、或将函数绑定到指定元素的keypress事件\o"jQuery事件-keyup()方法"keyup()触发、或将函数绑定到指定元素的keyup事件load()触发、或将函数绑定到指定元素的load事件\o"jQuery事件-mousedown()方法"mousedown()触发、或将函数绑定到指定元素的mousedown事件\o"jQuery事件-mouseenter()方法"mouseenter()触发、或将函数绑定到指定元素的mouseenter事件\o"jQuery事件-mouseleave()方法"mouseleave()触发、或将函数绑定到指定元素的mouseleave事件\o"jQuery事件-mousemove()方法"mousemove()触发、或将函数绑定到指定元素的mousemove事件\o"jQuery事件-mouseout()方法"mouseout()触发、或将函数绑定到指定元素的mouseout事件\o"jQuery事件-mouseover()方法"mouseover()触发、或将函数绑定到指定元素的mouseover事件\o"jQuery事件-mouseup()方法"mouseup()触发、或将函数绑定到指定元素的mouseup事件\o"jQuery事件-resize()方法"resize()触发、或将函数绑定到指定元素的resize事件\o"jQuery事件-scroll()方法"scroll()触发、或将函数绑定到指定元素的scroll事件\o"jQuery事件-select()方法"select()触发、或将函数绑定到指定元素的select事件\o"jQuery事件-submit()方法"submit()触发、或将函数绑定到指定元素的submit事件unload()触发、或将函数绑定到指定元素的unload事件jQuery事件处理方法事件处理方法把事件处理器绑定至匹配元素。方法触发$(selector).bind(event)向匹配元素添加一个或更多事件处理器$(selector).delegate(selector,event)向匹配元素添加一个事件处理器，现在或将来$(selector).die()移除所有通过live()函数添加的事件处理器$(selector).live(event)向匹配元素添加一个事件处理器，现在或将来$(selector).one(event)向匹配元素添加一个事件处理器。该处理器只能触发一次。$(selector).unbind(event)从匹配元素移除一个被添加的事件处理器$(selector).undelegate(event)从匹配元素移除一个被添加的事件处理器，现在或将来\o"jQuery事件-trigger()方法"$(selector).trigger(event)所有匹配元素的指定事件$(selector).triggerHandler(event)第一个被匹配元素的指定事件jQuery效果jQuery是为事件处理特别设计的。jQuery事件函数隐藏、显示、切换、滑动以及动画。WOW!ClickHeretoShow/HidePanel实例jQueryhide()演示简单的jQueryhide()函数。jQueryhide()另一个hide()演示。如何隐藏部分文本。jQueryslideToggle()演示简单的slidepanel效果。jQueryfadeTo()演示简单的jQueryfadeTo()函数。jQueryanimate()演示简单的jQueryanimate()函数。jQuery隐藏和显示通过hide()和show()两个函数，jQuery支持对HTML元素的隐藏和显示：实例$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});TIYhide()和show()都可以设置两个可选参数：speed和callback。语法：$(selector).hide(speed,callback)$(selector).show(speed,callback)callback参数是在hide或show函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关callback参数的知识。speed参数可以设置这些值："slow","fast","normal"或milliseconds：实例$("button").click(function(){$("p").hide(1000);});TIYjQuery切换jQuerytoggle()函数使用show()或hide()函数来切换HTML元素的可见状态。隐藏显示的元素，显示隐藏的元素。语法：$(selector).toggle(speed,callback)speed参数可以设置这些值："slow","fast","normal"或毫秒。实例$("button").click(function(){$("p").toggle();});TIYcallback参数是在hide或show函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关callback参数的知识。jQuery滑动函数-slideDown,slideUp,slideTogglejQuery拥有以下滑动函数：$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)speed参数可以设置这些值："slow","fast","normal"或毫秒。callback参数是在hide或show函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关callback参数的知识。slideDown()实例$(".flip").click(function(){$(".panel").slideDown();});TIYslideUp()实例$(".flip").click(function(){$(".panel").slideUp()})TIYslideToggle()实例$(".flip").click(function(){$(".panel").slideToggle();});TIYjQueryFade函数-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参数是在hide或show函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关callback参数的知识。fadeTo()实例$("button").click(function(){$("div").fadeTo("slow",0.25);});TIYfadeOut()实例$("button").click(function(){$("div").fadeOut(4000);});TIYjQuery自定义动画jQuery函数创建自定义动画的语法：$(selector).animate({params},[duration],[easing],[callback])关键的参数是params。它定义了产生动画的属性。可以同时设置多个此类属性：animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});第二个参数是duration。它定义用来应用于动画的时间。它设置的值是："slow","fast","normal"或毫秒。实例1<scripttype="text/javascript">$(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");});});</script>TIY实例2<scripttype="text/javascript">$(document).ready(function(){$("#start").click(function(){$("#box").animate({left:"100px"},"slow");$("#box").animate({fontSize:"3em"},"slow");});});</script>TIYHTML元素默认是静态定位，且无法移动。如需使元素可以移动，请把CSS的position设置为relative或absolute。jQuery参考手册-效果jQuery效果函数Hide/Show描述\o"jQuery效果-show()方法"show()显示被选的元素\o"jQuery效果-hide()方法"hide()隐藏被选的元素\o"jQuery效果-toggle()方法"toggle()对被选元素进行隐藏和显示的切换

Slide

\o"jQuery效果-slideDown()方法"slideDown()通过调整高度来滑动显示被选元素\o"jQuery效果-slideUp()方法"slideUp()通过调整高度来滑动隐藏被选元素\o"jQuery效果-slideToggle()方法"slideToggle()对被选元素进行滑动隐藏和滑动显示的切换

Fadein/out

\o"jQuery效果-fadeIn()方法"fadeIn()淡入被选元素至完全不透明\o"jQuery效果-fadeOut()方法"fadeOut()淡出被选元素至完全不透明\o"jQuery效果-fadeTo()方法"fadeTo()把被选元素减弱至给定的不透明度

Animation

\o"jQuery效果-animate()方法"animate()对被选元素应用“自定义”的动画\o"jQuery效果-stop()方法"stop()停止在被选元素上运行动画

Queue

\o"jQuery效果-clearQueue()方法"clearQueue()对被选元素移除所有排队的函数（仍未运行的）delay()对被选元素的所有排队函数（仍未运行）设置延迟dequeue()运行被选元素的下一个排队函数queue()显示被选元素的排队函数jQueryCallback函数动画创造了对callback函数的需求。ClickHeretoShow/HidePaneljQuery动画的问题许多jQuery函数涉及动画。这些函数也许会将speed或duration作为可选参数。例子：$("p").hide("slow")speed或duration参数可以设置许多不同的值，比如"slow","fast","normal"或毫秒。实例$("button").click(function(){$("p").hide(1000);});TIY由于JavaScript语句（指令）是逐一执行的-按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，您可以以参数的形式添加Callback函数。jQueryCallback函数当动画100%完成后，即调用Callback函数。典型的语法：$(selector).hide(speed,callback)callback参数是一个在hide操作完成后被执行的函数。错误（没有callback）$("p").hide(1000);alert("Theparagraphisnowhidden");TIY正确（有callback）$("p").hide(1000,function(){alert("Theparagraphisnowhidden");});TIY结论：如果您希望在一个涉及动画的函数之后来执行语句，请使用callback函数。jQueryHTML操作jQuery包含很多供改变和操作HTML的强大函数。改变HTML内容语法$(selector).html(content)html()函数改变所匹配的HTML元素的内容（innerHTML）。实例$("p").html("W3School");TIY添加HTML内容语法$(selector).append(content)append()函数向所匹配的HTML元素内部追加内容。语法$(selector).prepend(content)prepend()函数向所匹配的HTML元素内部预置（Prepend）内容。实例$("p").append("W3School");TIY语法$(selector).after(content)after()函数在所有匹配的元素之后插入HTML内容。语法$(selector).before(content)before()函数在所有匹配的元素之前插入HTML内容。实例$("p").after("W3School.");jQuery参考手册-文档操作jQuery文档操作方法这些方法对于XML文档和HTML文档均是适用的，除了：html()。方法描述\o"jQueryHTML-addClass()方法"addClass()向匹配的元素添加指定的类名。\o"jQueryHTML-after()方法"after()在匹配的元素之后插入内容。\o"jQueryHTML-append()方法"append()向匹配的元素内部追加内容。\o"jQueryHTML-appendTo()方法"appendTo()向匹配的元素内部追加内容。\o"jQueryHTML-attr()方法"attr()设置或返回匹配元素的属性和值。\o"jQueryHTML-before()方法"before()在每个匹配的元素之前插入内容。\o"jQueryHTML-clone()方法"clone()创建匹配元素集合的副本。\o"jQueryHTML-detach()方法"detach()从DOM中移除匹配元素集合。\o"jQueryHTML-empty()方法"empty()删除匹配的元素集合中所有的子节点。\o"jQueryHTML-hasClass()方法"hasClass()检查匹配的元素是否拥有指定的类。\o"jQueryHTML-html()方法"html()设置或返回匹配的元素集合中的HTML内容。\o"jQueryHTML-insertAfter()方法"insertAfter()把匹配的元素插入到另一个指定的元素集合的后面。\o"jQueryHTML-insertBefore()方法"insertBefore()把匹配的元素插入到另一个指定的元素集合的前面。\o"jQueryHTML-prepend()方法"prepend()向每个匹配的元素内部前置内容。\o"jQueryHTML-prependTo()方法"prependTo()向每个匹配的元素内部前置内容。\o"jQueryHTML-remove()方法"remove()移除所有匹配的元素。\o"jQueryHTML-removeAttr()方法"removeAttr()从所有匹配的元素中移除指定的属性。\o"jQueryHTML-removeClass()方法"removeClass()从所有匹配的元素中删除全部或者指定的类。\o"jQueryHTML-replaceAll()方法"replaceAll()用匹配的元素替换所有匹配到的元素。\o"jQueryHTML-replaceWith()方法"replaceWith()用新内容替换匹配的元素。\o"jQueryHTML-text()方法"text()设置或返回匹配元素的内容。\o"jQueryHTML-toggleClass()方法"toggleClass()从匹配的元素中添加或删除一个类。\o"jQueryHTML-unwrap()方法"unwrap()移除并替换指定元素的父元素。\o"jQueryHTML-val()方法"val()设置或返回匹配元素的值。\o"jQueryHTML-wrap()方法"wrap()把匹配的元素用指定的内容或元素包裹起来。\o"jQueryHTML-wrapAll()方法"wrapAll()把所有匹配的元素用指定的内容或元素包裹起来。\o"jQueryHTML-wrapinner()方法"wrapinner()将每一个匹配的元素的子内容用指定的内容或元素包裹起来。jQueryCSS函数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","yellow");TIY函数css({properties})同时为所有匹配元素的一系列CSS属性设置值：实例$(selector).css({properties})$("p").css({"background-color":"yellow","font-size":"200%"});TIY函数css(name)返回指定的CSS属性的值：实例$(selector).css(name)$(this).css("background-color");TIYjQuerySize操作jQuery拥有两种供尺寸操作的重要函数：$(selector).height(value)$(selector).width(value)Size操作实例函数height(value)设置所有匹配元素的高度：实例$(selector).height(value)$("#id100").height("200px");TIY函数width(value)设置所有匹配元素的宽度：实例$(selector).width(value)$("#id200").width("300px");jQuery参考手册-CSS操作jQueryCSS操作函数下面列出的这些方法设置或返回元素的CSS相关属性。CSS属性描述\o"jQueryCSS操作-css()方法"css()设置或返回匹配元素的样式属性。\o"jQueryCSS操作-height()方法"height()设置或返回匹配元素的高度。\o"jQueryCSS操作-offset()方法"offset()返回第一个匹配元素相对于

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论