Example:

Finds all divs and makes a border. Then adds all paragraphs to the jQuery object to set their backgrounds yellow.

    $("div").css("border", "2px solid red")
            .add("p")
            .css("background", "yellow");

HTML:

<div></div>

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <p>Added this... (notice no border)</p>

Example:

Adds more elements, matched by the given expression, to the set of matched elements.

$("p").add("span").css("background", "yellow");

HTML:

<p>Hello</p><span>Hello Again</span>

Example:

Adds more elements, created on the fly, to the set of matched elements.

$("p").clone().add("<span>Again</span>").appendTo(document.body);

HTML:

<p>Hello</p>

Example:

Adds one or more Elements to the set of matched elements.

$("p").add(document.getElementById("a")).css("background", "yellow");

HTML:

<p>Hello</p><span id="a">Hello Again</span>

Example:

Adds the class 'selected' to the matched elements.

$("p:last").addClass("selected");

HTML:

<p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>

Example:

Adds the classes 'selected' and 'highlight' to the matched elements.

$("p:last").addClass("selected highlight");

HTML:

<p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>

Example:

Inserts some HTML after all paragraphs.

$("p").after("<b>Hello</b>");

HTML:

<p>I would like to say: </p>

Example:

Inserts a DOM element after all paragraphs.

$("p").after( document.createTextNode("Hello") );

HTML:

<p>I would like to say: </p>

Example:

Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.

$("p").after( $("b") );

HTML:

<b>Hello</b>

  <p>I would like to say: </p>

Example:

Show a message when an AJAX request completes.

 $("#msg").ajaxComplete(function(request, settings){
   $(this).append("<li>Request Complete.</li>");
 });

Example:

Show a message when an AJAX request fails.

 $("#msg").ajaxError(function(request, settings){
   $(this).append("<li>Error requesting page " + settings.url + "</li>");
 });

Example:

Show a message before an AJAX request is sent.

 $("#msg").ajaxSend(function(evt, request, settings){
   $(this).append("<li>Starting request at " + settings.url + "</li>");
 });

Example:

Show a loading message whenever an AJAX request starts (and none is already active).

 $("#loading").ajaxStart(function(){
   $(this).show();
 });

Example:

Hide a loading message after all the AJAX requests have stopped.

 $("#loading").ajaxStop(function(){
   $(this).hide();
 });

Example:

Show a message when an AJAX request completes successfully.

 $("#msg").ajaxSuccess(function(evt, request, settings){
   $(this).append("<li>Successful Request!</li>");
 });

Example:

Finds every element (including head, body, etc).

$("*").css("border","3px solid red");

HTML:

<div>DIV</div>

  <span>SPAN</span>
  <p>P <button>Button</button></p>

Example:

A common way to find all elements is to set the 'context' to document.body so elements like head, script, etc are left out.

$("*", document.body).css("border","3px solid red");

Example:

Find all divs, and all the paragraphs inside of them, and give them both classnames. Notice the div doesn't have the yellow background color since it didn't use andSelf().

    $("div").find("p").andSelf().addClass("border");
    $("div").find("p").addClass("background");

HTML:

<div>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>

Example:

The first button shows how an unqueued animation works. It expands the div out to 90% width '''while''' the font-size is increasing. Once the font-size change is complete, the border animation will begin. The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.

    $("#go1").click(function(){
      $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
         .animate( { fontSize:"24px" }, 1500 )
         .animate( { borderRightWidth:"15px" }, 1500);
    });

    $("#go2").click(function(){
      $("#block2").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });

    $("#go3").click(function(){
      $("#go1").add("#go2").click();
    });

    $("#go4").click(function(){
      $("div").css({width:"", fontSize:"", borderWidth:""});
    });

HTML:

<button id="go1">&raquo; Animate Block1</button>
  <button id="go2">&raquo; Animate Block2</button>
  <button id="go3">&raquo; Animate Both</button>

  <button id="go4">&raquo; Reset</button>
  <div id="block1">Block1</div>
  <div id="block2">Block2</div>

Example:

Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

$("p").animate({
      "height": "toggle", "opacity": "toggle"

    }, { duration: "slow" });

Example:

Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds. It also will do it ''outside'' the queue, meaning it will automatically start without waiting for its turn.

$("p").animate({
      left: "50px", opacity: 1
    }, { duration: 500, queue: false });

Example:

An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.

$("p").animate({
      "opacity": "show"

    }, { "duration": "slow", "easing": "easein" });

