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

jQuery初心者はこれだけでOK!progateで学習したjQueryまとめ

More than 1 year has passed since last update.

なんのためにまとめるのか?

将来的に
「えーっと、jQueryってどう書くんだっけ…?(てへぺろ)」
って困っている自分の未来が容易に想像できるので、

1:備忘録として残し
2:書きながら復習をして記憶にも残りやすくし
3:jQuery初心者が、このページ見ただけでjQueryの基礎マスターしたぜ!って気持ちになる
ために書いておこうぞい。

jQueryとは?

javascriptライブラリ。
webブラウザで動作するjsのよくつかう道具をまとめてくれている。

jQueryの基本的な使い方は?

jQueryオブジェクトの作成→メソッドの呼び出し。
つまり「何を(オブジェクト)」「どうするか?(メソッド)」と記述すればOK!
例えば、こんな感じ。

html
<head>
<!-- ここでjQueryライブラリを読み込んでいる。jQuery利用時に必須の1行目 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<div id="id">
 <h1 class="class">jQueryの使い方</h1>
 <p>簡単だよ!</p>
</div>

<!-- この記述で外部ファイルのjQuery.jsを参照。bodyの最後に記述すると処理速度UP! -->
<!-- jQuery利用時に必須の2行目 -->
<script src="jQuery.js"></script>
</body>
jQuery.js
//この外部ファイルを自分で作成する
$(function(){

$('h1').hide();
 →HTMLの要素をセレクタで指定。

$('#id')
→定義したidをセレクタで指定

$('.class')
→定義したclassをセレクタで指定

$('#id').イベント名(function(){});

});

基本的にjQueryを使うときはclassではなく、
idで指定してあげるとidはhtmlファイル内に1つしかないので処理が高速化されまっせ。

書き方のポイントは
\$();の中に
function(){}が入っていて、
その中に$('#id').hide();などが入っていること。

(よくどこに;つけるんだっけ?とか
()と{}はどうすんのよ?って混乱しがちなので…汗)

出てきたメソッド一覧(覚えられなくても、左のストックに入れて後でカンペすればおk)

js
//hideメソッド
$('#id').hide();

//fadeInメソッド
$('#id').fadeIn();
//引数で、アニメーションの速度を、例えば1500ミリ秒に指定できる。
//引数に'slow'などとしてもアニメーション速度を指定可能。

//fadeOutメソッド
$('#id').fadeOut(1500);
//引数で、アニメーションの速度を、例えば1500ミリ秒に指定できる。

//slideUpメソッド
$('#id').slideUp(1500);
//引数で、アニメーションの速度を、例えば1500ミリ秒に指定できる。

//slideDownメソッド
$('#id').slideDown(1500);
//引数で、アニメーションの速度を、例えば1500ミリ秒に指定できる。


//showメソッド
$('#id').show();
//もともとcssのdisplay: none;で隠れているような要素を表示することができる。

//cssメソッド
$('#id').css('プロパティ','');

$('#id').css('color','red');
$('#id').css('display','none');

//htmlメソッド
//<p>こんにちは</p>という要素がHTML内にあるとき
$('').html('<span>Hello</span>');
//とすると、こんにちはが消え、<span>Hello</span>と書き換えられる。

//textメソッド
//<p>こんにちは</p>という要素がHTML内にあるとき
$('p').text('Hello');
//とすればHelloに書き換わる。

//findメソッドとchildrenメソッド
すべての子孫要素に対して、特定のセレクタを探すfindメソッド。
子要素に対してだけ、特定のセレクタを探すchildrenメソッド。

$(function() {
  $('#find-method').click(function() {
    // findメソッドで、「#wrapper」内にあるすべての「a」要素を取得し、
    // cssメソッドで文字の色をredに指定する
    $('#wrapper').find('a').css('color','red');

  });

  $('#children-method').click(function() {
    // childrenメソッドで、「#wrapper」の一階層下にある「a」要素を取得し、
    // fadeOutメソッドで隠す
    $('#wrapper').children('a').fadeOut();

  });
});

出てきたイベント一覧(覚えられなくても、左のストックに入れて後でカンペすればおk)

クリックイベント click

js
$(function(){
   //idというidを持つ要素が、clickされたときにfadeOutする処理。
  $('#id').click(function(){
  $('#id').fadeOut();
  });
});

//#hide-textというidを持つHTMLの要素がクリックされたら、slideUpで隠すという意味
$(function(){
  $('#hide-text').click(function(){
    $('#text').slideUp();
  });
});

若干、応用編!(でもまだまだ大丈夫…なはず!)

this

すべてを同じように扱うならthis!

html
<ul>
    <li class="list-item">リスト1</li>
    <li class="list-item">リスト2</li>
    <li class="list-item">リスト3</li>
</ul>
js
$(function() {
  $('.list-itme').click(function(){
//どのli要素をクリックしてもcssメソッドが動くようにthisをつかっている
    $(this).css('color','red');
  });  
});

何度も同じセレクタを使うときはコレ!

変数に代入してしまえ!

js
//何回も$('div')って書きたくねーよ…
//そんなときはこちら!
var $div = $('div');

$div.css('color','red');
$div.text('hello');

そして同じ要素に対してjQueryを反映させるなら
いちいち上のように書かずに。。。こう!
(ドットでメソッドがつながっているのでメソッドチェーンという)
処理速度もUPするぞい!

js
$div.css('color','red').text('hello');

マウスがのったときの動作hover

ポイントはマウスがのったときのfunctionと、
マウスがはずれたときのfunctionをセットで記述すること。

js
$(function() {
  $('#language-wrapper').hover(function(){
    $('.language-text').fadeIn();
  },function(){
    $('.language-text').fadeOut();
  });
});

最後に

他にもjQueryはいろいろできます。
まずは基本的な書き方だけ使うことができれば
後は独学でもなんとかなるっす。

Keiと開発したエロ診断メーカーや、
Ed.D.(Eros Driven Development)のホームページもjQueryを使いこなすことができれば、もう少し動きがあって面白いサイトになる。
その実装はまた今度ということで。

ではではドロン!!

pocket_ma_kun
エロスは地球を救うと信じるデザインエンジニア。プログラミング(フロント&バック)と動画編集で人類を労働=奴隷解放することが使命。海でのんびりしてるの好き。作ったプロダクトは下記HPから。ではではドロン!
https://twitter.com/pocket_ma_kun?lang=ja
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした