LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@masaki1117

初めてのjquery　

Last updated at Posted at 2020-03-13

jqueryの書き方

``` $(セレクター).イベント(function() { $(セレクター).命令 }); ``` 
$(document).ready(function(){
    ここにjQueryの処理を書く
});
    
省略形でも可↓

$(function(){
    ここにjQueryの処理を書く
});

操作する要素を指定する「セレクター」
操作する内容の「命令」、
操作するタイミングを決める「イベント」の3つで構成されています。

１．jQueryオブジェクトを作成
２．そのjQueryオブジェクトに対してメソッド（機能）を呼び出す
という2つが基本になります。
jQueryはJavaScript（JS）なので、文末にセミコロンが必要です。
またコメントもJS同様に//を用います。

$('セレクタ').メソッド(引数);
$(セレクタ).イベント名(イベントが発生したときに実行したい処理)

メソッドとは

便利な機能のこと。

jQueryオブジェクトの内容（HTMLの要素）を変更したり、アニメーションをつけたりすることができる。メソッドは$('セレクタ').メソッドというように、ドットに続けて呼び出します。。

hide・・・ある要素を非表示にする


$('h1').hide();　//要素を隠す

toggle

対象となるHTML要素を簡単に表示・非表示することができる。 toggle()は、「hide() show()」を1つにまとめた便利なメソッド。 toggle()メソッドだけで特定の要素を「表示・非表示」することができる。 
<body>
    <p>クリックすると表示非表示するよ</p>
    <button>ボタン</button>
</body>

<script>
$('button').click(function() {
   $('p').toggle();
 })
</script>

アニメーション設定について
toggleは引数にミリ秒を指定するだけでなく、
標準で用意されたアニメーション設定を行うことも可能です。

【 fast 】：素早く非表示にする
【 slow 】：ゆっっくり非表示にする
【 swing 】：デフォルトの非表示スタイル
【 linear 】：一定の速度で非表示にする

fadeOut・・・アニメーションさせながら非表示にすることができる

fadeOutメソッドを用いると、要素を隠す際に、アニメーションを付けることができる。 後ろの()内に引数として、アニメーションの速度を指定 

$('セレクタ').fadeOut();　//アニメーション付きで要素を隠す

slideUp

下から上にスライドし、アニメーション付きで要素を隠すことができます。 fadeOutと異なるアニメーションを実現できます。 
$('セレクタ').slideUp();　//下から上にスライドして要素を隠す

classとid

CSS同様　　　id=# class=.

 $('#title').slideUp();　 $(.title).sideUp();

displayプロパティ

display: none;/*要素を隠すことができる。*/

show・・・非表示状態にある要素を表示する

隠れた要素を表示するメソッド 表示したい要素に対し、$('セレクタ').show();と指定することで隠れた要素を表示できる。 
$('img').show();  //隠れた要素を表示するメソッド

fadeInとslideDown

fadeOutの反対としてfadeInメソッド lideUpメソッドの反対としてslideDownメソッド どちらもアニメーション付きで隠れた要素を表示することができます。 

$('セレクタ').fadeIn();　　//徐々にアニメーション付きで隠れた要素を表示する

$('セレクタ').fadeIn(show);　//ゆっくりに指定

$('セレクタ').slideDown();   //上か下にスライドするアニメーション付きで隠れた要素を表示する

$('セレクタ').slideDown(show); //ゆっくりに指定

イベントとは

イベントを用いると、ある処理を行うタイミングを設定 WEBページ内で、ユーザーによってクリックなどの操作が行われた時、 あらかじめイベント内に指定した処理を実行します。 イベントの構文は、$('セレクタ').イベント名(function(){ });のように書きます。 
$('セレクタ').イベント名function(){
//イベント発生時に実行したい処理
});

click・・・要素をクリックしたらイベントを起こす

セレクタがクリックされた時に処理をする 
<div id="text1">要素を隠す</div>
<p id="text2">クリックすると文章が隠れる</p>

$('text1').click(function(){
//クリックしたときに#text1を隠す
$('text2').hide();
}):

CSS

```javascript $('セレクタ').css('プロパティ名','値'); ```

this

イベントの中で、そのイベントが起こった要素を取得することができます。 $()の中でthisをクォーテーション（"や'）で囲まないことに注意してください。 $(this)は非常に重要な概念なので覚えておきましょう。

変数

同じjQueryオブジェクトを複数回使用する時は変数にする。
コードが見やすくなる上、jQueryの処理が高速化される。
JavaScriptと同じく、jQueryで変数宣言にはvarを用います。

変数を使用しない場合
$('div').css('color','red');
$('div').html('jquery');
$('div').fadeOut();

変数を使用した場合
var $div = $('div')

$div.css('color','red');
$div.html('jquery');
$div.fadeOut();

メソッドチェーン

同じjQueryオブジェクトを複数回使用する時は、メソッドチェーンを使うことでも処理速度を高速化。$('セレクタ').メソッド().メソッド()...のように書くことで、それぞれのメソッドが適用 
$('div').css('color',red).html('jquery');

find・・・指定した要素から、指定した条件に合致する子孫要素を選択する

すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得したいときに用いる。

children

