** 1. Add gem **
Gemfile
gem "jquery-rails"
Let's do bundle install
** 2. Add to application.js file **
app/assets/javascripts/application.js
//= require jquery //← Add here
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
Now you're ready to use jQuery.
The selector name often comes after the = in class, id . Is before the class name # is before the id name
python
$('.Selector name').event name(function(){
Processing performed when an event occurs
});
** List of events **
| click | Processing is performed when left-clicking on the specified element. |
|---|---|
| dblclick | Processing is performed when the specified element is double-clicked. |
| contextmenu | Processing is performed when the specified element is right-clicked. |
| mousedown | Processing is performed when the specified element is left or right-clicked. |
| mouseup | Processing is performed when the left or right button is pressed on the specified element and then released. |
| mouseout | The process is performed when the mouse is released from the specified element. |
| mouseover | Processing is performed when the mouse hovers over the specified element. |
| mousemove | Processing is performed when the mouse cursor moves to the specified element. |
| scroll | Processing takes place when the screen scrolls. |
| resize | Processing takes place when the width of the window changes. |
| blur | Occurs when an element loses focus |
| focus | Occurs when an element gets focus |
| load | Occurs when all resources in the document have been loaded |
| change | Occurs when an element gets focus and the value correction is complete |
| select | Occurs when the text of the input element and textarea element whose type attribute value is "text" is selected. |
| submit | Occurs when the form is submitted |
| keydown | Occurs when a key is pressed |
| keypress | Occurs when a key is pressed |
| keyup | Occurs when the key is raised |
| error | Occurs when a javascript error occurs |
Add class to element .addClass () $ (". Selector name"). AddClass ("Add class name");
Remove class from element .removeClass () $ (". Selector name"). removeClass ("Add class name");
Add / remove classes .toggleClass () toggleClass () is a method to add if the specified class does not exist in the specified element, and to delete it if it already exists. $ (". Selector name"). on ("click", function () { $ (". Selector name"). ToggleClass ("Add or remove class name"); });
Animation is realized by continuously changing the CSS property of a specific HTML element.
python
Target element.animate(CSS properties, duration, easing,function)
"Duration" is designed to be specified in milliseconds, and you can set the time until the animation is completed. "Easing" allows you to specify the behavior of the animation, and sets two types, "linear" and "swing", as a character string.
Example
python
$('h1').animate({
'fontSize': '200px'
}, 3000);
When executed, it will change from the current font size to the specified 200px while animating, and the size will change over 3 seconds.
** var **: Declare a variable to initialize any value you specify.
python
var variable name=value;
** attr () **: You can get the value of the element. ** ID selector **: A selector specified by the id attribute of the HTML element and with # added to the value of the id attribute you want to acquire. ** Class selector **: A selector that is specified by the class attribute of the HTML element and has a. Added to the value of the class attribute that you want to acquire. ** Element selector **: Targets HTML elements such as h1 and p, and uses the element name you want to acquire as it is as a selector. ** Attribute selector **: If you want to specify the attribute value of the HTML tag, you can get the attribute selector with $ ("[attribute ='value']").
-Get, add, and delete arbitrary html using jQuery Add / remove class -You can make any movement with animation.
Recommended Posts