Example:

Click the button to animate the div with a number of different properties.

    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({ 
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em", 
        borderWidth: "10px"
      }, 1500 );
    });

HTML:

<button id="go">&raquo; Run</button>

  <div id="block">Hello!</div>

Example:

Shows a div animate with a relative move. Click several times on the buttons to see the relative animations queued up.

    $("#right").click(function(){
      $(".block").animate({"left": "+=50px"}, "slow");
    });

    $("#left").click(function(){
      $(".block").animate({"left": "-=50px"}, "slow");
    });

HTML:

<button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>

Example:

Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

$("p").animate({
      "height": "toggle", "opacity": "toggle"

    }, "slow");

Example:

Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.

$("p").animate({
      "left": "50", "opacity": 1
    }, 500);

Example:

An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.

$("p").animate({
      "opacity": "show"

    }, "slow", "easein");

Example:

Change the color of any div that is animated.

    $("#run").click(function(){
      $("div:animated").toggleClass("colored");
    });
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();

HTML:

<button id="run">Run</button>

  <div></div>
  <div id="mover"></div>
  <div></div>

Example:

Appends some HTML to all paragraphs.

$("p").append("<b>Hello</b>");

HTML:

<p>I would like to say: </p>

Example:

Appends an Element to all paragraphs.

$("p").append(document.createTextNode("Hello"));

HTML:

<p>I would like to say: </p>

Example:

Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.

$("p").append( $("b") );

HTML:

<b>Hello</b><p>I would like to say: </p>

Example:

Appends all spans to the element with the ID "foo"

$("span").appendTo("#foo"); // check append() examples

HTML:

<span>I have nothing more to say... </span>

  <div id="foo">FOO! </div>

Example:

Finds the title attribute of the first <em> in the page.

    var title = $("em").attr("title");
    $("div").text(title);

HTML:

<p>
    Once there was a <em title="huge, gigantic">large</em> dinosaur...
  </p>

  The title of the emphasis is:<div></div>

Example:

Set some attributes for all <img>s in the page.

    $("img").attr({ 
          src: "/images/hat.gif",
          title: "jQuery",
          alt: "jQuery Logo"

        });
    $("div").text($("img").attr("alt"));

HTML:

<img />
  <img />
  <img />

  <div></div>

Example:

Disables buttons greater than the 0th button.

$("button:gt(0)").attr("disabled","disabled");

HTML:

<button>0th Button</button>

  <button>1st Button</button>
  <button>2nd Button</button>

Example:

Sets id for divs based on the position in the page.

    $("div").attr("id", function (arr) {
          return "div-id" + arr[0];
        })
        .each(function () {
          $("span", this).html("(ID = '<b>" + this.id + "</b>')");
        });

HTML:

<div>Zero-th <span></span></div>
  <div>First <span></span></div>
  <div>Second <span></span></div>

Example:

Sets src attribute from title attribute on the image.

    $("img").attr("src", function() { 
          return "/images/" + this.title; 
        });

HTML:

<img title="hat.gif"/>
  <img title="hat-old.gif"/>

  <img title="hat2-old.gif"/>

Example:

Finds all inputs that with a name attribute that contains 'man' and sets the value with some text.

$("input[name*='man']").val("has man in it!");

HTML:

<input name="man-news" />

  <input name="milkman" />
  <input name="letterman2" />
  <input name="newmilk" />

Example:

Finds all inputs with an attribute name that ends with 'letter' and puts text in them.

$("input[name$='letter']").val("a letter");

HTML:

<input name="newsletter" />

  <input name="milkman" />
  <input name="jobletter" />

Example:

Finds all inputs with name 'newsletter' and changes the text of the span next to it.

$("input[name='newsletter']").next().text(" is newsletter");

HTML:

<div>

    <input type="radio" name="newsletter" value="Hot Fuzz" />
    <span>name?</span>

  </div>
  <div>
    <input type="radio" name="newsletter" value="Cold Fusion" />

    <span>name?</span>
  </div>
  <div>
    <input type="radio" name="accept" value="Evil Plans" />

    <span>name?</span>
  </div>

Example:

Bind a single click that adds the div id to its text.

    $("div[id]").one("click", function(){
      var idString = $(this).text() + " = " + $(this).attr("id");
      $(this).text(idString);
    });

HTML:

<div>no id</div>
  <div id="hey">with id</div>
  <div id="there">has an id</div>
  <div>nope</div>

