Find Some Elements

• Full CSS Selector 1-3 Support
• Better CSS Selector support than most browsers

Find Some Elements

<div id="body">
  
<h2>Some Header</h2>
  
<div class="contents">
    
<p>Paragraph 1</p>
    
<p>Paragraph 2</p>
  </div>
</div>

Do something with them

• Manipulation (append, prepend, remove)
• Interaction (click, hover, toggle)
• Animations (hide, show, slideDown, fadeOut)
• Ajax (load, get, post)

Manipulation - .after()

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

• Run
• Google
• Microsoft
• Yahoo

Manipulation - .css()

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

• Run
• Google
• Microsoft
• Yahoo

Interaction - .submit()

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

• Name:
• Please enter your name!

Interaction - .click()

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

• Menu A
  • Item 1
  • Item 2
• Menu B
  • Item 1
  • Item 2

Animation - .slideToggle()

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

• Menu A
  • Item 1
  • Item 2
• Menu B
  • Item 1
  • Item 2

Animation - .animate()

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

• Run

Animation - .hide()/.show()

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

• Run

Ajax - .load()

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

• Run

Ajax - .load()

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

• Run

Chaining

• You can have multiple actions against a single set of elements

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");

• Run