Review: JQuery

1.DOM access with jQuery

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"

The jQuery function can be named $ or jQuery

$("h1");

//have the same effect
jQuery("h1");

2.DOM modification with jQuery

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

3.jQuery collections & looping

jQuery collections

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];

looping through collections

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

4.DOM events in jQuery

Adding an event listener

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

Triggering events

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

checking DOM readiness

$(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?");
});

5.Processing forms with jQuery

// 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();
});

6.DOM animation in jQuery

Changing visbility

// 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();

custom animation

$("#pic").animate({
   width: "70%",
   opacity: 0.7,
   padding: 20
}, 1000);