‹ Conventus

jQuery Basic Functions Cheat Sheet

.click

Code:

$('button.click').click(function() {
   alert('You have clicked a button!');
});

.hide

Code:

$('button.hide').click(function() {
   $('#hide p').hide('slow');
});

.show

Hidden Div

Code:

$('button.show').click(function() {
   $('#show p').show('slow');
});

.toggle

Code:

$('button.toggle').click(function() {
   $('#toggle p').toggle('slow');
});

.slideDown

Hidden Div

Code:

$('button.slideDown').click(function() {
   if ($('.slideDownHidden').first().is(':hidden')) {
      $('.slideDownHidden').slideDown('slow');
   } else {
      $('.slideDownHidden').hide();
   }
});

.slideUp

Code:

$('button.slideUp').click(function() {
   if ($('#slideUp p').first().is(':hidden')) {
      $('#slideUp p').show('slow');
   } else {
      $('#slideUp p').slideUp();
} });

.slideToggle

Code:

$('button.slideToggle').click(function() {
   $('#slideToggle p').slideToggle('slow');
});

.fadeIn

Hidden Div

Code:

$('button.fadeIn').click(function() {
   $('#fadeIn .hiddenFadeIn').fadeIn(1000);
return false; });

.fadeOut

Code:

$('button.fadeOut').click(function() {
   $('#fadeOut p').fadeOut('slow');
});

.addClass

Code:

$('button.addClass').click(function() {
   $('#addClass p').addClass('bg-new-color');
});

.before

Code:

$('button.before').click(function() {
   $('#before p').before(document.createTextNode('Hello'));
});

.after

Code:

$('button.after').click(function() {
   $('#after p').after(document.createTextNode('Hello'));
});

.append

Code:

$('button.append').click(function() {
   $('#append p').append(document.createTextNode('Hello'));
});

.html

Code:

$('button.html').click(function() {
   ('#html p').html("Hello Again");
});

.val

Code:


$('button.val').click(function() {
   var text = $(this).text();
   $('input').val(text);
});

.text

Code:

$('button.text').click(function() {
   $('#text p').text('Changed Text');
});