Introduction

This article was created for those new to jQuery. If you are interested, please read it.

Notes on js files

jQuery is described in the js (javascript) file, but you need to be careful when reading the file. As an example, when reading a js file (sample.js) into an html file

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <p>Text to be read into js file</p>
  </body>
</html>

(Since jQuery is used, there is another script tag), but if you want to change the sentence "text to be loaded into the js file" when reading the html file, sample. js

$("p").text("The text may change")

When it becomes

The text does not change!

・・ The reason is that javascript does not recognize the element until it can read the html file and identify the html element (p tag etc.), so it starts after the html file has finished reading. If you want to, write as follows.

//If you put the content you want to execute in this, it will be executed
$(function(){
  $("p").text("The text may change")
})

If you are interested, please see what happens when you open the html file in two cases!

jQuery syntax

By the way, it seems that some people are more interested in what you have done so far, so I will explain that. First, the basic syntax of jQuery is as follows.

$("Selector (element name, class name, etc.)")... (After this, the selector comes with a method to execute)

Actually, this is similar to CSS, and it takes the style of writing what kind of processing is performed after first specifying it with the selector. Therefore, the contents of the js file mentioned earlier are

  $("p").text("The text may change")
→ Specify the p tag and change the text in it to "The text may change"

It will be like that. (By adding $ to the selector, the element is fetched and the jQuery method can be used.)

Precautions regarding selectors

After that, as you get used to it, you will be able to use it naturally, but what you should be careful about here is that the selector is worn. What does that mean, for example

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <p>I want to make it red!</p>
    <p>I want to make it blue!</p>
  </body>
</html>

There is an html file called, and sample.js is written as follows.

$(function(){
 $("p").css("color","red")
 $("p").css("color","blue")
})

If you write it like this,

All sentences will be blue.

The reason is that when p is set as a selector, all p tags are specified, and all of them are instructed to change the color. Therefore, if you want to specify them separately, use the class name or id name.

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <p id="red">I want to make it red!</p>
    <p id="blue">I want to make it blue!</p>
  </body>
</html>

$(function(){
 $("#red").css("color","red")
 $("#blue").css("color","blue")
})

[Supplement] How to specify the class name in Rails

In Rails, it is convenient to first set the class name as "controller name_action name". For example, the index action of the mains controller

class = "mains_index"

If you specify it in the tag at the top of the file, you don't have to overlap it with the class name in other files.

[RUBY] The idea of jQuery