前端开发之Js
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
765
On Slideshare
765
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 前端开发之 Javascript 网站技术部 市场开发部 前端 ( 魏
  • 2. 大纲 工具和环境 浏览器基础 jquery 基础 roadmap
  • 3. 简介 页面组成 开发流程 开发环境
  • 4. 页面组成 结构 行为样式
  • 5. 开发流程html css js
  • 6. 开发环境 编辑器: aptana(eclipse), notepad++, vim, dreamweaver 浏览器: firefox(firebug) / chrome ( 兼容性测试 IE6789) IETest 或 虚拟机 其它 : fiddler 等
  • 7. 浏览器基础 事件 样式 AJAX
  • 8. 事件 常见事件 (bind) 事件源 (target), 事件信息 (Event) 事件冒泡 (delegate)
  • 9. DOM
  • 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. 选择器 #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. 样式 addClass/removeClass css
  • 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. ajax Browser Server open XMLHttpRequest jsonp $(<script>).attr(url, ...).append(head)xhr: 同域, get/post 都可以Jsonp: 只能是 get, 跨域也可
  • 15. Javascript 面向对象 普通单例对象 多实例对象 ( 类 )
  • 16. 遗漏了什么? Javascript 语法,语义 标准库
  • 17. 《 javascript 权威指南》 《 Javascript 高级程序设计》 《 javascript 语言精粹》 Javascrip t 语言 《 HeadFirst DesignPattern 》 jquery Lib/ 组 设计, jquery ui 件库 模块化 common amd 单元测 试 性能 qunit 自动化 jasmine 测试《高性能网站建设指南》 Html5/c watir《高性能网站建设进阶指南》 ss3《高性能 Javascript 》
  • 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. Q&A