jQuery allows you to select one or many elements all at the same time, unlike JavaScript where you had to specifically choose a selector type to get what you wanted.
All the different visitors' actions that a web page can respond to are called events. An event represents the exact moment when something happens. Examples: hover a mouse over an element, select a radio button, click a button, etc. Most DOM events from JavaScript have an equivalent jQuery method
Following are some of the most common events:
click()
This attached an event handler function to the HTML element. The function is executed when the user clicks on the HTML element.
$("p").click(function() {
$(this).hide();
});
hover()
This method takes two functions and a combination of the mouseenter() and mouseleave() methods.
The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:
$("#p1").hover(function() {
alert("You entered p1!");
},
function() {
alert("Bye! You now left p1!");
});
focus() and blur()
Both the focus() method and the blur() method attaches an event handler function to an HTML form field. The focus() function is executed when the form field gets focus. The blur() function is executed when the form field loses focus.
The requiredparams parameter defines the CSS properties to be animated.
The optionalspeed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optionalcallback parameter is a function to be executed after the animation completes.
Remember that all CSS property names must be camel-case when used with this method. You will need to write paddingLeft instead of padding-left, etc.
Also, you can only animate CSS values that take a numeric value. Example: {opacity: 0.5} If you want to use a percentage instead of number, make it a string. Example: {margin: "20%"}
Also, color animation is not included in the core jQuery library. You can download a plugin for it from jQuery.com if you would like to do that.
Example: Simple fade out (with 1 sec speed) on click:
If multiple elements are on the page within the .square class, then inside the function use this instead of .square. It will only apply click event to what you actually clicked on.
fadeIn(), fadeOut(), fadeToggle(), fadeTo()
fadeIn() - Fades in the selected elements
fadeOut() - Fades out the selected elements
fadeToggle() - Toggles between the fadeIn() and fadeOut() methods
fadeTo() - Fades in/out the slected elements to a given opacity
The fade() methods can take three different parameters. Speed, easing, and callback.
The speed is in milliseconds, ie - 1000 = 1 second
Example for speed is above under animate.
Example for callback function: Here something else will happen after the fade
A regular expression is a sequence of characters that form a search pattern. It can be a single character or a more complicated pattern. The search pattern can be used for text search and text replace operations.
Example:
let regex = /is/; (Need / / around what you're checking for
let string = "Regex is great!";
let result = string.match(regex) (.match checks for the /is/)
alert(result);
/Great/i
This i stands for case insensitive search. It will search for Great and great, and all other variations
/e/g
This g stands for global. It will return not only if it's included, but will also show how many times it is there.
If there are multiple elements on the page within the same class, then inside of the function use this instead of the class name. It will only apply the click event to what you actually clicked on.
