Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

文系学生のプログラミング学習6日目ーjQueryプラグインー

More than 1 year has passed since last update.

jQueryプラグイン

今日はjQueryプラグインを学習しました。ドットインストールではクリックしたときに画像のサイズを表示するものを作ったのですが、そもそも普段JavaScriptで書いているのと何が違うのかと疑問に思い、少し調べてみたところjQueryプラグインには様々な種類があるようです。

ざっくりまとめると、

・レイアウト系
・背景系
・スクロール系
・アニメーション系
・フォーム系

などがあるようです。
これらは既存出来たものをダウンロードすることで使えると思うのですが、GitHubというサイトにとんだあとどうすれば良いのか分からなかったので、調べてみたいと思います。

またJavaScriptとの大きな違いとしてコードの量が大幅に少なくなるそうです。
時間があるときに同じ機能を2つで書き比べてみたいです。

プラグインの方法

方法としては、

1.jQuery本体を読み込む
これは公式サイトからダウンロードして、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

とHTMLに記述します。

2.jQueryプラグインを読み込む

例えばslickを使うとすると、

<script src="./js/slick.js"></script>

と書きます。

3.プラグインの起動スクリプトを書く

最後にプラグインを実際に動かすスクリプトを以下のように書きます

<script>
jQuery(function($) {
  $('.slides').slick();
})

ざっとまとめましたが、こんな感じでしょうか。
このあとは実際にコードを修正していきます。

注)起動スクリプトは必ずjQuery本体とプラグインを読み込んだあとに記述するそうでし

終わり

DrStrange
プログラミング学習中
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