【ドットインストール】jQuery入門を受講した感想

ドットインストールのjQuery入門の受講が完了しました。

#ドットインストール
jQuery入門ajaxのとこはさらっとながしたけど完了。
ここから #30DAYSトライアル 2ndに復帰する。#プログラミング学習 #駆け出しエンジニアと繋がりたい

— じゅに💻脱サラに命かける人 (@Jyu210) January 5, 2020

学習内容

jQueryの基本的な構文とメソッドについて学習します。

このレッスンは全ての動画を無料を視聴することが可能です。

順番に見ていきます。

セレクタ、メソッドについて

セレクタ	処理対象となるDOM要素を指定する記法
メソッド	処理
メソッドチェーン	メソッドをつなげて記述すること

セレクタの指定方法

html要素	$(‘html要素’) 例：$(‘p’)、$(‘h1’)など
id指定	$(‘#id名’) 例：$(‘#header’)、$(‘#main’)
クラス指定	$(‘.class名’) 例：$(‘.container’)、$(‘.tilte’)
直下の子要素（>)	例：$(‘#header > h2’) #header直下のh2要素
以下の要素(半角スペース)	例：$(‘#header p’) #header以下の全てのp要素
複数の要素(,)	例：$(h2, p) h2とp要素
隣接する要素(+)	例：$(‘.item + .item’) .itemに隣接する.item

セレクタに対するフィルタ

指定した順番の要素	eq() 例：$(“#sub > li:eq(2)”).css(‘color’, ‘red’); 2番目のli要素
指定した順番より大きい要素	et() 例：$(“#sub > li:gt(2)”).css(‘color’, ‘red’); 2番目より大きい要素
指定した順番より小さい要素	lt() 例：$(“#sub > li:lt(2)”).css(‘color’, ‘red’); 2番目より小さい要素
偶数の要素	even 例：$(“#sub > li:even”).css(‘color’, ‘red’);
奇数の要素	odd 例：$(“#sub > li:odd”).css(‘color’, ‘red’);
指定したテキストを含む要素	contains 例：$(“#sub > li:contains(‘4’)”).css(‘color’, ‘red’); 要素の中身に「4」を含む要素
最初の要素	first 例：$(“#sub > li:first”).css(‘color’, ‘red’);
最後の要素	last 例：$(“#sub > li:last”).css(‘color’, ‘red’);

メソッドを使用したセレクタの指定

要素の親要素	parent() 例：$(‘#sub’).parent().css(‘color’, ‘red’); #subの親要素
要素の子要素	children() 例：$(‘#sub’).children().css(‘color’, ‘red’); #subの子要素
要素の次要素	next() 例：$(‘#sub > li:eq(2)’).next().css(‘color’, ‘red’); #subの直下のliの2番目の次のli要素
要素の前要素	prev() 例：$(‘#sub > li:eq(2)’).prev().css(‘color’, ‘red’); #subの直下のliの2番目の前のli要素
要素の兄弟要素	siblings() 例：$(‘#sub > li:eq(2)’).siblings().css(‘color’, ‘red’); #subの直下のliの2番目と同列の要素

属性でのセレクタの指定

指定内容と属性が等しい	= 例：$(‘a[href=”http://google.com”]’).css(‘background’, ‘red’);
指定内容と属性が等しくない	!= $(‘a[href!=”http://google.com”]’).css(‘background’, ‘red’);
指定内容を属性に含む	*= $(‘a[href*=”yah”]’).css(‘background’, ‘red’);
指定内容から属性が始まる	^= $(‘a[href^=”http://d”]’).css(‘background’, ‘red’);
指定内容で属性が終わる	$= $(‘a[href$=”com”]’).css(‘background’, ‘red’);

CSSの設定・取得方法

CSSを設定	$(‘セレクタ’).css(‘プロパティ’, ‘値’) 例：$(‘p’).css(‘color’, ‘red’)
CSSを取得	$(‘セレクタ’).css(‘プロパティ’) 例：console.log($(‘p’).css(‘color’));

クラスの追加・削除方法

クラスを追加	$(‘セレクタ’).addClass(‘クラス名’) 例：$(‘p’).addClass(‘myStyle’);
クラスを削除	$(‘セレクタ’).removeClass(‘クラス名’) 例：$(‘p’).removeClass(‘myStyle’);

属性の追加・削除方法

属性を取得	$(‘セレクタ’).attr(‘属性名’) 例：console.log($(‘a’).attr(‘href’));
属性を設定	$(‘セレクタ’).attr(‘属性名’, ‘値’) 例：$(‘a’).attr(‘href’, ‘http://yahoo.co.jp’)
カスタム属性取得	$(‘セレクタ’).data(‘属性名(「data-」は含めない」’) 例：console.log($(‘a’).data(‘sitename’));
カスタム属性設定	$(‘セレクタ’).data(‘属性名(「data-」は含めない」’) 例：$(‘a’).data(‘test’, ‘testtest’);

要素の中身の指定・取得

要素の中身を取得	$(‘セレクタ’).text() 例：console.log($(‘p’).text());
要素の中身を指定	$(‘セレクタ’).text(‘値’) 例：$(‘p’).text(‘テストテキスト’);
要素の中身にhtmlを指定	$(‘セレクタ’).html(‘値’) 例：$(‘p’).html(‘<a href=””>click me!</a>’);
要素の中身を空にする	$(‘セレクタ’).html() 例：$(‘p’).empty();
要素を削除する	$(‘セレクタ’).remove() 例：$(‘p’).remove();

要素の追加・削除

追加したい要素の宣言	let 変数名 = $(‘htmlタグ’).text(‘値’) 例：let li = $(‘<li>’).text(‘just aded’);
指定要素の前に追加	$(‘セレクタ’).before(変数) 例：$(‘#sub > li:eq(2)’).before(li);
指定要素の後に追加	$(‘セレクタ’).after(変数) 例：$(‘#sub > li:eq(2)’).after(li);
子要素の先頭に追加	$(‘セレクタ’).prepend(変数) 例：$(‘#sub’).prepend(li);
子要素の末尾に追加	$(‘セレクタ’).append(変数) 例：$(‘#sub’).append(li);

要素の変化

要素を隠す	$(‘セレクタ’).hide(隠す速度(ミリ秒)) 例：$(‘#box’).hide(800);
要素を表示する	$(‘セレクタ’).show(表示する速度(ミリ秒)) 例：$(‘#box’).show(800);
フェードアウト	$(‘セレクタ’).fadeOut(表示する速度(ミリ秒)) 例：$(‘#box’).fadeOut(800);
フェードイン	$(‘セレクタ’).fadeIn(表示する速度(ミリ秒)) 例：$(‘#box’).fadeIn(800);

要素に対するイベント

フォームに対するイベント

jQueryで動的に生成した要素に対してアクセスする場合

Ajaxについて

Ajaxは「Asynchronous(非同期) JavaScript + XML」の略でJavaScriptで非同期にサーバーと通信し、HTMLの表示を書き換える技術。

Progateとの違い

ドットインストールと並ぶプログラミング初心者向けのサービスProgate。

Progateにも当たり前のようにjQueryのレッスンがありますがドットインストールとは違い

• モーダル
• アコーディオンメニュー
• ページトップに戻るスクロール

など実際のWebページによく使用されているアニメーションを使ったWebページを作成していきながら学ぶ形式となっています。

まとめ

ドットインストールでは無料会員でも全て受講可能ということもあってか、実践というより基本的な構文やメソッドの説明にとどまっています。

一方、Progateのほうが実践的な内容になっており、メソッドなどを使用イメージがつきやすいと思います。

しかし、構文を網羅しているという点ではドットインストールのほうだと思います。

そもそもドットインストールは動画、Progateは体験型と特徴が違いますが、うまくいこと良いところが分散してる気がしますね。

そのため、jQueryを学習するにあたってはドットインストールのjQuery入門を受講してからProgateを受講するのがオススメです。