Chapter 4 锋利的 jQuery—— 进入企业级应用阶段
一个相册的实现
一个相册的实现   获取 a 元素 href 路径       var source =whichpic.getAttribute("href");   获取 placeholder 元素       var placeholder =docu...
一个相册的实现函数:function showPic(whichpic) {var source =  whichpic.getAttribute("href");var placeholder =  document.getElementBy...
一个相册的实现如何将函数应用到页面交互中?     事件处理函数
一个相册的实现ondblclick  鼠标双击时触发此事件onmousedown 按下鼠标时触发此事件onmouseover 当鼠标移动到某对象范围的上方  时触发此事件onload   页面内容完成时触发此事件onmove   浏览器的窗口被...
一个相册的实现<li>   <a   href="images/fireworks.j   pg"   onclick="showPic(this);   return false;" title="A   fireworks   displa...
一个相册的实现<li>   <a   href="images/fireworks.j   pg"   onclick="showPic(this);   return false;" title="A   fireworks   displa...
一个相册的实现增加提示语句    <p id="description">Choose animage.</p>怎样让提示语句部分根据图片的变化显示图片描述??
一个相册的实现回顾: DOM 树
一个相册的实现回顾: DOM 树某个节点属性是不是这棵树的一部分?node.ChildNodesnode.firstChildnode.lastChild
一个相册的实现• 修改 showPic 函数:• var text =  whichpic.getAttribute("title");• var description =  document.getElementById("descript...
一个相册的实现• 美化它!     <link rel="stylesheet" type="text/css" href="main.css"/>
Javascript 库• Prototypehttp://prototypejs.org/• Dojohttp://dojotoolkit.org/• jQueryhttp://jquery.com/
为何选择 jQuery ?• jQuery 思想: write less, do more• 封装了大量 DOM 操作• 封装 Ajax
DOM 到 jQ• document.getElementById("placeholder")• $("#placeholder")
DOM 到 jQ• 重写 javascript 的相册var source = whichpic.getAttribute("href");转换为 whichpic.hrefvar placeholder =  document.getElem...
DOM 到 jQ• 新的函数: function showPic(whichpic) {    var source = whichpic.href;    $ ("#placeholder").attr("src",source);     ...
DOM 到 jQ• 再简洁些: function showPic(whichpic) {    $ ("#placeholder").attr("src",whichpic .href);    $ ("#description").text(...
jQ 强大的选择器• $("#one")    id 选择器• $(".mini")   class 选择器• $(div)     tag 选择器• $("div span") 子孙 -> 后代
综合设计• 使用 CSS 及 javascript 仿制 Windows8 Metro  界面
综合设计• 使用 CSS 及 javascript 仿制 Windows8 Metro  界面
Upcoming SlideShare
Loading in …5
×

Web设计 4 锋利的j_query(进入企业级应用阶段)

665 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
665
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web设计 4 锋利的j_query(进入企业级应用阶段)

  1. 1. Chapter 4 锋利的 jQuery—— 进入企业级应用阶段
  2. 2. 一个相册的实现
  3. 3. 一个相册的实现 获取 a 元素 href 路径 var source =whichpic.getAttribute("href"); 获取 placeholder 元素 var placeholder =document.getElementById("placeholder"); 设置 placeholder 的 src 属性placeholder.setAttribute("src",source);
  4. 4. 一个相册的实现函数:function showPic(whichpic) {var source = whichpic.getAttribute("href");var placeholder = document.getElementById("placeholder ");placeholder.setAttribute("src",source );}
  5. 5. 一个相册的实现如何将函数应用到页面交互中? 事件处理函数
  6. 6. 一个相册的实现ondblclick 鼠标双击时触发此事件onmousedown 按下鼠标时触发此事件onmouseover 当鼠标移动到某对象范围的上方 时触发此事件onload 页面内容完成时触发此事件onmove 浏览器的窗口被移动时触发此事件参考: http://www.iteye.com/topic/517899
  7. 7. 一个相册的实现<li> <a href="images/fireworks.j pg" onclick="showPic(this); return false;" title="A fireworks display">Fireworks</a></li>
  8. 8. 一个相册的实现<li> <a href="images/fireworks.j pg" onclick="showPic(this); return false;" title="A fireworks display">Fireworks</a></li> 问题: 如果没有“ return false;” 呢?
  9. 9. 一个相册的实现增加提示语句 <p id="description">Choose animage.</p>怎样让提示语句部分根据图片的变化显示图片描述??
  10. 10. 一个相册的实现回顾: DOM 树
  11. 11. 一个相册的实现回顾: DOM 树某个节点属性是不是这棵树的一部分?node.ChildNodesnode.firstChildnode.lastChild
  12. 12. 一个相册的实现• 修改 showPic 函数:• var text = whichpic.getAttribute("title");• var description = document.getElementById("description ");• description.firstChild.nodeValue = text;
  13. 13. 一个相册的实现• 美化它! <link rel="stylesheet" type="text/css" href="main.css"/>
  14. 14. Javascript 库• Prototypehttp://prototypejs.org/• Dojohttp://dojotoolkit.org/• jQueryhttp://jquery.com/
  15. 15. 为何选择 jQuery ?• jQuery 思想: write less, do more• 封装了大量 DOM 操作• 封装 Ajax
  16. 16. DOM 到 jQ• document.getElementById("placeholder")• $("#placeholder")
  17. 17. DOM 到 jQ• 重写 javascript 的相册var source = whichpic.getAttribute("href");转换为 whichpic.hrefvar placeholder = document.getElementById("placeholder");转换为 $("#placeholder")placeholder.setAttribute("src",source);转换为 placeholder.attr("src",source);
  18. 18. DOM 到 jQ• 新的函数: function showPic(whichpic) { var source = whichpic.href; $ ("#placeholder").attr("src",source); var desc = whichpic.title; $("#description").text(desc); }
  19. 19. DOM 到 jQ• 再简洁些: function showPic(whichpic) { $ ("#placeholder").attr("src",whichpic .href); $ ("#description").text(whichpic.title ); } 加入到“示例 2” 查看效果
  20. 20. jQ 强大的选择器• $("#one") id 选择器• $(".mini") class 选择器• $(div) tag 选择器• $("div span") 子孙 -> 后代
  21. 21. 综合设计• 使用 CSS 及 javascript 仿制 Windows8 Metro 界面
  22. 22. 综合设计• 使用 CSS 及 javascript 仿制 Windows8 Metro 界面

×