Super Brief History on jQuery:
On August 26th, 2006 a 22 year old named John Resig released the jQuery library to the world. John and his library had one simple but prudent goal, to make the use of JavaScript much easier and less time consuming for developers. w3schools.com explains it best, “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.” If you have any doubts if John saved you time, energy, and sanity just look at this code comparison from Dr. Angela Yu’s Udemy course below:
A lot less coding, right?
Here is a picture of the the man, the myth, the legend:
Now that we have a general understanding of what jQuery is, let’s dive into some event listeners.
Events: Mouse
Beginners, like myself, can easily be intimidated by event buttons and event listeners because they are so important to a website’s quality. My hope, like John’s, is to make life easier for you and save you some time.
Mouse:
Mouse events are simple applications that make a website/app much more interactive and user friendly. In the tech-world and real world, it’s the little things that make one user experience better than the others.
- .click — when a mouse is clicked. This is a pretty general concept. When you click on something a function or action occurs. For an example of this look to the code provided above that shows a button that changes the <h1> to red when it is clicked. NOTE: events are just function methods that John(jQuery) has simplified for simple intuitive use.
- .dblclick — when a mouse is double-clicked. This is a nice attribute that can be useful for buttons or pictures. This example below will have an alert pop up to tell you that “You just double-clicked!” whenever you double click on whatever “img” that you wish to refer to (line 3). This can also be a function that leads to another page or does some other function. Think about when you double on a picture to make it larger on ebay.
3. .mouseenter / .mouseleave — when mouse enters into an elements region a written code will run. Very common example of this is when you place your curser over a word or picture that can be clicked and it highlights, pops out, or changes colors. In the below example whatever you decide reference (button, picture, text) will magically turn the <h1> heading to green causing a very agreeable sensation for the user. The same kinda of code can be written using .mouseleave
The Groovy Part:
Now that you see its not very difficult to add event listeners, here are some more ways to spruce up a website with these additions that can be connected inside the function of the above methods:
- .hide/.show — This will do what you think it will. Once a button is clicked or if the mouse goes over the referred picture or text, jQuery will either hide or show whatever you designate it. Good example of .hide is if you are trying to make an exit button. Once you hit the exit button it will “hide” whatever you tell it to hide in your function. In the example below, we are hiding or showing the <h1> heading as soon as button is clicked.
2. .slideup/slidedown — This is the fancy way to hide or show whatever you want. This would work perfect for a situation where you wanted an image to be revealed after the user clicks on a button labeled “view” or if you wanted to make a button that made an image disappear and make more room on the web page. The below example would make the <h1> heading disappear or appear.
3. .animate — Animate offers the most artistic liberties for your fonts as it can use css to change your text to whatever you can create font-wize with css. If you want to change the color, opacity, size, whatever… all you have to do is tac-on this method.
Thanks for reading!
