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

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

Recommended Posts

[Rails] Use jQuery
Rails6 jQuery introduced
[Rails] Introducing jquery
Use images in Rails
How to use JQuery in js.erb of Rails6
[Rails] How to use enum
[RSpec] Let's use FactoryBot [Rails]
How to use rails join
Use multiple databases with Rails 6.0
[Rails] How to use validation
[Rails] How to use authenticate_user!
[Rails] How to use "kaminari"
[Docker] Use whenever with Docker + Rails
[Rails] How to use Scope
[Rails] How to use gem "devise"
How to deploy jQuery on Rails
[Rails] How to use devise (Note)
[Rails] How to use flash messages
Enable jQuery and Bootstrap in Rails 6 (Rails 6)
How to use Ruby on Rails
[Rails] Use cookies in API mode
[Rails] How to use Active Storage
How to introduce jQuery in Rails 6
[Introduction to Rails] How to use render
Timeless search with Rails + JavaScript (jQuery)
Use before_action! !!
Rails basics
Rails Review 1
Rails API
Rails migration
[Rails] first_or_initialize
How to use custom helpers in rails
[Ruby on Rails] How to use CarrierWave
Use XMLHttpRequest
rails tutorial
About Rails 6
Use npm while using Sprockets on Rails 5
[Rails] How to use ActiveRecord :: Bitemporal (BiTemporalDataModel)
[Rails] How to use the map method
Rails foundation
Rails memorandum
rails tutorial
Use ActiveStorage!
rails tutorial
Preparing to introduce jQuery to Ruby on Rails
[Rails] devise
[Ruby on Rails] How to use redirect_to
[Note] How to use Rails 6 Devise + cancancan
[Ruby on Rails] How to use kaminari
[Rails] Enum is easier to use! Enumelize!
rails tutorial
I tried to use Selenium like JQuery
rails tutorial
[Rails] How to use video_tag to display videos
Rails Tips
rails method
[Rails] How to use helper method, confimartion
rails tutorial
How to use credentials.yml.enc introduced in Rails 5.2
[Rails] ActiveRecord
[Rails] form_with