Example:

Finds all inputs that have an id attribute and whose name attribute ends with man and sets the value.

$("input[id][name$='man']").val("only this one");

HTML:

<input id="man-news" name="man-news" />

  <input name="milkman" />
  <input id="letterman" name="new-letterman" />
  <input name="newmilk" />

Example:

Finds all inputs that don't have the name 'newsletter' and changes the text of the span next to it.

$("input[name!='newsletter']").next().text(" is not newsletter");

HTML:

<div>

    <input type="radio" name="newsletter" value="Hot Fuzz" />
    <span>name?</span>

  </div>
  <div>
    <input type="radio" name="newsletter" value="Cold Fusion" />

    <span>name?</span>
  </div>
  <div>
    <input type="radio" name="accept" value="Evil Plans" />

    <span>name?</span>
  </div>

Example:

Finds all inputs with an attribute name that starts with 'news' and puts text in them.

$("input[name^='news']").val("news here!");

HTML:

<input name="newsletter" />

  <input name="milkman" />
  <input name="newsboy" />

Example:

Inserts some HTML before all paragraphs.

$("p").before("<b>Hello</b>");

HTML:

<p> is what I said...</p>

Example:

Inserts a DOM element before all paragraphs.

$("p").before( document.createTextNode("Hello") );

HTML:

<p> is what I said...</p>

Example:

Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.

$("p").before( $("b") );

HTML:

<p> is what I said...</p><b>Hello</b>

Example:

Handle click and double-click for the paragraph. Note: the coordinates are window relative so in this case relative to the demo iframe.

    $("p").bind("click", function(e){
      var str = "( " + e.pageX + ", " + e.pageY + " )";
      $("span").text("Click happened! " + str);
    });
    $("p").bind("dblclick", function(){
      $("span").text("Double-click happened in " + this.tagName);
    });

HTML:

<p>Click or double click here.</p>
  <span></span>

Example:

To display each paragraph's text in an alert box whenever it is clicked:

$("p").bind("click", function(){
  alert( $(this).text() );
});

Example:

You can pass some extra data before the event handler:

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

Example:

To cancel a default action and prevent it from bubbling up, return false:

$("form").bind("submit", function() { return false; })

Example:

To cancel only the default action by using the preventDefault method.

$("form").bind("submit", function(event){
  event.preventDefault();
});

Example:

Stop only an event from bubbling by using the stopPropagation method.

$("form").bind("submit", function(event){
  event.stopPropagation();
});

Example:

Can bind custom events too.

    $("p").bind("myCustomEvent", function(e, myName, myValue){
      $(this).text(myName + ", hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent", [ "John" ]);
    });

HTML:

<p>Has an attached custom event.</p>
  <button>Trigger custom event</button>
  <span style="display:none;"></span>

Example:

To triggers the blur event on all paragraphs:

$("p").blur();

Example:

To pop up an alert saying "Hello World!" every time any paragraph's blur event triggers:

$("p").blur( function () { alert("Hello World!"); } );

Example:

Finds all button inputs.

    var input = $(":button").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

HTML:

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>

    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

Example:

Attaches a change even to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.

    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();

HTML:

<select name="sweets" multiple="multiple">
    <option>Chocolate</option>
    <option selected="selected">Candy</option>

    <option>Taffy</option>
    <option selected="selected">Carmel</option>
    <option>Fudge</option>
    <option>Cookie</option>

  </select>
  <div></div>

Example:

To add a validity test to all text input elements:

$("input[@type='text']").change( function() {
  // check input for validity here
});

Example:

Finds all checkbox inputs.

    var input = $(":checkbox").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

HTML:

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />

    <input type="image" />
    <input type="password" />
    <input type="radio" />

    <input type="reset" />
    <input type="submit" />
    <input type="text" />

    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>

  <div>
  </div>

Example:

Finds all input elements that are checked.

    function countChecked() {
      var n = $("input:checked").length;
      $("div").text(n + (n == 1 ? " is" : " are") + " checked!");
    }
    countChecked();
    $(":checkbox").click(countChecked);

HTML:

<form>
    <input type="checkbox" name="newsletter" checked="checked" value="Hourly" />

    <input type="checkbox" name="newsletter" value="Daily" />
    <input type="checkbox" name="newsletter" value="Weekly" />

    <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
    <input type="checkbox" name="newsletter" value="Yearly" />

  </form>
  <div></div>

