完整版(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元素。$(p.intro)选取所有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选择器选择器实例选取*$(*)所有元素#id$(#lastname)id=lastname的元素.class$(.intro)所有class=intro的元素element$(p)所有p元素.class.class$(.intro.demo)所有class=intro且class=demo的元素:first$(p:first)第一个p元素:last$(p:last)最后一个p元素:even$(tr:even)所有偶数tr元素:odd$(tr:odd)所有奇数tr元素:eq(index)$(ulli:eq(3))列表中的第四个元素（index从0开始）:gt(no)$(ulli:gt(3))列出index大于3的元素:lt(no)$(ulli:lt(3))列出index小于3的元素:not(selector)$(input:not(:empty))所有不为空的input元素:header$(:header)所有标题元素h1h2...:animated所有动画元素:contains(text)$(:contains('W3School'))包含文本的所有元素:empty$(:empty)无子（元素）节点的所有元素:hidden$(p:hidden)所有隐藏的p元素:visible$(table:visible)所有可见的表格s1,s2,s3$(th,td,.intro)所有带有匹配选择的元素[attribute]$([href])所有带有href属性的元素[attribute=value]$([href='#'])所有href属性的值等于#的元素[attribute!=value]$([href!='#'])所有href属性的值不等于#的元素[attribute$=value]$([href$='.jpg'])所有href属性的值包含.jpg的元素:input$(:input)所有input元素:text$(:text)所有type=text的input元素:password$(:password)所有type=password的input元素:radio$(:radio)所有type=radio的input元素:checkbox$(:checkbox)所有type=checkbox的input元素:submit$(:submit)所有type=submit的input元素:reset$(:reset)所有type=reset的input元素:button$(:button)所有type=button的input元素:image$(:image)所有type=image的input元素:file$(:file)所有type=file的input元素:enabled$(:enabled)所有激活的input元素:disabled$(:disabled)所有禁用的input元素:selected$(:selected)所有被选取的input元素:checked$(:checked)所有被选中的input元素jQuery事件jQuery是为事件处理特别设计的。jQuery事件函数jQuery事件处理函数是jQuery中的核心函数。事件处理函数是当HTML中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。在您head中由于jQuery是为事件处理特别设计的，通常是把jQuery代码置于网页head部分的“事件处理”函数中：实例htmlheadscripttype=text/javascriptsrc=jquery.js/scriptscripttype=text/javascript$(document).ready(function(){$(button).click(function(){$(p).hide();});});/script/headbodyh2Thisisaheading/h2pThisisaparagraph./ppThisisanotherparagraph./pbuttontype=buttonClickme/button/body/htmlTIY在上面的例子中，定义了一个处理HTML按钮的点击事件的click函数：$(button).click(function(){..somecode...})click函数内部的代码隐藏所有p元素：$(p).hide();所有事件函数都在文档自身的“事件处理器”内部进行定义：$(document).ready(function(){..somecode...})单独文件中的函数如果您的网站包含许多页面，并且您希望您的jQuery函数易于维护，那么请把您的jQuery函数放到独立的.js文件中。当我们在教程中演示jQuery时，会将函数直接添加到head部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过src属性来引用文件）：实例headscripttype=text/javascriptsrc=jquery.js/scriptscripttype=text/javascriptsrc=my_jquery_functions.js/script/headjQuery名称冲突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的按钮时隐藏所有图像。方法描述ready()文档就绪事件（当HTML文档就绪可用时）blur()触发、或将函数绑定到指定元素的blur事件change()触发、或将函数绑定到指定元素的change事件click()触发、或将函数绑定到指定元素的click事件dblclick()触发、或将函数绑定到指定元素的doubleclick事件error()触发、或将函数绑定到指定元素的error事件focus()触发、或将函数绑定到指定元素的focus事件keydown()触发、或将函数绑定到指定元素的keydown事件keypress()触发、或将函数绑定到指定元素的keypress事件keyup()触发、或将函数绑定到指定元素的keyup事件load()触发、或将函数绑定到指定元素的load事件mousedown()触发、或将函数绑定到指定元素的mousedown事件mouseenter()触发、或将函数绑定到指定元素的mouseenter事件mouseleave()触发、或将函数绑定到指定元素的mouseleave事件mousemove()触发、或将函数绑定到指定元素的mousemove事件mouseout()触发、或将函数绑定到指定元素的mouseout事件mouseover()触发、或将函数绑定到指定元素的mouseover事件mouseup()触发、或将函数绑定到指定元素的mouseup事件resize()触发、或将函数绑定到指定元素的resize事件scroll()触发、或将函数绑定到指定元素的scroll事件select()触发、或将函数绑定到指定元素的select事件submit()触发、或将函数绑定到指定元素的submit事件unload()触发、或将函数绑定到指定元素的unload事件jQuery事件处理方法事件处理方法把事件处理器绑定至匹配元素。方法触发$(selector).bind(event)向匹配元素添加一个或更多事件处理器$(selector).delegate(selector,event)向匹配元素添加一个事件处理器，现在或将来$(selector).die()移除所有通过live()函数添加的事件处理器$(selector).live(event)向匹配元素添加一个事件处理器，现在或将