Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,955 views

Published on

jQuery Introduction in Chinese. Thinkhy@disandu.com

Published in: Technology
  • Be the first to comment

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>

×