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 .よりも上に記述すること
用意はこれだけ
公式サイトからダウンロードする方法
以下のリンク先にjQueryを読み込むための記述があるので移動
リンク先
リンク先のページをスクロールしていき、jQueryという見出しと、その下の『3.x snippet』という記述があるので、3.x snippetの下のscriptタグに囲まれた記述をコピーする。
コピーした記述を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の場合(貼り付けたのは５行目)
%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内にリンク先を記述する（４行目のこと）。
<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を読み込む記述をすること。
今回はここまで