This document provides an overview of jQuery, an open source JavaScript library that simplifies interactions between HTML and JavaScript. It discusses how jQuery handles DOM manipulation, events, effects, and Ajax requests in an easy to use way. Examples are given for common jQuery tasks like selecting elements, adding/removing elements, handling events, and making Ajax requests. The document also describes how jQuery UI can be used to add interactions and widgets.

1. jQuery in Rails
Louie Zhao
Co - Founder
Caibangzi.com & IN-SRC Studio
1

2. Problem
• JavaScript programming can be hard
• Completely dynamic language
• JavaScript, by itself, isn’t useful
2

3. 3

4. JavaScript Library
• Drastically simplify DOM, Ajax, Animation
4

5. 5

6. jQuery
• An open source JavaScript library that
simplifies the interaction between HTML
and JavaScript.
6

7. twitter.com time.com microsoft.com
amazon.com wordpress.com ibm.com
7

8. 8

9. jQuery
• Cross Browser
• Small
• Lean API, fun coding
9

10. jQuery Overview
• Selector & Chaining
• DOM manipulation
• Events
• Effects
• Ajax
10

11. Selector & Chaining
$(selector).method1().method2().method3();
$('#goAway').hide().addClass('incognito');
11

12. Selector
• Basic CSS selectors
• Positional selectors
• Custom jQuery selectors
12

13. Basic CSS Selector
$('li>p')
13

14. Basic CSS Selector
$('div.someClass')
14

15. Basic CSS Selector
$('#testButton')
15

16. Basic CSS Selector
$('img[alt]')
16

17. Basic CSS Selector
$('a[href$=.pdf]')
17

18. Basic CSS Selector
$('button[id*=test]')
18

19. Positional Selectors
$('p:first')
19

20. Positional Selectors
$('img[src$=.png]:first')
20

21. Positional Selectors
$('button.small:last')
21

22. Positional Selectors
$('li:first-child')
22

23. Positional Selectors
$('a:only-child')
23

24. Positional Selectors
$('li:nth-child(2)')
$('li:nth-child(odd)')
$('li:nth-child(5n)')
$('li:nth-child(5n+1)')
24

25. Positional Selectors
$('.someClass:eq(1)')
$('.someClass:gt(1)')
$('.someClass:lt(4)')
25

26. Custom Selectors
$(':button:hidden')
$('input[name=myRadioGroup]:radio:checked')
$(':text:disabled')
$('#xyz p :header')
$('option:not(:selected)')
$('#myForm button:not(.someClass)')
$('select[name=choices] :selected')
$('p:contains(coffee)')
26

27. Add / Remove
$('div').css('font-weight','bold').add('p').css('color','red');
$('body *').css('font-weight','bold').not('p').css('color','red');
27

28. Find / Slicing
$('div').css('background-color','blue').find('img').css
('border','1px solid aqua');
$('body *').slice(2,3).hide();
28

29. Matching by
Relationship
.parents("tr:first")
29

30. Map
var values = $('#myForm :input').map(function(){
return $(this).val();
});
30

31. Controlling Chaining
$('div').add('p').css('color','red').end().hide();
$('div').css('background-color','yellow').children
('img').css('border','4px ridge maroon').andSelf
().css('margin','4em');
31

32. DOM Manipulation
• Changing contents
.html("<p>This is a paragraph.</p>")
.text("<p>This is a paragraph.</p>")
32

33. DOM Manipulation
• Inserting inside
• append(content)
• appendTo(selector)
• prepend(content)
• prependTo(selector)
33

34. DOM Manipulation
• Inserting outside
• after(content)
• insertAfter(selector)
• before(content)
• insertBefore(selector)
34

35. DOM Manipulation
• Inserting around
• Replacing
• Removing
• Copying
35

36. Events
• Page Load
• Event Handling
• Live Events
• Event Helpers
36

37. Events
• Run after DOM, but before images
$(document).ready(function() {});
37

38. Effects
38

39. Ajax
• Cross browser
$.ajax();
$.load();
$.get();
$.post();
39

40. jQuery UI
• Interactions
• Widgets
40

41. Interactions
• Draggable
• Droppable
• Resizable
• Selectable
• Sortable
41

42. Widgets
• Accordion
• Date picker
• Dialog
• Progress Bar
• Slider
• Tabs
42

43. Prototype - Controller
class BooksController < ApplicationController
def create
@book = Book.create!(params[:book])
respond_to do |format|
format.html { redirect_to books_path }
format.js
end
end
end
43

44. Prototype - View
<!-- layouts/application.rhtml -->
<%= javascript_include_tag :defaults %>
<!-- layouts/show.rhtml -->
<% form_remote_for :book, :url => books_path %>
....
<% end %>
<!-- app/views/books/create.js.rjs -->
page.insert_html :bottom, :books, :partial => 'book'
44

45. jQuery - View
<!-- layouts/application.rhtml -->
<%= javascript_include_tag 'jquery', 'jquery-ui',
'application' %>
<!-- public/javascripts/applicaton.js -->
$(document).ready(function() {
$("#new_book").submit(function() {
$.post($(this).attr("action"), $(this).serialize(),
null, "script")
return false;
});
});
<!-- app/views/books/create.js.erb -->
$("#books").append("<%= escape_javascript(render
(:partial => @book)) %>");
45

46. jQuery - View
jQuery.fn.submitWithAjax = function() {
this.submit(function() {
$.post($(this).attr("action"), $(this).serialize(), null,
"script")
return false;
});
};
$(document).ready(function() {
$("#new_book").submitWithAjax();
});
46

47. delete
<tr id="book_<%= book.id %>">
<td><%= h book.title %></td>
<td><%= h book.author %></td>
<td><%= book.price %></td>
<td><%= book.published_on.to_s %></td>
<td><%= link_to 'X', book_path(book), :method => :delete %></td>
</tr>
class BooksController < ApplicationController
def destroy
@book = Book.find params[:id]
@book.destroy
redirect_to books_path
end
end
47

48. delete
<td>
<%= link_to 'X', book_path(book), :class => "delete" %>
</td>
$(document).ready(function() {
$("a.delete").click(function(){
$.ajax({
type: "DELETE",
url: this.href
});
$(this).parents("tr:first").remove();
return false;
});
});
48

49. Date Picker
$("#book_published_on").datepicker();
49

50. Ajax Pagination
class BooksController < ApplicationController
def index
@books = Book.all.paginate :per_page => 1,
:page => params[:page]
end
end
<h2>Book List</h2>
<%= will_paginate @books %>
<table>
<tbody id="books">
<%= render :partial => 'book', :collection => @books %>
</tbody>
</table>
<%= will_paginate @books %>
50

51. Ajax Pagination
<h2>Book List</h2>
<div id="paginated_books">
<%= render :partial => 'books' %>
</div>
<%= will_paginate @books %>
<table>
<tbody id="books">
<%= render :partial => 'book', :collection => @books %>
</tbody>
</table>
<%= will_paginate @books %>
51

52. Ajax Pagination
index.js.erb
$("#paginated_books").html("<%= escape_javascript(render('books')) %>")
application.js
$(document).ready(function() {
$(".pagination a").live("click", function() { .click(function() ...
$(".pagination").html("loading...."); .live(“click”, function() ...
$.get(this.href, null, null, "script");
return false;
});
});
52

53. Thanks!
53