childrenメソッドは、指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得したいときに用いる。

hover

要素にマウスが乗った時、外れた時に指定した処理を行うイベント

$('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);

clickイベントと違い、引数を2つ書くことに注意しましょう。引数の間はコンマで区切ります。

１.要素の表示・非表示(jquery)

引数には非表示にする際の時間と、コールバック関数を指定できます。

表示になっているものを非表示にする

$(要素).hide();   //hideメソッドを使うと要素を隠すことができる(display:none;同じ)//
$(要素).toggle(false);
fadeOutメソッド   //表示されている要素をフェードアウトして隠すことができる//
slideUpメソッド   //各要素の高さを操作して、下から上に消えていくイメージの効果で非表示にできる//

$(function() {
    $('button').click(function(){
        $('p').hide();
    });
});

$(function() {
    $('button').click(function(){
        $('p').toggle(false);
    });
});

非表示になっているものを表示する

$(要素).show();   //showを使うとdisplay: none;で非表示になっている要素を表示できる//
$(要素).toggle(true);
fadeInメソッド　　 //要素をフェードインして表示することができる//
slideDownメソッド　//要素の高さを操作して、上から下に出現していくイメージの効果で表示出来る//

$(function() {
    $('button').click(function(){
        $('p').show();
    });
});

$(function() {
    $('button').click(function(){
        $('p').toggle(true);
    });
});

実行されるたびに表示と非表示を切り替え

$(要素).toggle();   //toggleメソッドを使うと、showメソッドとhideメソッドを交互に実行出来る//
fadeToggleメソッド   //各要素の高さを操作して、fadeOutメソッドとfadeInメソッドを交互に実行出来る。//
slideToggleメソッド　//各要素の高さを操作して、slideDownメソッドとslideUpメソッドを交互に実行出来る。//

aminateメソッド
aminateメソッドを使えば、より多様な動きを付けることが出来ます。

便利な3つのメソッド

アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる

「slideToggle」

押すと降りてくるメニューを実装できます。アコーディオンメニューというものです。 
$("#acMenu dt").on("click", function() {
  $(this).next().slideToggle();
});

<dl id="acMenu">
<dt>アコーディオンメニュー1</dt>
<dd>アコーディオンメニューが開く。</dd>
<dt>アコーディオンメニュー2</dt>
<dd>アコーディオンメニューが開く。</dd>
<dt>アコーディオンメニュー3</dt>
<dd>アコーディオンメニューが開く。</dd>
</dl>


# acMenu dt{
display:block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
border:#666 1px solid;
cursor:pointer;
}
# acMenu dd{
background:#f2f2f2;
width:200px;
height:50px;
line-height:50px;
text-align:center;
border:#666 1px solid;
display:none;
}

「fadeToggle」

タブメニューを実現できます。タブで内容を切り替えることができます。 
<script>
$(function(){
$("#tabMenu li a").on("click", function() {
$("#tabBoxes div").hide();
$($(this).attr("href")).fadeToggle();
});
return false;
});
</script>

<ul id="tabMenu" class="clearfix">
<li><a href="#tabBox1">タブメニュー1</a></li>
<li><a href="#tabBox2">タブメニュー2</a></li>
<li><a href="#tabBox3">タブメニュー3</a></li>
</ul>
<div id="tabBoxes">
<div id="tabBox1">タブボックス1</div>
<div id="tabBox2">タブボックス2</div>
<div id="tabBox3">タブボックス3</div>
</div>

# tabMenu ul{
width:600px;
}
# tabMenu li{
float:left;
}
# tabMenu li a{
display:block;
width:198px;
height:48px;
line-height:50px;
text-align:center;
border:#ccc 1px solid;
}
# tabBox1,#tabBox2,#tabBox3{
width:598px;
height:300px;
border:#ccc 1px solid;
}
# tabBox1{
background:#FCF;
}
# tabBox2{
background:#FFC;
display:none;
}
# tabBox3{
background:#ccc;
display:none;
}

「toggleClass」

ON、OFFを切り替える動きを得意とします。これで、どの階層が選ばれているのかわかりますね。 
<script>
$(function(){
$("#acMenu dt").on("click", function() {
$(this).next().slideToggle();
$(this).toggleClass("active");//追加部分
});
});
</script>

<ul id="tabMenu" class="clearfix">
<li><a href="#tabBox1">タブメニュー1</a></li>
<li><a href="#tabBox2">タブメニュー2</a></li>
<li><a href="#tabBox3">タブメニュー3</a></li>
</ul>
<div id="tabBoxes">
<div id="tabBox1">タブボックス1</div>
<div id="tabBox2">タブボックス2</div>
<div id="tabBox3">タブボックス3</div>
</div>

# acMenu dt{
display:block;
width:185px;
height:50px;
line-height:50px;
text-align:center;
border:#666 1px solid;
cursor:pointer;
background:url(images/i_swich.png) 177px -69px no-repeat;
padding-right:15px;
}
# acMenu dd{
background:#f2f2f2;
width:200px;
height:50px;
line-height:50px;
text-align:center;
border:#666 1px solid;
display:none;
}
# acMenu dt.active{
background:url(images/i_swich.png) 177px 18px no-repeat;
}
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?