jQuery basic

jquery.html.erb

<style>
  a.negrito { font-weight: bold; }
  input.fundo_verde { background-color: #8CDFAD}
</style>

<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).addClass("fundo_verde");
  });
  $("input").blur(function(){
    $(this).removeClass("fundo_verde");
  });
  $("#click").click(function(){
    alert('Você clicou no link');
  });
  $("#show_slow").click(function(){
    $("#ola").show("slow");
  });
  $("#hide_slow").click(function(){
    $("#ola").hide("slow");
  });
  $("#add_class").click(function(){
    $("a").addClass("negrito");
  });
  $("#remove_class").click(function(){
    $("a").removeClass("negrito");
  });
  $("#appendTo").click(function(event){
    $('<div>')
      .append('Evento ' + event.type + ' executado')
      .appendTo($('#div1'));
  });
  $("#replace_with").click(function(){
    $(this).replaceWith("replace");
  });
  $("#wrap").click(function(event){
    $(this).wrap('<p>Parágrafo</p>');
  });
  $("input").keyup(function(){
    var value = $(this).val();
    var input = $(this).next();
    input.val(value);
  });
});
</script>

<%= link_to "click", "#", :id => 'click' %>
<br/>
<%= link_to "show('slow')", "#", :id => 'show_slow' %>
<br/>
<%= link_to "hide('slow')", "#", :id => 'hide_slow' %>
<br/>
<%= link_to "addClass('negrito')", "#", :id => 'add_class' %>
<br/>
<%= link_to "removeClass('negrito')", "#", :id => 'remove_class' %>
<br/>
<%= link_to "appendTo", "#", :id => 'appendTo' %>
<br/>
<%= link_to "$(this).replaceWith('text')", "#", :id => 'replace_with' %>
<br/>
<%= link_to "wrap", "#", :id => 'wrap' %>

<div id='div1' style="background-color:#8CDFAD"></div>

<div id='ola' style="display:none">Olá</div>

<br/>

<p>Número: <%= text_field_tag :numero %> <%= text_field_tag 'valor_digitado', nil, :disabled => true %> </p>
<p>Nome: <%= text_field_tag :nome %>  <%= text_field_tag 'valor_digitado', nil, :disabled => true %> </p>