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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

前端开发之Js

  • 606 views
Published

 

  • 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
606
On SlideShare
0
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