[RUBY] The idea of jQuery

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.

Recommended Posts

The idea of jQuery
The idea of quicksort
The secret to the success of IntelliJ IDEA
About the idea of anonymous classes in Java
Judgment of the calendar
The world of clara-rules (4)
The world of clara-rules (1)
The world of clara-rules (3)
The world of clara-rules (5)
I tried using the profiler of IntelliJ IDEA
I tried the new feature profiler of IntelliJ IDEA 2019.2.
About the handling of Null
Docker monitoring-explaining the basics of basics-
About the description of Docker-compose.yml
Understand the basics of docker
The play of instantiating java.lang.Void
Explanation of the FizzBuzz problem
The basics of Swift's TableView
Median of the three values
The illusion of object orientation
Switch the version of bundler
The idea of cutting off when the error is not resolved
About the behavior of ruby Hash # ==
[Java] Delete the elements of List
Continuation: The parable of OOP (omitted)
Qualify only part of the text
About the basics of Android development
'% 02d' What is the percentage of% 2?
[Rails] Check the contents of the object
Replace the contents of the Jar file
[Java version] The story of serialization
Check the version of Cent OS
[Swift] Change the textColor of UIDatePicker
Explanation of the order of rails routes
I read the source of ArrayList I read
The basics of SpringBoot + MyBatis + MySQL
Note on the path of request.getRequestDispatcher
The basic basis of Swift dialogs
The basic basis of Swift's Delegate
I read the source of Integer
This and that of the JDK
Check the migration status of rails
Filter the fluctuations of raw data
Explaining the columns of Spree :: Taxonomy
A memorandum of the FizzBuzz problem
Official logo list of the service
Various methods of the String class
About the role of the initialize method
Think about the 7 rules of Optional
[For beginners] Personally thinking about the cause of the error-the idea of ​​the solution
I read the source of Short
Order of processing in the program
I read the source of String
The origin of Java lambda expressions
[Ruby] Display the contents of variables
Summary about the introduction of Device
Remote debugging of the Cognos SDK
About the log level of java.util.logging.Logger
Get a rough idea of the differences between protocols, classes and structs!
The story of encountering Spring custom annotation
Display text on top of the image