jquery笔记(吐血整理).docx

$(document).ready(function() $(p).click(function() $(this).hide(); ););If you click on me, I will disappear. -$(document).ready(function()$(button).click(function()$(p).hide();););This is a headingThis is a paragraph.Click me=向页面添加 jQuery 库jQuery 库位于单个的 JavaScript 文件中，其中包含所有 jQuery 函数。可以通过下面的标记把 jQuery 添加到网页中：库的替代Google 和 Microsoft 对 jQuery 的支持都很好。如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google or Microsoft 加载 CDN jQuery 核心文件。使用 Google 的 CDN使用 Microsoft 的 CDN=jQuery 语法：通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。jQuery 语法实例：$(this).hide()演示 jQuery hide() 函数，隐藏当前的 HTML 元素。$(#test).hide()演示 jQuery hide() 函数，隐藏 id=test 的元素。$(p).hide()演示 jQuery hide() 函数，隐藏所有 元素。$(.test).hide()演示 jQuery hide() 函数，隐藏所有 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 代码。$(document).ready(function()- jQuery functions go here -);在文档完全加载之前运行函数操作失败的情况： 试图隐藏一个不存在的元素。 获得未完全加载的图像的大小。=jQuery 选择器1、jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素。$(p) 选取 元素。$(ro) 选取所有 class=intro 的 元素。$(p#demo) 选取 id=demo 的第一个 元素。2、jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$(href) 选取所有带有 href 属性的元素。$(href=#) 选取所有带有 href 值等于 # 的元素。$(href!=#) 选取所有带有 href 值不等于 # 的元素。$(href$=.jpg) 选取所有 href 值以 .jpg 结尾的元素。3、jQuery CSS 选择器jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。实例：$(document).ready(function() $(button).click(function() $(p).css(background-color,yellow); ););This is a headingThis is a paragraph.This is another paragraph.Click me更多的实例语法描述$(this)当前 HTML 元素$(p)所有 元素$(ro)所有 class=intro 的 元素$(.intro)所有 class=intro 的元素$(#intro)id=intro 的第一个元素$(ul li:first)每个 的第一个 元素$(href$=.jpg)所有带有以 .jpg 结尾的 href 属性的属性$(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)所有奇数 元素: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:hidden)所有隐藏的 元素: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 的 元素: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$(:enabled)所有激活的 input 元素:disabled$(:disabled)所有禁用的 input 元素:selected$(:selected)所有被选取的 input 元素:checked$(:checked)所有被选中的 input 元素=jQuery 事件jquery事件处理函数是当 HTML 中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。单独文件中的函数（把jQuery 函数放到独立的 .js 文件中,易于jQuery 函数维护）实例jQuery 名称冲突（了解）jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。实例：var jq=jQuery.noConflict();jq(document).ready(function() jq(button).click(function() jq(p).hide(); ););This is a headingThis is a paragraph.This is another paragraph.Click me结论由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护： 把所有 jQuery 代码置于事件处理函数中 把所有事件处理函数置于文档就绪事件处理器中 把 jQuery 代码置于单独的 .js 文件中 如果存在名称冲突，则重命名 jQuery 库jQuery 事件下面是 jQuery 中事件函数的一些例子：Event 函数绑定函数至$(document).ready(function)文档的就绪事件（当 HTML 文档就绪可用）$(selector).click(function)被选元素的点击事件$(selector).dblclick(function)被选元素的双击事件$(selector).focus(function)被选元素的获得焦点事件$(selector).mouseover(function)被选元素的鼠标悬停事件jQuery 事件方法事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。jQuery 事件处理方法事件处理方法把事件处理器绑定至匹配元素。方法触发$(selector).bind(event)向匹配元素添加一个或更多事件处理器$(selector).delegate(selector, event)向匹配元素添加一个事件处理器，现在或将来$(selector).die()移除所有通过 live() 函数添加的事件处理器$(selector).live(event)向匹配元素添加一个事件处理器，现在或将来$(selector).one(event)向匹配元素添加一个事件处理器。该处理器只能触发一次。$(selector).unbind(event)从匹配元素移除一个被添加的事件处理器$(selector).undelegate(event)从匹配元素移除一个被添加的事件处理器，现在或将来$(selector).trigger(event)所有匹配元素的指定事件$(selector).triggerHandler(event)第一个被匹配元素的指定事件=jQuery 效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）jQuery 效果隐藏和显示：通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示hide() 和 show() 都可以设置两个可选参数：speed 和 callback。语法：$(selector).hide(speed,callback)$(selector).show(speed,callback)callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。speed 参数可以设置这些值：slow, fast, normal 或 milliseconds。实例（隐藏）：$(document).ready(function() $(#hide).click(function() $(p).hide(); ); $(#show).click(function() $(p).show(); ););If you click on the Hide button, I will disappear.HideShow-$(document).ready(function() $(button).click(function() $(p).hide(1000); ););HideThis is a paragraph with little content.This is another small paragraph.jQuery 切换jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。隐藏显示的元素，显示隐藏的元素。语法：$(selector).toggle(speed,callback)speed 参数可以设置这些值：slow, fast, normal 或 毫秒。实例$(button).click(function() $(p).toggle(); );-$(document).ready(function() $(button).click(function() $(p).toggle(); ););切换这是一个段落。这是另一个段落。页面显示为：点击“切换”之后，页面的段落隐藏起来，变为：注：点击“切换”，隐藏和显示段落字体循环.jQuery 滑动函数 - slideDown, slideUp, slideTogglejQuery 拥有以下滑动函数：$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)speed 参数可以设置这些值：slow, fast, normal 或 毫秒。callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。slideDown() 实例$(document).ready(function() $(.flip).click(function() $(.panel).slideDown(slow); ););div.panel,p.flipmargin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;div.panelheight:120px;display:none;W3School - 领先的 Web 技术教程站点在 W3School，你可以找到你所需要的所有网站建设教程。请点击这里页面为：点击“请点击这里”之后，页面慢慢向下展开、直到停止，页面为：-slideUp() 实例$(document).ready(function() $(.flip).click(function() $(.panel).slideUp(slow); ););div.panel,p.flipmargin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;div.panelheight:120px;W3School - 领先的 Web 技术教程站点在 W3School，你可以找到你所需要的所有网站建设教程。请点击这里页面为：点击“请点击这里”之后，页面慢慢向上收起、直到停止，页面为：-slideToggle() 实例$(document).ready(function()$(.flip).click(function() $(.panel).slideToggle(slow); ););div.panel,p.flipmargin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;div.panelheight:120px;display:none;W3School - 领先的 Web 技术教程站点在 W3School，你可以找到你所需要的所有网站建设教程。请点击这里jQuery 效果 - 淡入淡出-fadeIn(), fadeOut(), fadeTo()jQuery 拥有以下 fade 函数：$(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback)$(selector).fadeTo(speed,opacity,callback)Query 拥有下面四种 fade 方法： fadeIn() fadeOut() fadeToggle() fadeTo()speed 参数可以设置这些值：slow, fast, normal 或 毫秒。fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。fadeIn实例：$(document).ready(function() $(button).click(function() $(#div1).fadeIn(); $(#div2).fadeIn(slow); $(#div3).fadeIn(3000); ););演示带有不同参数的 fadeIn() 方法。点击这里，使三个矩形淡入页面为：点击“点击这里，使三个矩形淡入”三个矩形逐渐淡入，页面为：-fadeOut() 实例$(document).ready(function() $(button).click(function() $(#div1).fadeOut(); $(#div2).fadeOut(slow); $(#div3).fadeOut(3000); ););演示带有不同参数的 fadeOut() 方法。点击这里，使三个矩形淡出页面为：点击“点击这里，使三个矩形淡入”三个矩形逐渐淡出，页面为：-fadeToggle() 实例$(document).ready(function() $(button).click(function() $(#div1).fadeToggle(); $(#div2).fadeToggle(slow); $(#div3).fadeToggle(3000); ););演示带有不同参数的 fadeToggle() 方法。点击这里，使三个矩形淡入淡出-fadeTo() 实例$(document).ready(function() $(button).click(function() $(#div1).fadeTo(slow,0.15); $(#div2).fadeTo(slow,0.4); $(#div3).fadeTo(slow,0.7); ););演示带有不同参数的 fadeTo() 方法。点击这里，使三个矩形淡出页面为：点击“点击这里，使三个矩形淡出”三个矩形逐渐淡出，页面为：jQuery 自定义动画jQuery 函数创建自定义动画的语法：$(selector).animate(params,duration,easing,callback)关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性：animate(width:70%,opacity:0.4,marginLeft:0.6in,fontSize:3em);第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是：slow, fast, normal 或 毫秒。实例 1：$(document).ready(function() $(button).click(function() $(div).animate(left:250px); ););开始动画默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。-实例 2$(document).ready(function() $(button).click(function() $(div).animate( left:250px, opacity:0.5, height:150px, width:150px ); ););开始动画默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。-实例3：$(document).ready(function()$(button).click(function()$(div).animate( left:250px, height:+=150px, width:+=150px );););开始动画默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。 -实例4： $(document).ready(function() $(button).click(function() $(div).animate( height:toggle ); );); 开始动画默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。-实例5：