jQuery

a library. make js a lot easier. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

1
eg. document.querySelector("h1")  = $("h1")

Incorporate jQuery

1
2
3
4
5
6
7
<body>
    .
    .
    .
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>  //this one is from the website, copy the link
  <script src="index.js" charset="UTF-8"></script>
</body>

Place the script tag above the index.js

Ready Function

1
2
3
$(document).ready(function () {

});

if you put the jQuery tag in the head tag instead of the end of the body tag, then you need to use this ready function in js file. It means that, once our ducument is ready and then we gonna call the call back function.

Minify

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

Manipulating Styles

1
2
3
4
5
6
7
8
9
10
11
12
13
$("h1").css("color", "green"); // setting the value

console.log($("h1").css("color")); // getting the value

$("h1").addClass("big"); //addclass

$("h1").removeClass("big");

$("h1").addClass("big margin"); //add multiple classes

$("h1").hasClass("big"); // return true


Manipulating Text

1
2
3
4
5
$("h1").text("bye");  // change text
$("button").text("change");

$("button").html("<em>haha</em>"); // change HTML

Manipulating Attributes

1
2
3
4
5
6
<img src="drum.png" alt="">
<h1 class="big margin">title</h1>

console.log($("img").attr("src")); 
console.log($("h1").attr("class")); //get attribute
$("img").attr("src","guitar,png"); //set attribute

Event Listener

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("h1").click(function () {
  $("h1").css("color", "green");
});

$("button").click(function () {
  $("h1").css("color", "red");
}); //jQuery will select all the buttons, don't need to use loop

//keyboard listener
$("input").keypress(function (e) {
  console.log(e.key);
});  // listen to input box

// listen to the whole web page
$("body").keypress(function (e) {
  console.log(e.key);
});
$("").keypress(function (e) {
  console.log(e.key);
});

$("body").keypress(function (event) {
  $("h1").text(event.key);
});

method On

1
2
3
4
5
6
7
$("h1").on("mouseover", function () {
  $("h1").css("color", "green");
});
$("h1").on("click", function () {
  $("h1").css("color", "green");
});

adding and removing

1
2
3
4
5
6
7
8
9
10
11
//before, after ->  add the new element beofre the opening tag of the selected element
$("h1").before("<button>new</button>"); // create the element before the element we selected
$("h1").after("<button>new</button>");

//prepend -> add the new element just before the content of the h1 and right after the opening tag
$("h1").prepend("<button>new</button>");
// added right after the content of h1
$("h1").append("<button>new</button>");

//remove all buttons
$("button").remove();

Animation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// hide  show
$("button").on("click",function(){
	$("h1").hide();
})
$("h1").show();
// click then hide, click again then show again
$("h1").toggle();

// hide slowly
$("h1").fadeOut();
$("h1").fadeIn();
$("h1").fadeToggle();

//slideupdown
$("h1").slideUp();
$("h1").slideDown();
$("h1").slideToggle();

//customize
$("button").on("click",function(){
	$("h1").animate({opacity: 0.5}); // this method can only change a numeric value
	$("h1").slideUp().slideDown().animate({opacity: 0.5}); 
})