1 $("h1");     //select all the h1s

2 $("#heading");    // selects the element with id of "heading"

3 $(".waring");    //selects all the element with class name of "warning"

$("h1");

//have the same effect

jQuery("h1");

// Set their inner text with text().

$("h1").text("All about  cats");

//Set their inner html with html().

$("h1").html("I <strong>love</strong> cats");

//set attributes with attr();

$(".dog-pic").attr("src", "dog.jpg");

$(".google-link").attr("href", "http://www.google.com");

//change CSS styles with css().

$("h1").css("font-family", "monospace");

$("h1").css({"font-family": "monospace", "color": "red"});

//add a class name with addClass().

$("h1").addClass("warning");

//create new element

var $p = $("<p>");

var $p = $('<p style="color:red;">I love people who love cats.</p>');

//append().

$("#main-div").append($p);

//insert element by prepend() or appendTo().

$("#dessert").prepend("<div class='scoop " + flavors[indexNumber] + "'></div>");

$alone.appendTo("#party");

1 //when you use jQuery to find elements,

2 //jQuery return back a jQuery collection object.

3 var $heading = $('h1');

4

5 //turn a DOM node into a jQuery object

6 var $heading = $(heading);

7

8 //retrieve the DOM node out of a jQuery object

9 var heading = $heading[0];

1 // jQuery's each():

2 $("p").each(function(index, element) {

3     $(element).text( $(element).text() + "!!");

4 });

5

6 // this keyword

7 $("p").each(function() {

8     $(this).text( $(this).text() + "!!");

9 });

1 $("#save-button").on("click", function() {

2    // handle click event

3 });

4

5 $("#face-pic").on("click", function(event) {

6    var mouseX = event.pageX;

7    var mouseY = event.pageY;

8 });

1 $("#save-button").trigger("click");

$(document).ready(function() {

  $("h1").text("Y'all ready for this?");

});

//pass your code to the jQuery function:

$(function() {

  $("h1").text("Y'all ready for this?");

});

// add an event listener to the form element

$("form").on("submit", function() {

   // process form

});

// If you are processing the form entirely in jQuery,

//then you should call preventDefault() to prevent the page reloading

$("form").on("submit", function(event) {

   event.preventDefault();

   // process form

});

// filled out for an input in a form

// you should typically use val()

var answer = $("#answer").val();

// Inside the callback function, you can reference

// the form element using the this keyword.

$("form").on("submit", function() {

  // store the value of the input with name='age'

   var age = $(this).find('[name=age]').val();

});

// for some visibility change

$("#pic").hide();

$("#pic").show();

$("#pic").toggle();

//You can pass a callback function as the second

//parameter to any of those functions

$("#pic").toggle(1000, function() {

    $("body").append("It's here!");

});

// chain multiple effects together

$("#pic").slideUp(300).delay().fadeIn();

$("#pic").animate({

   width: "70%",

   opacity: 0.7,

   padding: 20

}, 1000);