Review: JQuery

Posted 2020-11-06 Veritas des Liberty

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