• 1. jQuery 培训文档By Adrew
  • 2. 前端工程师的由来
  • 3. javascript的发展历史2004年以前网站Table布局1.JS前端验证 2.可炫耀的奇技淫巧 3.网上有一些奇妙的JS代码2004年Ajax出现 DIV+CSS开始流行1.DIV+CSS使得网页代码与样式分离成为可能 2.Ajax异步调用改变了网页数据获取方式 3.闭包,继承的特性被发掘,prototype框架出现2007年Web2.0 ,Webgame流行JS框架大爆发1.jQuery,yui,ext等框架开始诞生 2.UED逐渐为人所认识 4.JS被赋予更多的交互和体验要求 5.前端工程师的细分开始出现 6.RIA成为趋势
  • 4. jS流行框架介绍Prototype + script.aculo.us jQuery Mootool YUI EXT
  • 5. jQuery 优点核心库体积小,更少的带宽占用 代码简洁,学习曲线低 在线API文档全,Demo示例全 开源社区插件丰富 jQuery 核心库jQuery UIjQuery PluginsAPP 应用JS库
  • 6. jQuery 1.4新特性
  • 7. jQuery 1.4新特性
  • 8. jQuery 1.4新特性.focusin() .focusout() .delay() .clearQueue() .last() jQuery.proxy() jQuery.parseJSON
  • 9. Dom获取$(“#id”) 根据ID获取对象 【推荐】 $(“.css”) 根据CSS获取对象 【性能差,不推荐】
  • 10. selector  $(“div input”) div 下的所有层级的input $(“div > input”) div下次级的input $(“a[id^=edit]”) 找到id以edit打头的A链接 $(“a[id$=edit]”) 找到id以edit结尾的A链接 $(“a[id*=edit]”) 找到id包含edit的A链接 原则: 1.尽量少用表达式,多用ID 2.如果一定用表达式,不用从根部找起。
  • 11. traversing  .children() .parent() .each() .eq(index ) .first() .last() $('li').each(function(index) { alert(index + ': ' + $(this).text()); });$(‘ul’).children() 返回对象数组$('li').eq(2).css('background-color', 'red');
  • 12. CSS操作 .css(propertyName, value) .css(map) .addClass(className) .removeClass(className) .toggleClass() $('li'). css('background-color', 'red'); $(‘li’). css({'background-color‘: 'red'});
  • 13. Dom操作 .html() .text() .val() .append(content) .appendTo(target) .prepend(content) .prependTo(target) .before(content) .insertBefore(target) .after(content) .insertAfter(target) .remove() .empty() $("p").append("Hello"); $("p").prepend("Hello ");$("p").insertAfter("#foo"); $("p"). insertBefore("#foo");
  • 14. Ajax操作 核心: $.ajax() => 对 XMLHttpRequest 的封装参数说明: type:GET / POST / PUT / DELETE url: 请求地址 data: 参数 dataType: xml/html/script/json/jsonp/text success: 回调 async:true 默认异步 /false GET:read POST:Create PUT:update DELETE:destroy
  • 15. Ajax操作 jQuery.get( url, [ data ], [ callback(data, textStatus, XMLHttpRequest) ], [ dataType ] ) jQuery.post( url, [ data ], [ success(data, textStatus, XMLHttpRequest) ], [ dataType ] ) jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] ) jQuery.getScript( url, [ success(data, textStatus) ] ) 如何跨域?
  • 16. Tips:数据交互的两种方式 JSON 优点:传输体积小,带宽小,对象属性可以重复利用 缺点:客户端 会引入更多表现层逻辑,Dom操作过多 场景:适合网页中点的更新,或者需要利用属性值细粒度操控。 HTML片段 优点:客户端逻辑简单 缺点:传输体积大,对象值无法二次利用 场景:适合网页中区块的显示更新
  • 17. event .bind(events) .unbind(event) .click() .dblclick() .keydown() .keypress() .keyup() .mousemove() .mouseover() .mouseout .hover() .resize() .live() 动态元素绑定 .toggle() 点击绑定 one() 只绑定一次 .focus() 不支持事件冒泡 .blur()不支持事件冒泡 .focusin() 支持事件冒泡 .focusout()支持事件冒泡.
  • 18. Tips 事件冒泡 事件冒泡: 当一个元素上的事件被触发的时候,这个事件从原始元素开始一直冒泡到DOM树的最上层,这一过程被称为事件冒泡。 目标元素: 任何一个事件的目标元素都是最开始的那个元素 事件的冒泡和捕获 捕获是从上级元素到下级元素, 冒泡是从下级元素到上级元素. 事件冒泡的优点和缺点: 1.那些需要创建的以及驻留在内存中的事件处理器少了。 2.在DOM更新后无须重新绑定事件处理器了。 不是所有的事件都能冒泡 blur、focus、load和unload不能像其它事件一样冒泡。
  • 19. Tips 事件冒泡
  • 20. utilities jQuery.browser jQuery.each(collection,callback(indexInArray, valueOfElement)) jQuery.extend() jQuery.parseJSON 1.4新增 ,提高效率,代替eval()
  • 21. effects 核心: $.animate() .animate( properties, [ duration ], [ easing ], [ callback ] ) .animate( properties, options )
  • 22. effects .show( duration, [ callback ] ) .hide( duration, [ callback ] ) .fadeIn( [ duration ], [ callback ] ) 淡入 .fadeOut( [ duration ], [ callback ] ) 淡出 .slideUp( [ duration ], [ callback ] ) 上滑收 .slideDown( [ duration ], [ callback ] )下滑出 .delay( duration, [ queueName ] ) 暂停 1.4新增
  • 23. effects序列 .queue( [ queueName ] ) 动作排成序列 .dequeue( [ queueName ] ) 执行下一个后丢弃 .stop() 停止 .clearQueue() 清除序列 1.4新增
  • 24. 面向对象的JS 对象的属性: JSON对象Remote 对象映射闭包:从外部读取局部变量 优点:模仿对象构造属性和方法,使得jS更加结构化,对象化 缺点:容易造成循环调用,局部变量不能删除,造成内存泄露对象的方法
  • 25. 比较知名常用插件 TreeView AjaxForm Validator Hotkey 。。。。 jQueryUI
  • 26. 写自己的插件 方法一:重载jQuery的根部优点:直接绑定在根部,使用方便 缺点:容易与其他插件同名冲突
  • 27. 写自己的插件 方法二:定义自己的命名空间优点:具有架构性,模块性,不容易同名冲突 缺点:不是在根部,如果要用到对象需要传值进去
  • 28. 动态参数魔法
  • 29. 高性能的JS 使用jQuery1.4替代1.3 使用for替代each() 使用ID替代class选择器 如果一定用表达式,增加上下文条件 推荐使用缓存和自定义变量,避免使用dom做变量 避免多次DOM操作 压缩JS体积, JS放在底部 合并JS库并增加缓存 JS库按需载入
  • 30. 高性能的JS each慢的原因 50条以下,each影响可以忽略
  • 31. 高性能的JS 错误的代码:正确的代码:定义变量,减少DOM的读取
  • 32. JS性能监测 方法一: 自己写监听(也可以封装成console插件)方法二: 使用YSLOW的概况搜集
  • 33. 内存泄露 JavaScript垃圾回收机制: 自动垃圾回收机制,当一个对象无用的时候,就会从内存中释放掉这个变量 内存泄露原因 循环引用 导致 内存不能释放 三个对象 A 、B 、C      A->B->C :A的某一属性引用着B,同样C也被B的属性引用着。如果将A清除, 那么B、C也被释放。      A->B->C->B :这里增加了C的某一属性引用B对象,如果这是清除A,那么B、C不会被释放,因为B和C之间产生了循环引用。1.避免产生循环引用 2.不用的变量要清除
  • 34. 参考资料 http://api.jquery.com/ 图书:在线API
  • 35. Q & A
  • 36. 谢 谢