JQuery知识大全.docx

1、JQuery知识大全1、jQuery 简介1.1、Query 是一个 JavaScript 函数库，可以通过下面的标记把 jQuery 添加到网页中： 1.2、jQuery库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities1.3、jQuery 实例 jQuery 的 hide() 函数，隐藏HTML 文档中所有的 元素。$(document).ready(function()$(button).click(function()$(p).hide();); );T

2、his is a headingThis is a paragraph.This is another paragraph.Click me1.4、jQuery 语法jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作$(this).hide() - 隐藏当前元素$(p).hide() - 隐藏所有段落$(p.test).hide() - 隐藏所有 class=test 的段落

3、$(#test).hide() - 隐藏所有 id=test 的元素1.5jQuery 选择器jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素。$(p) 选取 元素。$(p.intro) 选取所有 class=intro 的 元素。$(p#demo) 选取所有 id=demo 的 元素。jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$(href) 选取所有带有 href 属性的元素。$(href=#) 选取所有带有 href 值等于 # 的元素。$(href!=#) 选取所有带有 href 值不等于 # 的元素。$(hr

4、ef$=.jpg) 选取所有 href 值以 .jpg 结尾的元素。jQuery CSS 选择器jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。实例$(p).css(background-color,red);jQuery 选择器语法 描述$(this)当前 HTML 元素$(p)所有 元素$(p.intro)所有 class=intro 的 元素$(.intro)所有 class=intro 的元素$(#intro)id=intro 的第一个元素$(ul li:first)每个 的第一个 元素$(href$=.jpg)所有带有以 .jpg 结尾的属性值的 href 属

5、性$(div#intro .head)id=intro 的 元素中的所有 class=head 的元素JQuery选择器参考手册选择器实例选取*$(*)所有元素#id$(#lastname)id=lastname 的元素.class$(.intro)所有 class=intro 的元素element$(p)所有 元素.class.class$(.intro.demo)所有 class=intro 且 class=demo 的元素:first$(p:first)第一个 元素:last$(p:last)最后一个 元素:even$(tr:even)所有偶数 元素:odd$(tr:odd)所有奇数 元

6、素:eq(index)$(ul li:eq(3)列表中的第四个元素（index 从 0 开始）:gt(no)$(ul li:gt(3)列出 index 大于 3 的元素:lt(no)$(ul li:lt(3)列出 index 小于 3 的元素:not(selector)$(input:not(:empty)所有不为空的 input 元素:header$(:header)所有标题元素 - :animated 所有动画元素:contains(text)$(:contains(W3School)包含指定字符串的所有元素:empty$(:empty)无子（元素）节点的所有元素:hidden$(p:hi

7、dden)所有隐藏的 元素: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)所有 元素:text$(:text)所有 type=text

8、 的 元素:password$(:password)所有 type=password 的 元素:radio$(:radio)所有 type=radio 的 元素:checkbox$(:checkbox)所有 type=checkbox 的 元素:submit$(:submit)所有 type=submit 的 元素:reset$(:reset)所有 type=reset 的 元素:button$(:button)所有 type=button 的 元素:image$(:image)所有 type=image 的 元素:file$(:file)所有 type=file 的 元素:enabled$(

9、:enabled)所有激活的 input 元素:disabled$(:disabled)所有禁用的 input 元素:selected$(:selected)所有被选取的 input 元素:checked$(:checked)所有被选中的 input 元素1.6、jQuery 事件jQuery 事件函数jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把 jQuery 代码放到 部分的事件处理方法中：实例$(document).ready(function() $(butt

10、on).click(function() $(p).hide(); ););This is a headingThis is a paragraph.This is another paragraph.Click me在上面的例子中，当按钮的点击事件被触发时会调用一个函数：$(button).click(function() .some code. )该方法隐藏所有 元素：$(p).hide();jQuery 中事件方法的一些例子：Event 函数绑定函数至$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）$(selector).click(f

11、unction)触发或将函数绑定到被选元素的点击事件$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件jQuery 参考手册 - 事件方法描述bind()向匹配元素附加一个或更多事件处理器blur()触发、或将函数绑定到指定元素的 blur 事件change()触发、或将函数绑定到指定元素的 change 事件click()触发、或将函数绑定到指定元素的

12、click 事件dblclick()触发、或将函数绑定到指定元素的 double click 事件delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器die()移除所有通过 live() 函数添加的事件处理程序。error()触发、或将函数绑定到指定元素的 error 事件event.isDefaultPrevented()返回 event 对象上是否调用了 event.preventDefault()。event.pageX相对于文档左边缘的鼠标位置。event.pageY相对于文档上边缘的鼠标位置。event.preventDefault()阻止事件的默认动作。eve

13、nt.result包含由被指定事件触发的事件处理器返回的最后一个值。event.target触发该事件的 DOM 元素。event.timeStamp该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。event.type描述事件的类型。event.which指示按了哪个键或按钮。focus()触发、或将函数绑定到指定元素的 focus 事件keydown()触发、或将函数绑定到指定元素的 key down 事件keypress()触发、或将函数绑定到指定元素的 key press 事件keyup()触发、或将函数绑定到指定元素的 key up 事件live()为当前或未来的匹配元

14、素添加一个或多个事件处理器load()触发、或将函数绑定到指定元素的 load 事件mousedown()触发、或将函数绑定到指定元素的 mouse down 事件mouseenter()触发、或将函数绑定到指定元素的 mouse enter 事件mouseleave()触发、或将函数绑定到指定元素的 mouse leave 事件mousemove()触发、或将函数绑定到指定元素的 mouse move 事件mouseout()触发、或将函数绑定到指定元素的 mouse out 事件mouseover()触发、或将函数绑定到指定元素的 mouse over 事件mouseup()触发、或将函数

15、绑定到指定元素的 mouse up 事件one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。ready()文档就绪事件（当 HTML 文档就绪可用时）resize()触发、或将函数绑定到指定元素的 resize 事件scroll()触发、或将函数绑定到指定元素的 scroll 事件select()触发、或将函数绑定到指定元素的 select 事件submit()触发、或将函数绑定到指定元素的 submit 事件toggle()绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。trigger()所有匹配元素的指定事件triggerHandler()第一个被匹配元素

16、的指定事件unbind()从匹配元素移除一个被添加的事件处理器undelegate()从匹配元素移除一个被添加的事件处理器，现在或将来unload()触发、或将函数绑定到指定元素的 unload 事件2、jQuery 效果 - 隐藏和显示script src=/ $(document).ready(function() $(#hide).click(function() $(p).hide(); ); $(#show).click(function() $(p).show(); ););如果点击“隐藏”按钮，我就会消失。隐藏显示2.1、语法：$(selector).hide(speed,cal

17、lback);$(selector).show(speed,callback);可选的 speed 参数规定隐藏/显示的速度，可以取以下值：slow、fast 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。下面的例子演示了带有 speed 参数的 hide() 方法：script src=/$(document).ready(function() $(button).click(function() $(p).hide(1000); ););隐藏这是一个段落。这是另一个段落。2.2jQuery toggle()通过 jQuery，您可以使用 toggle() 方法来

18、切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：script src=/$(document).ready(function() $(button).click(function() $(p).toggle(); ););切换这是一个段落。这是另一个段落。2.3、jQuery 效果函数方法描述animate()对被选元素应用“自定义”的动画clearQueue()对被选元素移除所有排队的函数（仍未运行的）delay()对被选元素的所有排队函数（仍未运行）设置延迟dequeue()运行被选元素的下一个排队函数fadeIn()逐渐改变被选元素的不透明度，从隐藏到可

19、见fadeOut()逐渐改变被选元素的不透明度，从可见到隐藏fadeTo()把被选元素逐渐改变至给定的不透明度hide()隐藏被选的元素queue()显示被选元素的排队函数show()显示被选的元素slideDown()通过调整高度来滑动显示被选元素slideToggle()对被选元素进行滑动隐藏和滑动显示的切换slideUp()通过调整高度来滑动隐藏被选元素stop()停止在被选元素上运行动画toggle()对被选元素进行隐藏和显示的切换2.4、jQuery 效果 - 淡入淡出jQuery Fading 方法通过 jQuery，您可以实现元素的淡入淡出效果。jQuery 拥有下面四种 fad

20、e 方法： fadeIn() jQuery fadeIn() 用于淡入已隐藏的元素。 fadeOut() jQuery fadeOut() 方法用于淡出可见元素。 fadeToggle() jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。 fadeTo() jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。2.4.1、演示带有不同参数的 fadeIn() 方

21、法。script src=/ $(document).ready(function() $(button).click(function() $(#div1).fadeIn(); $(#div2).fadeIn(slow); $(#div3).fadeIn(3000); ););演示带有不同参数的 fadeIn() 方法。点击这里，使三个矩形淡入2.4.2、演示带有不同参数的 fadeOut() 方法。script src=/$(document).ready(function()$(button).click(function() $(#div1).fadeOut(); $(#div2).fadeOut(slow); $(#div3).fadeOut(3000); ););演示带有不同参数的 fadeOut() 方法。点击这里，使三个矩形淡出2.4.3、演示带有不同参数的 fadeToggle() 方法。script src=/