jQuery   介绍 05/23/10 www.disandu.com
目 录 <ul><ul><li>jQuery 简介 </li></ul></ul><ul><ul><li>jQuery 选择器及 DOM 基本操作 </li></ul></ul><ul><ul><li>事件处理及动画 </li></ul></u...
使用 JavaScript 的困境 <ul><li>JavaScript 太难写了! </li></ul><ul><ul><li>糟糕的  DOM 操作: getElementsByTagName 、 getElementById 、 docu...
使用 JavaScript 框架
jQuery 是什么? <ul><ul><li>jQuery 是一个开放源代码的 JavaScript 框架,它能简化 HTML 与 JavaScript 程序之间的交互。 </li></ul></ul><ul><ul><li>———  jQu...
为什么选择 jQuery? <ul><li>好学好用,还很轻巧 </li></ul><ul><ul><li>完全支持 CSS 3 的选择器,方便的包装集和函数链。完整的源码大小(压缩后)仅仅 24Kb( 最新版本 v1.4.2) </li></...
jQuery 能做什么? <ul><li>  找到特定元素  操作这些元素 </li></ul><ul><li>$(“div p”).addClass(“special”); </li></ul><ul><li>jQuery 对象  $=jQu...
 
基本 CSS 选择器 选择器 描述 * 匹配任何元素 E 匹配标签名称为 E 的所有元素 E  F 匹配标签名称为 F 、作为 E 的后代节点的所有元素 E  >  F 匹配标签名称为 F 、作为 E 的直接子节点的所有元素 E  +  F 匹...
选择器 1 HTML 元素 $(‘p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> HTML ...
选择器 2 后代节点元素 div 节点内所有 p 结点 $(‘div p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2...
选择器 3 混合元素 取两个元素的并集 $(‘div, p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> <...
选择器 4 选择器 描述 $(‘[href]’) 属性 $(‘[target=_blank]’) 属性  +  值 $(‘a[rel]’) 元素  +  属性 $(‘[rel!=nofollow]’) 属性值不等于 $(‘[href^=http...
筛选器 1 $(‘p:first’) 最先匹配的元素 $(‘p:last’) 最后匹配的元素  $(‘p:not[class=bodytext]’) 对指定的筛选器求反 $(‘p:even’) 偶数次匹配的元素 $(‘p:odd’) 奇数次匹配...
筛选器 2 第 n 个匹配元素 $(‘p:eq(2)’) <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p></p> 第 n 个匹配元素之后的元素 $(‘p:gt(2)’) <p>1</p> <p>...
筛选器 3 包含文本的元素 $(‘p:contains(TEST)’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </...
选择器相关函数 <ul><li>结点关系函数 </li></ul><ul><ul><li>next    返回下一个兄弟节点的包装集 </li></ul></ul><ul><ul><li>prev   返回上一个兄弟节点的包装集   </li>...
选择器相关函数 <ul><li>find </li></ul><ul><ul><li>wrappedSet.find(‘p cite’)  ===  $(‘p cite’, wrappedSet) </li></ul></ul><ul><ul>...
让 jQuery 做点什么!
操作元素属性和特性 <ul><li>操作属性 </li></ul><ul><ul><li>attr(name)  </li></ul></ul><ul><ul><li>$(‘#myImage’).attr(“src”); </li></ul><...
操作元素属性和特性 <ul><li>添加和删除类名称 </li></ul><ul><ul><li>addClass(names) </li></ul></ul><ul><ul><li>$(‘.question’).addClass(“fault...
操作元素属性和特性 <ul><li>获取和设置样式 </li></ul><ul><ul><li>css(name) </li></ul></ul><ul><ul><ul><li>$(‘#myImage’).css(‘width’); </li>...
操作元素属性和特性 <ul><li>替换 HTML 或文本内容 </li></ul><ul><ul><li>html() </li></ul></ul><ul><ul><ul><li>$(‘#id’).html()  ===  $(‘#id’)...
操作元素属性和特性 <ul><li>移动和复制元素  Beyond DOM API !! </li></ul><ul><ul><li>append(content)  主动  $(‘.appendToMe”).append(toAppend);...
操作元素属性和特性 <ul><li>包裹元素 </li></ul><ul><ul><li>wrap(wrapper) </li></ul></ul><ul><ul><li>wrapAll(wrapper) </li></ul></ul><ul>...
jQuery 事件处理 <ul><li>绑定事件处理函数 </li></ul><ul><ul><ul><li>bind 绑定事件处理函数 </li></ul></ul></ul><ul><ul><ul><li>$(‘img’).bind(‘cl...
jQuery 事件处理 <ul><li>元素显示  隐藏函数 </li></ul><ul><ul><ul><li>show 显示 HTML 元素  </li></ul></ul></ul><ul><ul><ul><li>show(“slow”)...
jQuery 事件处理 <ul><li>动画效果 </li></ul><ul><ul><ul><li>淡入淡出 fadeOut  fadeIn  fadeTo </li></ul></ul></ul><ul><ul><ul><li>滑上滑下 s...
用 jQuery 改进现有代码 <ul><li>处理库冲突  “真正的 $ 请站起来?” </li></ul><ul><ul><li>方法 1 :使用 jQuery 代替 $  ,运用 $.noConflict() 将 $ 交给别的库( Pro...
用 jQuery 改进现有代码 <ul><li>操作 DOM 元素,不仅仅在 ready 函数 </li></ul><ul><ul><ul><ul><ul><li>var jQuery  = windows.$ = function( sele...
用 jQuery 改进现有代码 <ul><li>应用包装集与函数链 </li></ul><ul><ul><li>包装集简单应用 </li></ul></ul><ul><ul><ul><ul><li>if ($(&quot;#paper inpu...
用 jQuery 改进现有代码 <ul><li>用 jQuery 访问 XML 文档  XPath  vs. CSS </li></ul><ul><ul><li>XML 文档对象 </li></ul></ul><ul><ul><li>XML 文...
用 jQuery 改进现有代码 <ul><li>改善用户体验 </li></ul><ul><ul><li>jQueryUI 库  jQuery  用户界面插件  http://www.jqueryui.com </li></ul></ul><u...
插件演示 <ul><li>基本 UI 插件 </li></ul>
插件演示 <ul><li>图片库 </li></ul>
插件演示 <ul><li>表格 </li></ul>
jQuery 学习资源 <ul><li>中文书籍 </li></ul>
jQuery 学习资源 <ul><li>官方网站  </li></ul><ul><ul><li>jQuery 官方网站  http://www.jquery.com </li></ul></ul><ul><ul><li>jQuery 代码托管 ...
jQuery 学习资源 <ul><li>中文网站  </li></ul><ul><ul><li>CSDN jQuery 主页  http://subject.csdn.net/jQuery/ </li></ul></ul><ul><ul><li...
jQuery 学习资源 <ul><li>插件汇总  </li></ul><ul><ul><li>jQuery Plugins  </li></ul></ul><ul><ul><li> http://plugins.jquery.com/ </l...
 
Upcoming SlideShare
Loading in...5
×

jQuery介绍@disandu.com

1,727

Published on

jQuery Introduction in Chinese. Thinkhy@disandu.com

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,727
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery介绍@disandu.com

  1. 1. jQuery 介绍 05/23/10 www.disandu.com
  2. 2. 目 录 <ul><ul><li>jQuery 简介 </li></ul></ul><ul><ul><li>jQuery 选择器及 DOM 基本操作 </li></ul></ul><ul><ul><li>事件处理及动画 </li></ul></ul><ul><ul><li>用 jQuery 改进现有代码 </li></ul></ul><ul><ul><li>插件介绍 </li></ul></ul><ul><ul><li>jQuery 学习资源 </li></ul></ul>
  3. 3. 使用 JavaScript 的困境 <ul><li>JavaScript 太难写了! </li></ul><ul><ul><li>糟糕的 DOM 操作: getElementsByTagName 、 getElementById 、 document 、 innerHTML 。。。 </li></ul></ul><ul><li>各个浏览器各自为政 </li></ul><ul><ul><li>浪费大量时间处理跨浏览器的问题 </li></ul></ul><ul><li>代码难重用、难维护 </li></ul><ul><ul><li>在网上东抄西抄,代码风格不统一,代码难维护 ,仅仅实现功能 ,缺乏重用机制。 </li></ul></ul>
  4. 4. 使用 JavaScript 框架
  5. 5. jQuery 是什么? <ul><ul><li>jQuery 是一个开放源代码的 JavaScript 框架,它能简化 HTML 与 JavaScript 程序之间的交互。 </li></ul></ul><ul><ul><li>——— jQuery 作者 John Resig </li></ul></ul>
  6. 6. 为什么选择 jQuery? <ul><li>好学好用,还很轻巧 </li></ul><ul><ul><li>完全支持 CSS 3 的选择器,方便的包装集和函数链。完整的源码大小(压缩后)仅仅 24Kb( 最新版本 v1.4.2) </li></ul></ul><ul><ul><li>跨浏览器支持 </li></ul></ul><ul><ul><li>IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome </li></ul></ul><ul><li>开放的架构 </li></ul><ul><ul><li>核心库仅仅包含大多数页面需要的功能,易于附加功能进行扩展,通过扩展 jQuery 库,可以利用核心库提供的强大功能(选择器、包装集)。 </li></ul></ul><ul><ul><li>强大的社区 </li></ul></ul><ul><ul><li>完善的文档与数以千计的插件。 </li></ul></ul>
  7. 7. jQuery 能做什么? <ul><li> 找到特定元素 操作这些元素 </li></ul><ul><li>$(“div p”).addClass(“special”); </li></ul><ul><li>jQuery 对象 $=jQuery </li></ul>
  8. 9. 基本 CSS 选择器 选择器 描述 * 匹配任何元素 E 匹配标签名称为 E 的所有元素 E F 匹配标签名称为 F 、作为 E 的后代节点的所有元素 E > F 匹配标签名称为 F 、作为 E 的直接子节点的所有元素 E + F 匹配前面是邻近兄弟节点 E 的所有元素 F ( E 和 F 紧挨着) E - F 匹配前面是任何兄弟节点 E 的所有元素 F(E 和 F 可以不紧挨) E.C 匹配带有类名 C 的所有元素 En 。 .C 等效于 *.C E#I 匹配 id 特征值为 I 的元素 E 。 #I 等效于 *#I E[A] 匹配带有特征 A 的所有元素 E( 不管特征 A 的值是什么 )
  9. 10. 选择器 1 HTML 元素 $(‘p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> HTML 元素加上 ID $(‘p#first’) $(‘#first’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div> H TML 元素加上 class $(‘p.second’) $(‘.second’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div>
  10. 11. 选择器 2 后代节点元素 div 节点内所有 p 结点 $(‘div p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> 直接子节点元素 div 下一级的 h1 节点 $(‘div > span’) 没有匹配节点 $(‘div > h1’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div> 相邻节点 h1 节点之后的 p 节点 $(‘h1 + p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div>
  11. 12. 选择器 3 混合元素 取两个元素的并集 $(‘div, p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> 所有元素 $(‘*’) <div> <h1> Title </h1> <p id=‘first’> <span> TEST </span> </p> <p class=“second’> TEST2 </p> </div> 兄弟节点元素 取 h1 节点之后的所有 p 节点(与 h1 同一层次) $(‘h1 ~ p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div>
  12. 13. 选择器 4 选择器 描述 $(‘[href]’) 属性 $(‘[target=_blank]’) 属性 + 值 $(‘a[rel]’) 元素 + 属性 $(‘[rel!=nofollow]’) 属性值不等于 $(‘[href^=http]’) 属性值以 XX 开头 $(‘[href$=jquery.com]’) 属性值以 XX 结尾 $(‘[href*=jquery]’) 属性值包括 XX $(‘[href^=jquery][target=_blank]’) 元素的多个属性条件组合
  13. 14. 筛选器 1 $(‘p:first’) 最先匹配的元素 $(‘p:last’) 最后匹配的元素 $(‘p:not[class=bodytext]’) 对指定的筛选器求反 $(‘p:even’) 偶数次匹配的元素 $(‘p:odd’) 奇数次匹配的元素
  14. 15. 筛选器 2 第 n 个匹配元素 $(‘p:eq(2)’) <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p></p> 第 n 个匹配元素之后的元素 $(‘p:gt(2)’) <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p></p> 第 n 个匹配元素之前的元素 $(‘p:lt(2)’) <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p></p>
  15. 16. 筛选器 3 包含文本的元素 $(‘p:contains(TEST)’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> 包含节点的元素 $(‘p:has(span)’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div> 包含了后代节点的元素(排除了空节点) $(‘p:parent’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div>
  16. 17. 选择器相关函数 <ul><li>结点关系函数 </li></ul><ul><ul><li>next 返回下一个兄弟节点的包装集 </li></ul></ul><ul><ul><li>prev 返回上一个兄弟节点的包装集 </li></ul></ul><ul><ul><li>parent 返回直接父节点的包装集 </li></ul></ul><ul><ul><li>children 返回子节点的包装集 </li></ul></ul><ul><ul><li>nextAll 返回所有后续兄弟节点的包装集 </li></ul></ul><ul><ul><li>prevAll 返回所有前面兄弟节点的包装集 </li></ul></ul><ul><ul><li>siblings 返回所有兄弟节点的包装集 </li></ul></ul>
  17. 18. 选择器相关函数 <ul><li>find </li></ul><ul><ul><li>wrappedSet.find(‘p cite’) === $(‘p cite’, wrappedSet) </li></ul></ul><ul><ul><li>$(‘div’).addClass(‘fault’).find(‘p’).css(‘fontSize’,’16px’); </li></ul></ul><ul><li>filter </li></ul><ul><ul><li>var digitalTd = $(‘td’).filter(function() { return this .innerHTML.match(/^d+$/)}) </li></ul></ul><ul><li>is </li></ul><ul><ul><li>var hasImage = $(‘*’).is(‘img’); </li></ul></ul>
  18. 19. 让 jQuery 做点什么!
  19. 20. 操作元素属性和特性 <ul><li>操作属性 </li></ul><ul><ul><li>attr(name) </li></ul></ul><ul><ul><li>$(‘#myImage’).attr(“src”); </li></ul></ul><ul><ul><li>attr(attr, value) </li></ul></ul><ul><ul><li>$(‘#myImage’).attr(‘src’, ‘image.jpg’); </li></ul></ul><ul><ul><li>attr(attrbutesObject) </li></ul></ul><ul><ul><li>$(‘#myImage’).attr({src: ‘image.jpg’ }); </li></ul></ul><ul><ul><li>removeAttr(name) </li></ul></ul><ul><ul><li>$(‘input’).removeAttr(‘checked’); </li></ul></ul>
  20. 21. 操作元素属性和特性 <ul><li>添加和删除类名称 </li></ul><ul><ul><li>addClass(names) </li></ul></ul><ul><ul><li>$(‘.question’).addClass(“fault”); </li></ul></ul><ul><ul><li>removeClass(names) </li></ul></ul><ul><ul><li>$(‘.question’).removeClass(‘fault’); </li></ul></ul><ul><ul><li>toggleClass(name) </li></ul></ul><ul><ul><li>类名存在则删除,不存在则添加 </li></ul></ul><ul><ul><li>$(‘td’).toggleClass(‘color’); </li></ul></ul><ul><ul><li>hasClass(name) </li></ul></ul><ul><ul><li>$(‘#questionID’).hasClass(‘fault’); </li></ul></ul>
  21. 22. 操作元素属性和特性 <ul><li>获取和设置样式 </li></ul><ul><ul><li>css(name) </li></ul></ul><ul><ul><ul><li>$(‘#myImage’).css(‘width’); </li></ul></ul></ul><ul><ul><li>css(name, value) </li></ul></ul><ul><ul><ul><li>$(‘#myImage’).css(‘width’, ’200px’); </li></ul></ul></ul><ul><ul><ul><li>$(‘#myImage’).css(‘width’,function() {return $(this).width() + 20 + “px”; }); </li></ul></ul></ul><ul><ul><li>css(propertiesObject) </li></ul></ul><ul><ul><ul><li>$(‘#myImage’).css({ </li></ul></ul></ul><ul><ul><ul><ul><ul><li>“ width” : ‘200px’, </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>“ length” : ‘300px’ , </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li> “ border” : ‘1px solid red’ </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>}); </li></ul></ul></ul></ul></ul>
  22. 23. 操作元素属性和特性 <ul><li>替换 HTML 或文本内容 </li></ul><ul><ul><li>html() </li></ul></ul><ul><ul><ul><li>$(‘#id’).html() === $(‘#id’)[0].innerHTML </li></ul></ul></ul><ul><ul><li>html(text) </li></ul></ul><ul><ul><ul><li>$(‘#id’).html(text) == $(‘#id’). innerHTML = text </li></ul></ul></ul><ul><ul><ul><li>$(‘div’).html(text); 设置所有匹配元素的 HTML 内容 </li></ul></ul></ul><ul><ul><li>text() </li></ul></ul><ul><ul><ul><li>$(‘#id’).text() === $(‘#id’)[0].innerText </li></ul></ul></ul><ul><ul><li>text(content) </li></ul></ul><ul><ul><ul><li>$(‘p’).text(‘paragraph’); </li></ul></ul></ul>
  23. 24. 操作元素属性和特性 <ul><li>移动和复制元素 Beyond DOM API !! </li></ul><ul><ul><li>append(content) 主动 $(‘.appendToMe”).append(toAppend); </li></ul></ul><ul><ul><li>appendTo(target) 被动 $(‘#car’).appendTo(‘#target’); </li></ul></ul><ul><li>类似的命令 </li></ul><ul><ul><li>prepend() 主动 </li></ul></ul><ul><ul><li>prependTo() 被动 </li></ul></ul><ul><ul><li>before() 主动 </li></ul></ul><ul><ul><li>insertBefore() 被动 </li></ul></ul><ul><ul><li>after 主动 </li></ul></ul><ul><ul><li>insertAfter() 被动 </li></ul></ul>
  24. 25. 操作元素属性和特性 <ul><li>包裹元素 </li></ul><ul><ul><li>wrap(wrapper) </li></ul></ul><ul><ul><li>wrapAll(wrapper) </li></ul></ul><ul><ul><li>wrapInner(wrapper) </li></ul></ul><ul><li>删除元素 </li></ul><ul><ul><li>remove() </li></ul></ul><ul><ul><li>empty() </li></ul></ul><ul><li>克隆元素 </li></ul><ul><ul><li>clone(copyHandlers) </li></ul></ul><ul><ul><ul><li>$(‘ul’).clone().insertBefore(‘#here’) </li></ul></ul></ul>
  25. 26. jQuery 事件处理 <ul><li>绑定事件处理函数 </li></ul><ul><ul><ul><li>bind 绑定事件处理函数 </li></ul></ul></ul><ul><ul><ul><li>$(‘img’).bind(‘click’, function() { alert(“hello, jQuery”); }); </li></ul></ul></ul><ul><ul><ul><li>unbind 解除绑定 </li></ul></ul></ul><ul><ul><ul><ul><ul><li>$(‘img’).unbind(‘click’); </li></ul></ul></ul></ul></ul><ul><ul><ul><li>eventName 利用事件名称绑定事件的的快捷方法 click,blur,focus,mousedown … … </li></ul></ul></ul><ul><ul><ul><ul><ul><li>$(‘img’).click(function() { alert(“hello, jQuery”); }); </li></ul></ul></ul></ul></ul>
  26. 27. jQuery 事件处理 <ul><li>元素显示 隐藏函数 </li></ul><ul><ul><ul><li>show 显示 HTML 元素 </li></ul></ul></ul><ul><ul><ul><li>show(“slow”); show(“normal”); show(“fast”); </li></ul></ul></ul><ul><ul><ul><li>hide 隐藏 HTML 元素 </li></ul></ul></ul><ul><ul><ul><li>toggle 切换显示效果 ( 包装集内显示的元素隐藏,隐藏的元素显示 ) </li></ul></ul></ul>
  27. 28. jQuery 事件处理 <ul><li>动画效果 </li></ul><ul><ul><ul><li>淡入淡出 fadeOut fadeIn fadeTo </li></ul></ul></ul><ul><ul><ul><li>滑上滑下 slideDown slideUp slideToggle </li></ul></ul></ul><ul><ul><ul><li>自定义动画 animate </li></ul></ul></ul><ul><ul><ul><ul><ul><li>$(‘#img’).animate( </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>{ </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>width: $(this).width * 2, </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>height: $(this).height * 2 </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>}, 2000); </li></ul></ul></ul></ul></ul>
  28. 29. 用 jQuery 改进现有代码 <ul><li>处理库冲突 “真正的 $ 请站起来?” </li></ul><ul><ul><li>方法 1 :使用 jQuery 代替 $ ,运用 $.noConflict() 将 $ 交给别的库( Prototyper )。 </li></ul></ul><ul><ul><li>方法 2 :传递 jQuery 到定义了参数 $ 的函数 </li></ul></ul><ul><ul><li>(function($) { </li></ul></ul><ul><ul><li> /* 函数内容写在这里 */ </li></ul></ul><ul><ul><li> } </li></ul></ul><ul><ul><li>)(jQuery); </li></ul></ul>
  29. 30. 用 jQuery 改进现有代码 <ul><li>操作 DOM 元素,不仅仅在 ready 函数 </li></ul><ul><ul><ul><ul><ul><li>var jQuery = windows.$ = function( selector, context )  {     context = context ||  document ;      return   new  jQuery.fn.init( selector, context ); }; </li></ul></ul></ul></ul></ul><ul><ul><ul><li>// 检查未作答题目 </li></ul></ul></ul><ul><ul><ul><li>function CheckUnanswer() { </li></ul></ul></ul><ul><ul><ul><li>var pframe = window.frames[&quot;mainBody&quot;]; </li></ul></ul></ul><ul><ul><ul><li>if ($('div#paper div',pframe.document).size() > 0) </li></ul></ul></ul><ul><ul><ul><li>{ </li></ul></ul></ul><ul><ul><ul><li>// do something here </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>var divs = document.getElementsByTagName(&quot;div”); ); If ($(divs[0]).find(‘div’).hasClass(‘answer’)) { // do something here }
  30. 31. 用 jQuery 改进现有代码 <ul><li>应用包装集与函数链 </li></ul><ul><ul><li>包装集简单应用 </li></ul></ul><ul><ul><ul><ul><li>if ($(&quot;#paper input&quot;).is(&quot;:checked&quot;)) // 判断是否有 input 控件被选择 </li></ul></ul></ul></ul><ul><ul><li>包装集与函数链综合应用 </li></ul></ul>// 获得所有可作答的题目 $('div.question').filter( function() { // 筛选不包含子题目的题目 return ($('div.subquestion',this).size() == 0); } ).add(‘.subquestion’) .not(‘.errorQuestion’).fadeOut() // 答对的题淡出 .end() // 获得上一个包装集 ( 所有试题 ) .filter(‘.errorQuestion’).fadeIn(); // 答错的题淡入
  31. 32. 用 jQuery 改进现有代码 <ul><li>用 jQuery 访问 XML 文档 XPath vs. CSS </li></ul><ul><ul><li>XML 文档对象 </li></ul></ul><ul><ul><li>XML 文本 </li></ul></ul><ul><ul><ul><ul><ul><li> </li></ul></ul></ul></ul></ul><ul><ul><li>XML 文件 </li></ul></ul><ul><ul><li>参考资料: </li></ul></ul><ul><ul><ul><li>使用 jQuery 在浏览器中处理 XML </li></ul></ul></ul><ul><ul><ul><li>http://www.ibm.com/developerworks/cn/xml/x-feedjquery/ </li></ul></ul></ul><ul><ul><ul><li>在 XPath 与 jQuery 之间选择 </li></ul></ul></ul><ul><ul><ul><li> http://www.ibm.com/developerworks/xml/library/x-xpathjquery/index.html?ca=drs- </li></ul></ul></ul>$(xmlDoc).find(&quot;[nodeName=u]&quot;).each( function() {); $(xmlString).find(&quot;[nodeName=u]&quot;).each( function() {); $.get( &quot;http://localhost/~chrish/books.xml&quot;, function( data ) { root = data; $(&quot;p#status&quot;).text( &quot;Loaded.&quot; ); } );
  32. 33. 用 jQuery 改进现有代码 <ul><li>改善用户体验 </li></ul><ul><ul><li>jQueryUI 库 jQuery 用户界面插件 http://www.jqueryui.com </li></ul></ul><ul><ul><li>Themeroller 界面控件风格定制 http://jqueryui.com/themeroller/ </li></ul></ul><ul><ul><li>插件 无尽的可能! </li></ul></ul>
  33. 34. 插件演示 <ul><li>基本 UI 插件 </li></ul>
  34. 35. 插件演示 <ul><li>图片库 </li></ul>
  35. 36. 插件演示 <ul><li>表格 </li></ul>
  36. 37. jQuery 学习资源 <ul><li>中文书籍 </li></ul>
  37. 38. jQuery 学习资源 <ul><li>官方网站 </li></ul><ul><ul><li>jQuery 官方网站 http://www.jquery.com </li></ul></ul><ul><ul><li>jQuery 代码托管 http://code.google.com/p/jqueryjs/ </li></ul></ul><ul><ul><li>jQuery 官方文档 http://docs.jquery.com/Tutorials/ </li></ul></ul><ul><ul><li>jQuery UI 插件库 http://jqueryui.com/ </li></ul></ul><ul><ul><li>jQuery UI 代码托管 http://code.google.com/p/jquery-ui/ </li></ul></ul>
  38. 39. jQuery 学习资源 <ul><li>中文网站 </li></ul><ul><ul><li>CSDN jQuery 主页 http://subject.csdn.net/jQuery/ </li></ul></ul><ul><ul><li>jQuery 中文社区 http://bbs.jquery.org.cn/index.php </li></ul></ul><ul><ul><li>R IA WORLDS jQuery 文章分类 http://www.51toria.cn/?cat=5 </li></ul></ul>
  39. 40. jQuery 学习资源 <ul><li>插件汇总 </li></ul><ul><ul><li>jQuery Plugins </li></ul></ul><ul><ul><li> http://plugins.jquery.com/ </li></ul></ul><ul><ul><li>200+ jQuery 插件(插件分类特别齐全) </li></ul></ul><ul><ul><li> http://paranimage.com/jquery-plugin-list/ </li></ul></ul><ul><ul><li>50+ Amazing Jquery Examples </li></ul></ul><ul><ul><li> http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html </li></ul></ul><ul><ul><li>37 个更加出色的 jQuery 插件 </li></ul></ul><ul><ul><li>http://paranimage.com/37-plug-ins-even-more-outstanding-jquery/ </li></ul></ul><ul><ul><li> 表格控件 </li></ul></ul><ul><ul><li>http://www.comsharp.com/GetKnowledge/zh-CN/CMS_K945.aspx </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×