[Rails] Use jQuery

Introduction

** 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.

[Event description]

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 **

Add a class to an element with jQuery

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"); });

What is animate ()?

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.

the term

** 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']").

Summary

-Get, add, and delete arbitrary html using jQuery Add / remove class -You can make any movement with animation.