Review: JQuery

1.DOM access with jQuery

$("h1");     //select all the h1s
$("#heading");    // selects the element with id of "heading"
$(".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

//when you use jQuery to find elements, 
//jQuery return back a jQuery collection object.
var $heading = $('h1');

//turn a DOM node into a jQuery object
var $heading = $(heading);

//retrieve the DOM node out of a jQuery object
var heading = $heading[0];

 

looping through collections

// jQuery's each():
$("p").each(function(index, element) { 
    $(element).text( $(element).text() + "!!"); 
});

// this keyword
$("p").each(function() { 
    $(this).text( $(this).text() + "!!"); 
});

 

4.DOM events in jQuery

Adding an event listener

$("#save-button").on("click", function() {
   // handle click event
});

$("#face-pic").on("click", function(event) {
   var mouseX = event.pageX;
   var mouseY = event.pageY;
});

 

Triggering events

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