前端开发之Js

1,334 views

Published on

  • Be the first to comment

前端开发之Js

  1. 1. 前端开发之 Javascript 网站技术部 市场开发部 前端 ( 魏
  2. 2. 大纲 工具和环境 浏览器基础 jquery 基础 roadmap
  3. 3. 简介 页面组成 开发流程 开发环境
  4. 4. 页面组成 结构 行为样式
  5. 5. 开发流程html css js
  6. 6. 开发环境 编辑器: aptana(eclipse), notepad++, vim, dreamweaver 浏览器: firefox(firebug) / chrome ( 兼容性测试 IE6789) IETest 或 虚拟机 其它 : fiddler 等
  7. 7. 浏览器基础 事件 样式 AJAX
  8. 8. 事件 常见事件 (bind) 事件源 (target), 事件信息 (Event) 事件冒泡 (delegate)
  9. 9. DOM
  10. 10. DOM / BOM document.getElementById(id) attachEvent / addEventListener page jqu bind, attr, first, last, append, remove ery D addEventListerner, get/setAttribute, firstChild, window.open, O lastChild, appendChild, removeChild close M
  11. 11. 选择器 #id .class [name=...] 更多 http://api.jquery.com/category/selectors/ $(#header) <div id=”header” ... $(ul.topnav) <ul class=”topnav”><li ... $(ul.topnav, #header) <input name=”search”$(#header input[name=search])
  12. 12. 样式 addClass/removeClass css
  13. 13. jquery $ = JQuery = function 基础,如迭代 事件 bind, trigger,delegate trim, each, extend, map... 属性 attr jquery object add/removeClassIsArray, isPlainObject closest, find, first, last, filter Ajax Dom 操作 append, remove, replace 动画 animate fadeOut, fadeIn, slide
  14. 14. ajax Browser Server open XMLHttpRequest jsonp $(<script>).attr(url, ...).append(head)xhr: 同域, get/post 都可以Jsonp: 只能是 get, 跨域也可
  15. 15. Javascript 面向对象 普通单例对象 多实例对象 ( 类 )
  16. 16. 遗漏了什么? Javascript 语法,语义 标准库
  17. 17. 《 javascript 权威指南》 《 Javascript 高级程序设计》 《 javascript 语言精粹》 Javascrip t 语言 《 HeadFirst DesignPattern 》 jquery Lib/ 组 设计, jquery ui 件库 模块化 common amd 单元测 试 性能 qunit 自动化 jasmine 测试《高性能网站建设指南》 Html5/c watir《高性能网站建设进阶指南》 ss3《高性能 Javascript 》
  18. 18. 链接 http://wd.alibaba-inc.com 前端文档,组件文档 Http://www.jquery.com Http://www.w3schools.com Demo: http://wd.alibaba- inc.com/doc/page/.personal/qijun.weiqj/js-study-2/index.htm
  19. 19. Q&A

×