Help us understand the problem. What is going on with this article?

jQuery 基本集①~導入~

jQuery 基本集①~導入~

※ Ruby on Rails版です。

gemを使用した導入方法

Gemfileにgemを追加

Gemfileの一番下の行に、

gem 'jquery-rails'

を追加して、コマンドラインに『bundle install』を入力して、追加したgemをインストール。
直後に『rails s』を入力してサーバーを再起動させること。

インストールしたgemの読み込み

/app/assets/javascripts/application.jsに次のコードを追加して保存する。

//= require jquery 
//= require jquery_ujs
//= require_tree .

※jsコードは上から読み込まれる為、//= require_tree .よりも上に記述すること

用意はこれだけ:santa:

公式サイトからダウンロードする方法

以下のリンク先にjQueryを読み込むための記述があるので移動
リンク先

リンク先のページをスクロールしていき、jQueryという見出しと、その下の『3.x snippet』という記述があるので、3.x snippetの下のscriptタグに囲まれた記述をコピーする。スクリーンショット 2020-03-28 19.19.33.png

コピーした記述をhtmlファイルのhead内に貼り付ける(貼り付けたコードは三行目)。

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="./main.js"></script>
  <title>ki-ra-co</title>
</head>

Hamlの場合(貼り付けたのは5行目)

%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title ki-ra-co
    %script{src: "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"}
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

  %body
    = yield

jQueryってどこに書けばいいの!?

HTMLファイルに直接記述する場合

<script type="text/javascript">

/* この中にjQueryのコードを記述 */

</script>

hamlファイルに直接記述する場合

:javascript
  $(function() {

  });

JavaScriptのファイルを作って記述する場合

①HTMLの中に直接記述せず、jsの拡張子で別のjsファイルを作成して記述する
②操作対象のHTMLファイルと紐付けする。HTMLのhead内にリンク先を記述する(4行目のこと)。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- headの中に以下のように記述 -->
<script type="text/javascript" src="js/作成したjsファイル名"></script>
</head>

注意としては先にjQueryを読み込む記述をすること。

今回はここまで:santa:

SIS-CATS
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away