Ruby on Rails 实战圣经

使用 Rails 5.0+ 及 Ruby 2.3+

欢迎留下 E-mail,若有更新消息可以通知您。若您有任何意见、鼓励或勘误,也欢迎来信给我。愿意赞助支持的话,这是我的支付宝微信

jQuery 简介

  • 线上练习环境 http://jsbin.com/https://jsfiddle.net/
  • jQuery
    • 官网文件 http://api.jquery.com/
    • 版本1.x 2.x 的差异
    • 用途
      • 定位 selectors & Traverse
      • 修改 DOM manipulation
      • 绑事件 Event
      • 动画 animate
      • API 串接 Ajax
  • Selector
  • Traverse 常用于从 $(this) 出发去找目标
    • parents
    • parent
    • closest
    • first
    • last
    • prev
    • next
    • find 找下多层
    • children 只找下一层而已
    • filter
  • DOM manipulation
    • 插入
      • append
      • prepend
      • after
      • before
      • appendTo
      • prependTo
      • insertAfter
      • insertBefore
    • remove
    • attr
      • 例如超连结的 attr(“href”)
    • text
    • html
    • val
      • 针对 input, select and textarea 的 value 资料
    • css
    • toggleClass
      • addClass
      • removeClass
    • toggle
      • show
      • hide
    • slideToggle
      • slideDown
      • slideUp
    • fadeToggle
      • fadeIn
      • fadeOut
    • animate
  • Event
    • ready
    • on
      • Direct event v.s. Delegated event
      • http://jsbin.com/tinopojeni/1/edit?html,js,output
    • click
    • trigger 指定事件
    • Mouse events: click, focusin, mousedown, mousemove, mouseover, mouseenter, dbclock, focusout, mouseup
    • Keyboard Events: keypress, keydown, keyup
    • Form events: blur, select, change, focus, submit
    • bubble up 特性
    • 如何阻止超连结 # 作用? event.preventDefault()
    • 停止往上传递事件 event.stopPropagation()

参考资料

  • Udacity: JavaScript Basic
  • Udacity: Intro to jQuery
  • CodeSchool: Try jQuery

Example Code:

Ajax

  • Ajax = JavaScript 送 Request,然后处理 response,过程中浏览器不会跳一整页。
  • facebook and twitter timeline example: it’s JSON including HTML
  • append 第三方图片,用 img src (但这不算是 ajax)
  • Debugging with Chrome DevTools

jQuery 的 Ajax 用法

官方文件 >http://api.jquery.com/category/ajax/>

  • jQuery $.ajax
       $.ajax( <url>, { success: function(res) {  $(<selector>).html(res) } } )
       $.get(<url>, function(res) { ... })
       $.ajax( <url>, { data: { foobar: 1 },  success: function(res) {  $(<selector>).html(res) } } )
* Ajax Error handling (e.g. timeout)

       $ajax(<url>, { success: function(res){ ... }, error: function(request, error_type, error_message) { ... } } )
       $ajax(<url>, { success: function(res){ ... }, error: function(request, error_type, error_message) { ... } , timeout: 3000 } )
  • Add ajax loading status?
    • beforeSend
    • complete
  • 小心动态插入的 element 会没有绑到 event。要使用 Delegated Event
  • Ajax Form
       $('form').on("submit", function(e) { 
          e.preventDefault();
          $.ajax( <url>, { type: 'POST', data: { "foo":  $("#foo").val() }    }); 
  • 其中 data: $('form').serialize()
  • 注意: 无法处理档案上传
  • 再补上 success callback 把 form 移掉等等
  • JSON Response
    • $.ajax 加上
      • dataType: ‘json’ 代表 parse the response as JSON
      • contentType: ‘application/json’ 跟 server 说要 JSON 格式
      • success callback 的 response 变成 json object 了
      • codeschool 这里手动组 HTML
      • ajax url 可以换成 $('form').attr('action')
    • $.getJSON(url, function(data){ ... } )
    • $.getJSON(url, function(data){ ... } ).error(function(e){…} )

关于 jQuery Ajax,推荐以下两个教材:

  • Udacity: Intro to Ajax
  • codeSchool: jQuery The Return Flight

》回到页首