Skip to content

Instantly share code, notes, and snippets.

@fabioxgn
Created March 31, 2013 12:10
Show Gist options
  • Save fabioxgn/5280421 to your computer and use it in GitHub Desktop.
Save fabioxgn/5280421 to your computer and use it in GitHub Desktop.
Basic examples os jQuery
//execute after the document is loaded
jQuery(document).ready(function() {
$("span").text("$100")
});
//select element by ID
$("#vacati­on");
//select element by class
$(".america");
//select all descendants
$("#vacation li");
$("vacation").find("li") //faster
//select only the direct descendants (first level)
$("#vacation > li");
$("#vacation").children("li")
//select multiple elements by ID or class
$("#vacation, .america");
//select first, last, even, odd
$("#vacation li:first")
$("#vacation li:last")
$("#vacation li:even")
$("#vacation li:odd")
$("#vacation").find("li").first()
//append, prepend, insertAfter, insertBefore
var text = $("<p>My Text</p>");
$(".vacation").append(text);
//ou
text.appendTo($(".vacation")
//remove
$('.button').remove()
//select class with space
<li class="usa tour">
$('.usa.tour')
//add event handler
$('button').on('click', function() {});
//acessing the object which triggered the event
$('button').on('click'), function() {
$(this).remove(). //this = button
});
//closest ancestor with class
$(this).closes(''.vacation'');
//event in buttons inside a class
$('.vacation').on('click', 'button', function(){})
//filter finds all the elements
$('.vacation').filter('.onsale');
//add a css class
.addClass('highlighted');
//removes a class from all
$('.highlighted').removeClass('highlighted');
//toggle class
.toggleClass('.highlighted');
//check if has class
if ($(this).hasClass('highlighted')) {
//accessing and setting form values
.val();
.val(7);
//accessing data
html: data-valor="teste"
$('#id').data('valor')
//display block/none
$('#id').show();
$('#id').hide();
//animate, speed optional
$('this').animate({'top': '-10px'}, speed);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment