jquery笔记(吐血整理)

上传人：5*** IP属地：湖北上传时间：2021-11-11 格式：DOCX 页数：88 大小：391.97KB 积分：30 举报 版权申诉

已阅读5页，还剩83页未读，继续免费阅读

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

文档简介

1、<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function() $("p").click(function() $(this).hide(); ););</script></head><body><p>If you cl

2、ick on me, I will disappear.</p></body></html> -<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function()$("button").click(function()$("p

3、").hide();););</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><button type="button">Click me</button></body></html>=向页面添加 jQuery 库jQuery 库位于单个的 JavaScript 文件中，其中包含所有 jQuery 函数。可以通过下面的标记把 jQuer

4、y 添加到网页中：<head><script type="text/javascript" src="jquery.js"></script></head>库的替代Google 和 Microsoft 对 jQuery 的支持都很好。如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google or Microsoft 加载 CDN jQuery 核心文件。使用 Google 的 CDN<head><script type="text/javascript&quo

5、t; src="/jquery/1.4.0/jquery.min.js"></script></head>使用 Microsoft 的 CDN<head><script type="text/javascript" src="/jquery-1.4.min.js"></script></head>=jQuery 语法：通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。jQuery 语法实例：$(thi

6、s).hide()演示 jQuery hide() 函数，隐藏当前的 HTML 元素。$("#test").hide()演示 jQuery hide() 函数，隐藏 id="test" 的元素。$("p").hide()演示 jQuery hide() 函数，隐藏所有 <p> 元素。$(".test").hide()演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。jQuery 语法jQuery 语法是为 HTML 元素的选取编制，可以对元素执行某些

7、操作。基础语法是：$(selector).action()· 美元符号定义 jQuery· 选择符（selector）“查询”和“查找” HTML 元素· jQuery action() 执行对元素的操作实例$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有段落$("p.test").hide() - 隐藏所有 class="test" 的段落$("#test").hide() - 隐藏所有 id="test" 的元素提示：jQu

8、ery 使用的语法是 XPath 与 CSS 选择器语法的组合。文档就绪函数：为了防止文档在完全加载（就绪）之前运行 jQuery 代码。$(document).ready(function()- jQuery functions go here -);在文档完全加载之前运行函数操作失败的情况：· 试图隐藏一个不存在的元素。· 获得未完全加载的图像的大小。=jQuery 选择器1、jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素。$("p") 选取 <p> 元素。$("ro") 选

9、取所有 class="intro" 的 <p> 元素。$("p#demo") 选取 id="demo" 的第一个 <p> 元素。2、jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$("href") 选取所有带有 href 属性的元素。$("href='#'") 选取所有带有 href 值等于 "#" 的元素。$("href!='#'") 选取所有带有 href

10、值不等于 "#" 的元素。$("href$='.jpg'") 选取所有 href 值以 ".jpg" 结尾的元素。3、jQuery CSS 选择器jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。实例：<html><head><script type="text/javascript" src="./jquery/jquery.js" tppabs="<script type="text/javasc

11、ript">$(document).ready(function() $("button").click(function() $("p").css("background-color","yellow"); ););</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another p

12、aragraph.</p><button type="button">Click me</button></body></html>更多的实例语法描述$(this)当前 HTML 元素$("p")所有 <p> 元素$("ro")所有 class="intro" 的 <p> 元素$(".intro")所有 class="intro" 的元素$("#intro")id

13、="intro" 的第一个元素$("ul li:first")每个 <ul> 的第一个 <li> 元素$("href$='.jpg'")所有带有以 ".jpg" 结尾的 href 属性的属性$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素jQuery 选择器选择器实例选取*$("*")所有元素#id$(&quo

14、t;#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&g

15、t; 元素:even$("tr:even")所有偶数 <tr> 元素:odd$("tr:odd")所有奇数 <tr> 元素 :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:no

16、t(:empty)")所有不为空的 input 元素 :header$(":header")所有标题元素 <h1><h2>.:animated 所有动画元素 :contains(text)$(":contains('W3School')")包含文本的所有元素:empty$(":empty")无子（元素）节点的所有元素:hidden$("p:hidden")所有隐藏的 <p> 元

17、素:visible$("table:visible")所有可见的表格 s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素 attribute$("href")所有带有 href 属性的元素attribute=value$("href='#'")所有 href 属性的值等于 "#" 的元素attribute!=value$("href!='#'")所有 hr

18、ef 属性的值不等于 "#" 的元素attribute$=value$("href$='.jpg'")所有 href 属性的值包含 ".jpg" 的元素 :input$(":input")所有 <input> 元素:text$(":text")所有 type="text" 的 <input> 元素:password$(":password")所有 type="passwor

19、d" 的 <input> 元素:radio$(":radio")所有 type="radio" 的 <input> 元素:checkbox$(":checkbox")所有 type="checkbox" 的 <input> 元素:submit$(":submit")所有 type="submit" 的 <input> 元素:reset$(":reset")所有 type="reset&qu

20、ot; 的 <input> 元素:button$(":button")所有 type="button" 的 <input> 元素:image$(":image")所有 type="image" 的 <input> 元素:file$(":file")所有 type="file" 的 <input> 元素 :enabled$(":enabled")所有激活的 input 元素:d

21、isabled$(":disabled")所有禁用的 input 元素:selected$(":selected")所有被选取的 input 元素:checked$(":checked")所有被选中的 input 元素=jQuery 事件jquery事件处理函数是当 HTML 中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。单独文件中的函数（把jQuery 函数放到独立的 .js 文件中,易于jQuery 函数维护）实例<head><script type=&q

22、uot;text/javascript" src="jquery.js"></script><script type="text/javascript" src="my_jquery_functions.js"></script></head>jQuery 名称冲突（了解）jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的

23、方法来解决该问题。var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。实例：<html><head><script type="text/javascript" src="./jquery/jquery.js" tppabs="<script type="text/javascript">var jq=jQuery.noConflict();jq(document).ready(function() jq("

24、button").click(function() jq("p").hide(); ););</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button&

25、gt;</body></html>结论由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：· 把所有 jQuery 代码置于事件处理函数中· 把所有事件处理函数置于文档就绪事件处理器中· 把 jQuery 代码置于单独的 .js 文件中· 如果存在名称冲突，则重命名 jQuery 库jQuery 事件下面是 jQuery 中事件函数的一些例子：Event 函数绑定函数至$(document).ready(function)文档的就绪事件（当 HTML 文档就绪可用）$(se

26、lector).click(function)被选元素的点击事件$(selector).dblclick(function)被选元素的双击事件$(selector).focus(function)被选元素的获得焦点事件$(selector).mouseover(function)被选元素的鼠标悬停事件jQuery 事件方法事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。 jQuery 事件处理方法事件处理方法把事件处理器绑定至匹配元素。方法触发$(selector).bind(event)向匹配元素添加一个或更多事件处理器$(selector).delegate(

27、selector, event)向匹配元素添加一个事件处理器，现在或将来$(selector).die()移除所有通过 live() 函数添加的事件处理器$(selector).live(event)向匹配元素添加一个事件处理器，现在或将来$(selector).one(event)向匹配元素添加一个事件处理器。该处理器只能触发一次。$(selector).unbind(event)从匹配元素移除一个被添加的事件处理器$(selector).undelegate(event)从匹配元素移除一个被添加的事件处理器，现在或将来$(selector).trigger(event)所有匹配元素的指定事

28、件$(selector).triggerHandler(event)第一个被匹配元素的指定事件=jQuery 效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）jQuery 效果隐藏和显示：通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示hide() 和 show() 都可以设置两个可选参数：speed 和 callback。语法：$(selector).hide(speed,callback)$(selector).show(speed,callback)callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。spee

29、d 参数可以设置这些值："slow", "fast", "normal" 或 milliseconds。实例（隐藏）：<html><head><script type="text/javascript" src="./jquery/jquery.js" tppabs="<script type="text/javascript">$(document).ready(function() $("#hide

30、").click(function() $("p").hide(); ); $("#show").click(function() $("p").show(); ););</script></head><body><p id="p1">If you click on the "Hide" button, I will disappear.</p><button

31、id="hide" type="button">Hide</button><button id="show" type="button">Show</button></body></html>-<html><head><script type="text/javascript" src="./jquery/jquery.js" tppabs="<script typ

32、e="text/javascript">$(document).ready(function() $("button").click(function() $("p").hide(1000); ););</script></head><body><button type="button">Hide</button><p>This is a paragraph with little content.&l

33、t;/p><p>This is another small paragraph.</p></body></html>jQuery 切换jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。隐藏显示的元素，显示隐藏的元素。语法：$(selector).toggle(speed,callback)speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。实例$("button"

34、;).click(function() $("p").toggle(); );-<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(document).ready(function() $("button").click(function() $("p")

35、.toggle(); ););</script></head><body><button type="button">切换</button><p>这是一个段落。</p><p>这是另一个段落。</p></body></html>页面显示为：点击“切换”之后，页面的段落隐藏起来，变为：注：点击“切换”，隐藏和显示段落字体循环.jQuery 滑动函数 - slideDown, slideUp, slideTogglejQuery 拥有以下滑动函数：$

36、(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。slideDown() 实例<html><head><script src="/jquery/jquery

37、-1.11.1.min.js"></script><script type="text/javascript"> $(document).ready(function() $(".flip").click(function() $(".panel").slideDown("slow"); ););</script> <style type="text/css">&

38、#160;div.panel,p.flipmargin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;div.panelheight:120px;display:none;</style></head><body><div class="panel"><p>W3School - 领先的 Web 技术教程站点</p><p>在 W3School，你可以找到你所需要的所有网站建设教程。&l

39、t;/p></div><p class="flip">请点击这里</p></body></html>页面为：点击“请点击这里”之后，页面慢慢向下展开、直到停止，页面为：-slideUp() 实例<html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript"> $(documen

40、t).ready(function() $(".flip").click(function() $(".panel").slideUp("slow"); ););</script> <style type="text/css"> div.panel,p.flipmargin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3

41、c3;div.panelheight:120px;</style></head><body><div class="panel"><p>W3School - 领先的 Web 技术教程站点</p><p>在 W3School，你可以找到你所需要的所有网站建设教程。</p></div><p class="flip">请点击这里</p></body></html>页面为：点击“请点击这里”之后，页面慢慢向上收

42、起、直到停止，页面为：-slideToggle() 实例<html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript"> $(document).ready(function()$(".flip").click(function() $(".panel").slideToggle("sl

43、ow"); ););</script><style type="text/css"> div.panel,p.flipmargin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;div.panelheight:120px;display:none;</style></head><body><div class="panel"><p>

44、W3School - 领先的 Web 技术教程站点</p><p>在 W3School，你可以找到你所需要的所有网站建设教程。</p></div><p class="flip">请点击这里</p></body></html>jQuery 效果 - 淡入淡出-fadeIn(), fadeOut(), fadeTo()jQuery 拥有以下 fade 函数：$(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callb

45、ack)$(selector).fadeTo(speed,opacity,callback)Query 拥有下面四种 fade 方法：· fadeIn()· fadeOut()· fadeToggle()· fadeTo()speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。fadeIn实例：<h

46、tml><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function() $("button").click(function() $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $(

47、"#div3").fadeIn(3000); ););</script></head><body><p>演示带有不同参数的 fadeIn() 方法。</p><button>点击这里，使三个矩形淡入</button><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div

48、><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div></body></html>页面为：点击“点击

49、这里，使三个矩形淡入”三个矩形逐渐淡入，页面为：-fadeOut() 实例<html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(document).ready(function() $("button").click(function() $("#div1").fadeOut();

50、 $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); ););</script></head><body><p>演示带有不同参数的 fadeOut() 方法。</p><button>点击这里，使三个矩形淡出</button><br><br><div id="div1" style=&q

51、uot;width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></di

52、v></body></html>页面为：点击“点击这里，使三个矩形淡入”三个矩形逐渐淡出，页面为：-fadeToggle() 实例<html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function() $("button").click(function() $("#div1").fadeToggle(); $(&qu

53、ot;#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); ););</script></head><body><p>演示带有不同参数的 fadeToggle() 方法。</p><button>点击这里，使三个矩形淡入淡出</button><br><br><div id="div1" style="width:80px;height:80px;

54、background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body></body

55、></html>-fadeTo() 实例<html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function() $("button").click(function() $("#div1").fadeTo("slow",0.15); $("

56、;#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); ););</script></head><body><p>演示带有不同参数的 fadeTo() 方法。</p><button>点击这里，使三个矩形淡出</button><br><br><div id="div1" style="

57、width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

58、;</body></html>页面为：点击“点击这里，使三个矩形淡出”三个矩形逐渐淡出，页面为：jQuery 自定义动画jQuery 函数创建自定义动画的语法：$(selector).animate(params,duration,easing,callback)关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性：animate(width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em");第二个参数是 duration。它定义用

59、来应用于动画的时间。它设置的值是："slow", "fast", "normal" 或毫秒。实例 1：<html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $(document).ready(function() $("button").click(function() $("div&q

60、uot;).animate(left:'250px'); ););</script> </head><body><button>开始动画</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;width:1

61、00px;position:absolute;"></div></body></html>-实例 2<html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $(document).ready(function() $("button").click(function() $("div").

62、animate( left:'250px', opacity:'0.5', height:'150px', width:'150px' ); ););</script> </head> <body><button>开始动画</button><p>

63、默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>-实例3：<html> <head> <script src="/j

64、query/jquery-1.11.1.min.js"></script> <script> $(document).ready(function() $("button").click(function() $("div").animate( left:'250px', height:'+=150px', width:'+=150px' ); ); ); <

65、;/script> </head> <body> <button>开始动画</button> <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p> <div style="background:#98bf21;height:100px;width:100px;position:absolu

66、te;"> </div> </body> </html>-实例4：<html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $(document).ready(function() $("button").click(function() $("div").animate( height:'toggle' ); ););</script> </head> <body><button>开始动画</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;width:100px;posit

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

jquery笔记(吐血整理)

文档简介

温馨提示

最新文档

评论

jquery笔记(吐血整理)

文档简介

温馨提示

最新文档

评论

相关文档