JQUERY语法详解

JQUERY语法详解jQuery语法您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。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元素?jQueryaction()执行对元素的操作实例$(this).hide()-隐藏当前元素$(p).hide()-隐藏所有段落$(p.test).hide()-隐藏所有class=test的段落$(#test).hide()-隐藏所有id=test的元素提示：jQuery使用的语法是XPath与CSS选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。文档就绪函数您也许已经注意到在我们的实例中的所有jQuery函数位于一个documentready函数中：这是为了防止文档在完全加载（就绪）之前运行jQuery代码。jQuery选择器选择器允许您对元素组或单个元素进行操作。jQuery选择器在前面的章节中，我们展示了一些有关如何选取HTML元素的实例。关键点是学习jQuery选择器是如何准确地选取您希望应用效果的元素。jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。选择器允许您对HTML元素组或单个元素进行操作。在HTMLDOM术语中：选择器允许您对DOM元素组或单个DOM节点进行操作。jQuery元素选择器jQuery使用CSS选择器来选取HTML元素。$(p)选取元素。$(p.intro)选取所有class=intro的元素。$(p#demo)选取id=demo的第一个元素。var$test_a=$(.test:hidden);//选取class为“test”的元素里面的隐藏元素（后代选择器）var$test_b=$(.test:hidden);//选取隐藏的class为“test”的元素有的选择器的用法，必须是空格，如果不带空格的话，那就取不到元素，比如：$(select:selected).length;//不管任何时候，这个选择器都取不到元素，这个length必然是0$(select:selected);//这样才是正确的有的选择器的用法，必须不带空格，如果带空格的话，那就取不到元素，比如：$(input:checked).length;//不管任何时候，这个选择器都取不到元素，这个length必然是0jQuery属性选择器jQuery使用XPath表达式来选择带有给定属性的元素。$([href])选取所有带有href属性的元素。$([href='#'])选取所有带有href值等于#的元素。$([href!='#'])选取所有带有href值不等于#的元素。$([href$='.jpg'])选取所有href值以.jpg结尾的元素。jQueryCSS选择器jQueryCSS选择器可用于改变HTML元素的CSS属性。下面的例子把所有p元素的背景颜色更改为红色：实例jQuery参考手册-选择器jQuery事件jQuery是为事件处理特别设计的。jQuery事件函数jQuery事件处理函数是jQuery中的核心函数。事件处理函数是当HTML中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。在您由于jQuery是为事件处理特别设计的，通常是把jQuery代码置于网页实例TIY在上面的例子中，定义了一个处理HTML按钮的点击事件的click函数：click函数内部的代码隐藏所有元素：所有事件函数都在文档自身的“事件处理器”内部进行定义：如果您的网站包含许多页面，并且您希望您的jQuery函数易于维护，那么请把您的jQuery函数放到独立的.js文件中。当我们在教程中演示jQuery时，会将函数直接添加到实例jQuery使用$符号作为jQuery的简介方式。某些其他JavaScript库中的函数（比如Prototype）同样使用$符号。jQuery使用名为noConflict()的方法来解决该问题。varjq=jQuery.noConflict()，帮助您使用自己的名称（比如jq）来代替$符号。TIY结论由于jQuery是为处理HTML事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：?把所有jQuery代码置于事件处理函数中?把所有事件处理函数置于文档就绪事件处理器中?把jQuery代码置于单独的.js文件中?如果存在名称冲突，则重命名jQuery库jQuery参考手册-事件jQuery事件方法事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。触发实例：上面的例子将触发id=demo的button元素的click事件。绑定实例：上面的例子会在点击id=demo的按钮时隐藏所有图像。事件处理方法把事件处理器绑定至匹配元素。jQuery效果jQuery是为事件处理特别设计的。jQuery事件函数隐藏、显示、切换、滑动以及动画。WOW!实例jQueryhide()//隐藏没有渐变演示简单的jQueryhide()函数。jQueryhide()//渐变隐藏另一个hide()演示。如何隐藏部分文本。jQueryslideToggle()//切换隐藏（渐变滑动）演示简单的slidepanel效果。jQueryfadeTo()//颜色渐变演示简单的jQueryfadeTo()函数。jQueryanimate()//大小渐变演示简单的jQueryanimate()函数。jQuery隐藏和显示通过hide()和show()两个函数，jQuery支持对HTML元素的隐藏和显示：hide()和show()都可以设置两个可选参数：speed和callback。语法：callback参数是在hide或show函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关callback参数的知识。speed参数可以设置这些值：slow,fast,normal或milliseconds：实例TIYjQuery切换jQuerytoggle()函数使用show()或hide()函数来切换HTML元素的可见状态。隐藏显示的元素，显示隐藏的元素。语法：speed参数可以设置这些值：slow,fast,normal或毫秒。实例TIYcallback参数是在hide或show函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关callback参数的知识。jQuery滑动函数-slideDown,slideUp,slideTogglejQuery拥有以下滑动函数：speed参数可以设置这些值：slow,fast,normal或毫秒。callback参数是在hide或show函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关callback参数的知识。slideDown()实例TIYslideUp()实例TIYslideToggle()实例TIYjQueryFade函数-fadeIn(),fadeOut(),fadeTo()jQuery拥有以下fade函数：speed参数可以设置这些值：slow,fast,normal或毫秒。fadeTo()函数中的opacity参数规定减弱到给定的不透明度。callback参数是在hide或show函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关callback参数的知识。fadeTo()实例TIYfadeOut()实例TIYjQuery自定义动画jQuery函数创建自定义动画的语法：关键的参数是params。它定义了产生动画的属性。可以同时设置多个此类属性：第二个参数是duration。它定义用来应用于动画的时间。它设置的值是：slow,fast,normal或毫秒。实例1TIY实例2TIYHTML元素默认是静态定位，且无法移动。如需使元素可以移动，请把CSS的position设置为relative或absolute。jQuery参考手册-效果jQueryCallback函数动画创造了对callback函数的需求。许多jQuery函数涉及动画。这些函数也许会将speed或duration作为可选参数。例子：$(p).hide(slow)speed或duration参数可以设置许多不同的值，比如slow,fast,normal或毫秒。实例TIY由于JavaScript语句（指令）是逐一执行的-按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，您可以以参数的形式添加Callback函数。jQueryCallback函数当动画100%完成后，即调用Callback函数。典型的语法：callback参数是一个在hide操作完成后被执行的函数。错误（没有callback）TIY正确（有callback）TIY结论：如果您希望在一个涉及动画的函数之后来执行语句，请使用callback函数。jQueryHTML操作jQuery包含很多供改变和操作HTML的强大函数。改变HTML内容语法html()函数改变所匹配的HTML元素的内容（innerHTML）。实例TIY添加HTML内容语法append()函数向所匹配的HTML元素内部追加内容。语法prepend()函数向所匹配的HTML元素内部预置（Prepend）内容。语法after()函数在所有匹配的元素之后插入HTML内容。语法before()函数在所有匹配的元素之前插入HTML内容。实例jQuery参考手册-文档操作jQuery文档操作方法这些方法对于XML文档和HTML文档均是适用的，除了：html()。jQueryCSS函数jQueryCSS操作jQuery拥有三种供CSS操作的重要函数：?$(selector).css(name,value)?$(selector).css({properties})?$(selector).css(name)CSS操作实例函数css(name,value)为所有匹配元素的给定CSS属性设置值：实例TIY函数css({properties})同时为所有匹配元素的一系列CSS属性设置值：实例TIY函数css(name)返回指定的CSS属性的值：实例TIYjQuerySize操作jQuery拥有两种供尺寸操作的重要函数：?$(selector).height(value)?$(selector).width(value)Size操作实例函数height(value)设置所有匹配元素的高度：实例TIY函数width(value)设置所有匹配元素的宽度：实例jQuery参考手册-CSS操作jQueryCSS操作函数下面列出的这些方法设置或返回元素的CSS相关属性。CSS属性描述css()设置或返回匹配元素的样式属性。height()设置或返回匹配元素的高度。offset()返回第一个匹配元素相对于文档的位置。offsetParent()返回最近的定位祖先元素。position()返回第一个匹配元素相对于父元素的位置。scrollTop()设置或返回匹配元素相对滚动条顶部的偏移。scrollLeft()设置或返回匹配元素相对滚动条左侧的偏移。width()设置或返回匹配元素的宽度。jQueryAJAX函数jQuery拥有供AJAX开发的丰富函数（方法）库。jQueryAJAX实例通过AJAX来改变文本ChangeContent