Find Some Elements

Find Some Elements

  • Selector:
<div id="body">

<h2>Some Header</h2>

<div class="contents">

<p>Paragraph 1</p>

<p>Paragraph 2</p>

</div>
</div>

Some Header

Paragraph 1

Paragraph 2

Do something with them

Manipulation - .after()

jQuery("a[target=_blank]")
  .after("<small> (new window)</small>");

Manipulation - .css()

jQuery("a").css({
  color: "red",
  fontWeight: "bold"
});

Interaction - .submit()

jQuery("form").submit(function(){
  if ( jQuery("#name").val() == "" ) {
    jQuery("span.help").show();
    return false;
  }
});

Interaction - .click()

jQuery("a.menu").click(function(){
  jQuery(this).next().toggle();
  return false;
});

Animation - .slideToggle()

jQuery("a.menu").click(function(){
  jQuery(this).next().slideToggle("slow");
  return false;
});

Animation - .animate()

jQuery("div.block").animate({
  fontSize: "2em",
  width: "+=20%",
  backgroundColor: "green"
});
hello!

Animation - .hide()/.show()

jQuery("div.block").hide("slow", function(){
  jQuery(this).show("slow");
});
hello!

Ajax - .load()

jQuery("div.load").load("file.html");
hello!

Ajax - .load()

jQuery("div.load").load("file.html h2");
hello!

Chaining

jQuery("div").hide();
jQuery("div").hide().css("color","blue");
jQuery("div").hide().css("color","blue").remove();

HTML Selector

jQuery("<li><a></a></li>")
  .find("a")
    .attr("href", "http://ejohn.org/")
    .html("John Resig")
  .end()
  .appendTo("ul");