Jquery学习记录解析课件.ppt

1、$(document).ready(function()$(button).click(function()$(h2).hide();$(#cc).hide();/#+id$(input).hide();/类型););点击Click me 之后This is a headingThis is a paragraph.This is another paragraph.Click me 2Google 的 CDNMicrosoft 的 CDN在你想引用的网页开头的 里面 加入上面两句话之一，就ok。3$(this).hide()演示 jQuery hide()函数，隐藏当前的 HTML 元素。$

2、(#test).hide()演示 jQuery hide()函数，隐藏 id=test 的元素。$(p).hide()演示 jQuery hide()函数，隐藏所有 元素。$(.test).hide()演示 jQuery hide()函数，隐藏所有 class=test 的元素。456 fadeIn()$(selector).fadeIn(speed,callback);fadeOut()$(selector).fadeOut(speed,callback);fadeToggle()$(selector).fadeTooggle(speed,callback);fadeTo()$(select

3、or).fadeTo(speed,callback);$(button).click(function()$(#div1).fadeToggle();$(#div2).fadeToggle(slow);$(#div3).fadeToggle(3000););fadeTo()方法中必需的 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）7jquery 滑动效果滑动效果8$(document).ready(function()$(button).click(function()$(div).animate(left:250px,height:150px,width:150px )

4、;););开始动画。9$(button).click(function()$(div).animate(/设初始坐标（0,0,0,0）left:250px,/移动到（250,0,0,0）opacity:0.5,/色彩变为原来的百分之50 /高度变为150 px；width:150px););/宽度改为150px；$(button).click(function()$(div).animate(left:250px,/每运行一次 高度+150 width:+=150px );预定义；把属性的动画值设置为 show、hide 或 toggle：);10jQuery animate()-使用队列功能

5、使用队列功能$(button).click(function()var div=$(div);div.animate(height:300px,opacity:0.4,slow);div.animate(width:300px,opacity:0.8,slow);div.animate(height:100px,opacity:0.4,slow);div.animate(fontSize:3em,slow););1112有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。提示：这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，

6、您只需简单地把该动作追加到之前的动作上。也可以这样写：1314$(#btn1).click(function()$(#test1).text(Hello world!););$(#btn2).click(function()$(#test2).html(Hello world!););$(#btn3).click(function()$(#test3).val(Dolly Duck););这是段落。这是另一个段落。Input field:15text()、html()以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希

7、望使用的字符串。16$(document).ready(function()$(button).click(function()$(#w3s).attr(href:http:/ jQuery 教程 );););W3S改变 href 和 title 值17四个 jQuery 方法：append()-在被选元素的结尾插入内容 prepend()-在被选元素的开头插入内容 after()-在被选元素之后插入内容 before()-在被选元素之前插入内容$(document).ready(function()$(#btn1).click(function()$(p).append(Appended t

8、ext.););$(#btn2).click(function()$(ol).append(Appended item);););This is a paragraph.This is another paragraph.List item 1List item 2List item 3追加文本追加列表项18function appendText()var txt3=document.createElement(p);txt3.innerHTML=Text.;/通过 DOM 来创建文本$(body).append(txt1,txt2,txt3);/追加新元素This is a paragrap

9、h.追加文本var txt2=$().text(Text.);/以 jQuery 创建新元素19如需删除元素和内容，一般可使用以下两个 jQuery 方法：remove()-删除被选元素（及其子元素）/div 属性及其里面所有东西 empty()-从被选元素中删除子元素 /div面的子属性 如：$(document).ready(function()$(button).click(function()$(#div1).remove();););This is some text in the div.This is a paragraph in the div.This is another

10、paragraph in the div.删除 div 元素20$(document).ready(function()$(button).click(function()$(#div1).empty();););This is some text in the div.This is a paragraph in the div.This is another para in the div.清空 div 元素21$(document).ready(function()$(button).click(function()$(p).remove(#aa););$(button).click(f

11、unction()$(p).remove(.italic);););This is a paragraph in the div.This is another paragraph in the div.This is another paragraph in the div.删除 class=italic id=aa的所有 p 元素22jQuery 操作 CSS addClass()-向被选元素添加一个或多个类 removeClass()-从被选元素删除一个或多个类 toggleClass()-对被选元素进行添加/删除类的切换操作 css()-设置或返回样式属性CSS.importantfo

12、nt-weight:bold;font-size:xx-large;.bluecolor:blue;23向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：()$(document).ready(function()$(button).click(function()$(h1,h2,p).addClass(blue);$(div).addClass(important);););.importantfont-weight:bold;font-size:xx-large;.bluecolor:blue;标题 1标题 2这是一个段落。这是另一个段落。这是非常重要的文本！向元

13、素添加类24可以在 addClass()方法中规定多个类：（一对多）$(document).ready(function()$(button).click(function()$(#div1).addClass(important blue);););.importantfont-weight:bold;font-size:xx-large;.bluecolor:blue;这是一些文本。这是一些文本。向第一个 div 元素添加类25该方法对被选元素进行添加/删除类的切换操作$(button).click(function()$(h1,h2,p).toggleClass(blue););26$(

14、document).ready(function()$(button).click(function()alert(Background color=+);););这是标题这是一个段落。这是一个段落。这是一个段落。返回 p 元素的背景色27语法：css(propertyname,value);设置多个 CSS 属性，请使用如下语法：css(propertyname:value,propertyname:value,.);$(document).ready(function()$(button).click(function()$(p).css(background-color:yellow,f

15、ont-size:200%);););这是标题这是一个段落。这是一个段落。这是一个段落。这是一个段落。为 p 元素设置多个样式28jQuery width()和 height()方法width()方法设置或返回元素的宽度（不包括内边距、边框或外边距）。height()方法设置或返回元素的高度（不包括内边距、边框或外边距）。jQuery innerWidth()和 innerHeight()方法innerWidth()方法返回元素的宽度（包括内边距）。innerHeight()方法返回元素的高度（包括内边距）jQuery outerWidth()和 outerHeight()方法outerWid

16、th()方法返回元素的宽度（包括内边距和边框）。outerHeight()方法返回元素的高度（包括内边距和边框）。$(document).ready(function()$(button).click(function()var txt=;txt+=Document width/height:+$(document).width();txt+=x+$(document).height()+n;txt+=Window width/height:+$(window).width();txt+=x+$(window).height();alert(txt);););29什么是遍历？jQuery 遍历

17、，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。30 元素是 元素的父元素，同时是 的子元素 左边的 元素是 的父元素，的子元素，同时是 的后代。元素是 的子元素，同时是 和 的后代。两个 元素是同胞（拥有相同的父元素）。右边的 元素是 的父元素，的子元素，同时是 的后代。元素是右边的 的子元素，同时是 和 的后代。

18、31向上遍历 DOM 树 parent()parents()parentsUntil()$(document).ready(function()$(span).parent().css(color:red,border:2px solid red););div(曾祖父)ul(祖父)li(直接父)span div(祖父)p(直接父)span 32jQuery parents()方法parents()方法返回被选元素的所有祖先元素，。$(document).ready(function()$(span).parents().css(color:red,border:2px solid red);)

19、;body(曾曾祖父)div(曾祖父)ul(祖父)li(直接父)span 您也可以使用可选参数来过滤对祖先元素的搜索。$(document).ready(function()$(span).parents(ul).css(color:red,border:2px solid red););body(曾曾祖父)div(曾祖父)ul(祖父)li(直接父)span /对 以上所有祖先元素检索，找到ul 元素 并赋值34jQuery parentsUntil()方法parentsUntil()方法返回介于两个给定元素之间的所有祖先元素。下面的例子返回介于 与 元素之间的所有祖先元素。$(documen

20、t).ready(function()$(span).parentsUntil().css(color:red,border:2px solid red););body(曾曾祖父)div(曾祖父)ul(祖父)li(直接父)span 35向下遍历 DOM 树下面是两个用于向下遍历 DOM 树的 jQuery 方法：children()find()$(document).ready(function()$(div).children().css(color:red,border:2px solid red););div(当前元素)p(子)span(孙)p(child)span(孙)36也可以使用可

21、选参数来过滤对子元素的搜索$(document).ready(function()$(div).children(p.1).css(color:red,border:2px solid red););div(当前元素)p(子)span(孙)p(子)span(孙)37另一种 检索后代的方法find（）$(document).ready(function()$(div).find(span.1).css(color:red,border:2px solid red);$(div).find(p.1).css(color:red,border:2px solid red););div(current

22、 element)p(子)span(孙)p(child)span(孙)38在 DOM 树中水平遍历有许多有用的方法让我们在 DOM 树进行水平遍历：siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()用的不多，了解39缩写搜索元素的范围三个最基本的过滤方法是：first(),last()和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter()和 not()允许您选取匹配或不匹配某项指定标准的元素。eq()方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元

23、素的索引号是 0 而不是 1。下面的例子选取第二个 元素（索引号 1）40jQuery first()方法first()方法返回被选元素的首个元素。jQuery last()方法last()方法返回被选元素的最后一个元素。$(document).ready(function()$(p).eq(1).css(background-color,yellow););欢迎来到我的主页我是唐老鸭(index 0)。唐老鸭(index 1)。我住在 Duckburg(index 2)。我最好的朋友是米老鼠(index 3)。41jQuery filter()方法filter()方法允许您规定一个标准。不匹

24、配这个标准的元素会被从集合中删除，匹配的元素会被返回。$(document).ready(function()$(p).filter(.intro).css(background-color,yellow););欢迎来到我的主页我是唐老鸭。我住在 Duckburg。我爱 Duckburg。我最好的朋友是 Mickey。42jQuery not()方法not()方法返回不匹配标准的所有元素提示：not()方法与 filter()相反。$(document).ready(function()$(p).not(.intro).css(background-color,yellow););欢迎来到我的

25、主页我是唐老鸭。我住在 Duckburg。我爱 Duckburg。我最好的朋友是 Mickey。43AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。关于 jQuery 与 AJAXjQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON-同时您能够把这些外部数据直接载入网页的被选元素中。提示：如果没有 jQuery，AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不

26、相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。44jQuery load()方法是简单但强大的 AJAX 方法。load()方法从服务器加载数据，并把返回的数据放入被选元素中语法：$(selector).load(URL,data,callback);data 参数规定与请求一同发送的查询字符串键/值对集合。callback 参数是 load()方法完成后所执行的函数名称$(document).ready(function()$(#btn1).click(function()$(#test

27、).load(/example/jquery/demo_test.txt);)请点击下面的按钮，通过 jQuery AJAX 改变这段文本。获得外部的内容必需的 URL 参数规定您希望加载的 URL。可选的可选的45也可以把 jQuery 选择器添加到 URL 参数 例子：把 demo_test.txt 文件中 id=p1 的元素的内容，加载到指定的 元素中：$(#div1).load(demo_test.txt#p1);$(document).ready(function()$(button).click(function()$(#div1).load(/example/jquery/dem

28、o_test.txt#p1);););使用 jQuery AJAX 来改变文本获得外部内容46 callback 参数规定当 load()方法完成后所要允许的回调函数。回调函数可以设置不同的参数：responseTxt-包含调用成功时的结果内容 statusTXT-包含调用的状态 xhr-包含 XMLHttpRequest 对象$(document).ready(function()$(button).click(function()$(#div1).load(/example/jquery/demo_test.txt,function(responseTxt,statusTxt,xhr)if

29、(statusTxt=success)alert(外部内容加载成功！);if(statusTxt=error)alert(Error:+xhr.status+:+xhr.statusText););););使用 jQuery AJAX 来改变文本获得外部内容47HTTP 请求：GET vs.POST两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。GET-从指定的资源请求数据 POST-向指定的资源提交要处理的数据GET 基本上用于从服务器获得（取回）数据。注释：POST 也可用于从服务器获取数据。不过，GET 方法可能返回缓存数据。POST 方法不会缓存数据，并且常用于

30、连同请求一起发送数据。48jQuery$.get()方法$.get()方法通过 HTTP GET 请求从服务器上请求数据。语法：$.get(URL,callback);url（必须）callback（可选）$(document).ready(function()$(button).click(function()$.get(/example/jquery/demo_test.asp,function(data,status)alert(数据：+data+n状态：+status););););向页面发送 HTTP GET 请求，然后获得返回的结果49jQuery$.post()方法$.get()

31、方法通过 HTTP GET 请求从服务器上请求数据。语法：参数规定您希望请求的 URL。参数规定连同请求发送的数据。参数是请求成功后所执行的函数名。$(document).ready(function()$(button).click(function()$.post(/example/jquery/demo_test_post.asp,name:Donald Duck,city:Duckburg （连同请求发送的数据）,function(data,status)alert(数据：+data+n状态：+status););););向页面发送 HTTP POST 请求，并获得返回的结果$.pos

32、t(URL,data，callback);必需的 URL可选的 data 可选的 callback50如果其他 JavaScript 框架也使用$符号作为简写怎么办？其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。其中某些框架也使用$符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。jQuery 的团队考虑到了这个问题，并实现了 noConflict()方法。jQuery noConflict()方法noConflict()方法会释放会$标识符的控制，这样其他脚本就可以使用它了51当然，您仍然可以通过全名替代简写的方式来使用 jQuery：您也可以创建自己的简写。noConflict()可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。如果你的 jQuery 代码块使用$简写，并且您不愿意改变这个快捷方式，那么您可以把$符号作为变量传递给 ready 方法。这样就可以在函数内使用$符号了-而在函数外，依旧不得不使用 jQuery：52 谢谢观赏！