Learn Bootcamp From Zero

The course summarized three most important and useful jQuery events which could use 99% of the time. These three events are: click(), keypress(), and on(). Click In jQuery, click() method is a quick and easy way to add a click listener to element(s). $("selector").click(function(){ run some code}); Recall the click event in JavaScript, we have to do document.querySelector() first, then addEventListener, and give a function. The jQuery one looks much easier to apply. I create a simple HTML page with some buttons. I will show you how to use click() method to make actions on page. Then, I check whether jQuery file is connected correctly. If I want to get an alert when I click on h1, I will use "$" to select h1, then add alert message inside click() function:  $("h1").click(function(){ alert("h1 is clicked");}) As the result, when you click the h1 text, the page will pop up the alert message. We can write the ...

How to select element? In jQuery, we select an element with $() . $("Selector Name") Selecting with "$" is very similar to querySelector and querySelectorAll. In that we provide a CSS style selector. Then, jQuery will return all matching element. I updated the jQuery Demo HTML page a little by adding a <a> tag and id "test" in the list. If I want to select the h1, I just need to type $("h1")[0] in the console, and it will return us the h1. If I want to select the link, I just need to type $("a")[0] , and it will return the link. If I want to select the list with special id, I just need to type $("#test")[0] , and it will return that list. Moreover, selecting element with the dollar sign in jQuery will return a list even if there's only one item. And it is much shorter and easier to wirte syntax. How to manipulate style? The .css() method is jQuery's interface to st...

In this post, I will continue to play with grid sizes based on the last post example. Change Grid Size From Large To Medium Firstly, I make a 12 grids, and each grid is for large size device and scales to 1 units (col-lg-1). The result shows 12 grids in the same size on the desktop size page. If the window changes from desktop size to tablet size, we will change the grid size from large to medium, too. Therefore, I add additional value "col-md-2" in the class attribute. As we see, when I change the web page to a tablet size, each grid will scale 2 units to fit in a medium size device. Change Grid Size From Medium To Small Then, I create a new grid system which includes four same unit grids to fit both large and medium size device. They are colored in orange. The result shows four orange grids. If we want those grids to fit in a small device, we need to add another class attribute value "col-sm-6". When I change the w...