Result:

[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />,
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

Example:

Finds all children of the element with id "main" which is yellow.

$("#main > *").css("border", "3px double red");

HTML:

<span id="main">
    <div></div>
    <button>Child</button>
    <div class="mini"></div>

    <div>
      <div class="mini"></div>
      <div class="mini"></div>
    </div>
    <div><button>Grand</button></div>

    <div><span>A Span <em>in</em> child</span></div>
    <span>A Span in main</span>

  </span>

Example:

Find all children of the clicked element.

    $("#container").click(function (e) {
      $("*").removeClass("hilite");
      var $kids = $(e.target).children();
      var len = $kids.addClass("hilite").length;

      $("#results span:first").text(len);
      $("#results span:last").text(e.target.tagName);

      e.preventDefault();
      return false;
    });

HTML:

<div id="container">

    <div>
      <p>This <span>is the <em>way</em> we</span> 
      write <em>the</em> demo,</p>

    </div>
    <div>
      <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write 
      the</button> demo,
    </div>

    <div>
      This <span>the way we <em>write</em> the <em>demo</em> so</span>

      <input type="text" value="early" /> in
    </div>
    <p>
      <span>t</span>he <span>m</span>orning.
      <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>

    </p>
  </div>

Example:

Find all children of each div.

$("div").children().css("border-bottom", "3px double red");

HTML:

<p>Hello (this is a paragraph)</p>

  <div><span>Hello Again (this span is a child of the a div)</span></div>
  <p>And <span>Again</span> (in another paragraph)</p>

  <div>And One Last <span>Time</span> (most text directly in a div)</div>

Example:

Find all children with a class "selected" of each div.

$("div").children(".selected").css("color", "blue");

HTML:

<div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>

    <p>And One Last Time</p>
  </div>

Example:

Finds the element with the class "myClass".

$(".myClass").css("border","3px solid red");

HTML:

<div class="notMe">div class="notMe"</div>

  <div class="myClass">div class="myClass"</div>
  <span class="myClass">span class="myClass"</span>

Example:

To trigger the click event on all of the paragraphs on the page:

$("p").click();

Example:

To hide paragraphs on a page when they are clicked:

    $("p").click(function () { 
      $(this).slideUp(); 
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });

HTML:

<p>First Paragraph</p>

  <p>Second Paragraph</p>
  <p>Yet one more Paragraph</p>

Example:

Clones all b elements (and selects the clones) and prepends them to all paragraphs.

$("b").clone().prependTo("p");

HTML:

<b>Hello</b><p>, how are you?</p>

Result:

<b>Hello</b><p><b>Hello</b>, how are you?</p>

Example:

Create a button that's able to clone itself - and have the clones themselves be clonable.

    $("button").click(function(){
      $(this).clone(true).insertAfter(this);
    });

HTML:

<button>Clone Me!</button>

Example:

Finds all divs containing "John" and underlines them.

$("div:contains('John')").css("text-decoration", "underline");

HTML:

<div>John Resig</div>

  <div>George Martin</div>
  <div>Malcom John Sinclair</div>
  <div>J. Ohn

Example:

Find all the text nodes inside a paragraph and wrap them with a bold tag.

$("p").contents().not("[nodeType=1]").wrap("<b/>");

HTML:

<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>

Example:

Append some new content into an empty iframe.

$("iframe").contents().find("body").append("I'm in an iframe!");

HTML:

<iframe src="/index-blank.html" width="300" height="100"></iframe>

Example:

To access the background color of a clicked div.

    $("div").click(function () {
      var color = $(this).css("background-color");
      $("#result").html("That div is <span style='color:" +
                         color + ";'>" + color + "</span>.");
    });

HTML:

<span id="result">&nbsp;</span>
  <div style="background-color:blue;"></div>
  <div style="background-color:rgb(15,99,30);"></div>

  <div style="background-color:#123456;"></div>
  <div style="background-color:#f11;"></div>

Example:

To set the color of all paragraphs to red and background to blue:

    $("p").hover(function () {
      $(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
    }, function () {
      var cssObj = {
        backgroundColor: "#ddd",
        fontWeight: "",
        color: "rgb(0,40,244)"

      }
      $(this).css(cssObj);
    });

HTML:

<p>
    Move the mouse over a paragraph.
  </p>
  <p>
    Like this one or the one above.
  </p>

Example:

If the property name includes a "-", put it between quotation marks:

    $("p").hover(function () {
      $(this).css({ "background-color":"yellow", "font-weight":"bolder" });
    }, function () {
      var cssObj = {
        "background-color": "#ddd",
        "font-weight": "",
        color: "rgb(0,40,244)"

      }
      $(this).css(cssObj);
    });

HTML:

<p>
    Move the mouse over a paragraph.
  </p>
  <p>
    Like this one or the one above.
  </p>

Example:

To change the color of any paragraph to red on mouseover event.

    $("p").mouseover(function () {
      $(this).css("color","red");
    });

HTML:

<p>
    Just roll the mouse over me.
  </p>

  <p>
    Or me to see a color change.
  </p>

Example:

To highlight a clicked word in the paragraph.

    var words = $("p:first").text().split(" ");
    var text = words.join("</span> <span>");
    $("p:first").html("<span>" + text + "</span>");
    $("span").click(function () {
      $(this).css("background-color","yellow");
    });

HTML:

<p>
    Once upon a time there was a man
    who lived in a pizza parlor. This
    man just loved pizza and ate it all 
    the time.  He went on to be the
    happiest man in the world.  The end.
  </p>

Example:

To bind a "Hello World!" alert box the dblclick event on every paragraph on the page:

$("p").dblclick( function () { alert("Hello World!"); });

Example:

Use dequeue to end a custom queue function which allows the queue to keep going.

    $("button").click(function () {
      $("div").animate({left:'+=200px'}, 2000);
      $("div").animate({top:'0px'}, 600);
      $("div").queue(function () {
        $(this).toggleClass("red");
        $(this).dequeue();
      });
      $("div").animate({left:'10px', top:'30px'}, 700);
    });

HTML:

<button>Start</button>

  <div></div>

Example:

Finds all input descendants of forms.

$("form input").css("border", "2px dotted blue");

HTML:

<form>
    <div>Form is surrounded by the green outline</div>
    <label>Child:</label>
    <input name="name" />

    <fieldset>
      <label>Grandchild:</label>
      <input name="newsletter" />
    </fieldset>

  </form>
  Sibling to form: <input name="none" />

Example:

Finds all input elements that are disabled.

$("input:disabled").val("this is it");

HTML:

<form>

    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>

Example:

Iterates over three divs and sets their color property.

    $(document.body).click(function () {
      $("div").each(function (i) {
        if (this.style.color != "blue") {
          this.style.color = "blue";
        } else {
          this.style.color = "";
        }
      });
    });

HTML:

<div>Click here</div>

  <div>to iterate through</div>
  <div>these divs.</div>

Example:

If you want to have the jQuery object instead of the regular DOM element, use the $(this) function, for example:

    $("span").click(function () {
      $("li").each(function(){
        $(this).toggleClass("example");
      });
    });

HTML:

To do list: <span>(click here to change)</span>
  <ul>
    <li>Eat</li>
    <li>Sleep</li>

    <li>Be merry</li>
  </ul>

Example:

You can use 'return' to break out of each() loops early.

    $("button").click(function () {
      $("div").each(function (index, domEle) {
        // domEle == this
        $(domEle).css("backgroundColor", "yellow"); 
        if ($(this).is("#stop")) {
          $("span").text("Stopped at div index #" + index);
          return false;
        }
      });
    });

HTML:

<button>Change colors</button> 
  <span></span>
  <div></div>
  <div></div>

  <div></div>
  <div></div>
  <div id="stop">Stop here</div>
  <div></div>

  <div></div>
  <div></div>

Example:

Finds every DIV element.

$("div").css("border","3px solid red");

HTML:

<div>DIV1</div>

  <div>DIV2</div>
  <span>SPAN</span>

Example:

Finds all elements that are empty - they don't have child elements or text.

$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');

HTML:

<table border="1">
    <tr><td>TD #0</td><td></td></tr>
    <tr><td>TD #2</td><td></td></tr>

    <tr><td></td><td>TD#5</td></tr>
  </table>

Example:

Removes all child nodes (including text nodes) from all paragraphs

    $("button").click(function () {
      $("p").empty();
    });

HTML:

<p>
    Hello, <span>Person</span> <a href="javascript:;">and person</a>
  </p>

  <button>Call empty() on above paragraph</button>

Example:

Finds all input elements that are enabled.

$("input:enabled").val("this is it");

HTML:

<form>
    <input name="email" disabled="disabled" />

    <input name="id" />
  </form>