ウェブ制作の登竜門jQueryって意外と簡単【Javascript初心者】

こんにちは。最近はjQueryを触ってるので初心者なりにjQueryってこんな感じってのをスーパーシンプルにまとめたいと思います。

jQueryとは

JavascriptのライブラリでDom操作（html、cssに書き込むのではなく、Javascriptでhtmlとcssに命令して変化させる）をもっと短い文章で書いて大丈夫だよーって感じのものです（笑）

初期設定

ローカルエディタ（atomとか）の場合

releases.jquery.com

外部リンク

 

90 Users

23 Pockets

jQuery CDN

https://releases.jquery.com

このサイトからJqueryのURLを取得してコピーして自分のHTMLのheadに貼り付ける。

バージョン3系で問題なければ（保守でなく新規で作成するなら基本最新バージョンを使います）

<script
  src="https://code.jquery.com/jquery-3.7.0.js"
  integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
  crossorigin="anonymous"></script>

Codepen/WebMakerの場合

WebMakerであればAddLibraryから、codepenであれば設定よりJqueryを選べば選択できます。

最初に書かないといけない文

(function($){
ここにjQueryを書きます
})(jQuery);

 そしてJSを書く場所にこの今からjQuery書きますよー的なのを書けばスタートです。

jQueryの主にできること

基本的にはDom操作を短い文で書いちゃおうなので主にページが開かれたりスクロールしたりボタンがクリックした結果変化を起こすことがメインの目的ですね。

なのでよく書かれる文はこんな感じになります。

$(function(){
$('要素').発動動作(どうしたいか () {
});
});

要素

ここに要素が入って簡単に言うとhtmlのタグですね。

例えば<p>、<h1>、<div>iのid、classですね。$(‘p’)とかIDだと$(‘#ID名’)Classだと$(‘.class名’)になります。

これをJavascriptで書くと

document.getElementsByName(“要素名”);と書かないといけないものが短くわかりやすくかけるってことですね。

発動動作

ここには何か動作を起こしたらその次のどうしたいかを作動させます。

clickとかmouseoverをよく使うと思います。

結果どうなるか

ここは基本的にfunctionですね。その後にもう一度要素を取得（$(this)は上の要素と同じ）して要素にどのように変化するか命令することができます。

$('要素').mouseover(function () { 
　　$(this).css("background-color", "yellow"); 
});

結果この要素にはcssがJavascript(jQuery)を通して変化することができます。

まとめ

現段階で言うとJavascriptのif文やfor文ができることを理解をしていれば、他は命令する文章だけ覚えてればとりあえずはどうやって動いてるのかってことは理解できます。

ただ、自分で書くとなるとん？ってなることもありまだまだ初心者に毛が生えた程度なので修行が足りないなーと思います。

とりあえずやろうと思ってる人はざっとJavascript（そんな深くなくていい）の基礎をやったあとにこっちをやるといいかも。

 がんばろう。（笑）

それではSeeYaaaaa!!!

sgw

フロントエンド

XFacebook

カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。