クリエイター：コーディング備忘録ブログ

RSS

コーディング

jQueryで関数を使用

2018.08.21

関数はjQueryなど、複数の処理をまとめて一つにしたものです。

functionその後に関数名の後に()を記述し{}の中に処理内容を書きます。

便利なのは、複数回同じ処理を書かなくて済むので、必要な時にまとめて使いまわすことができます。

<script>
  $(function(){
    function 関数の名前(){
      処理内容を記述
      
    }
  });
</script>
	
関数名 ()

1

2

3

4

5

6

7

8

9

10

<script>

$(function(){

function 関数の名前(){

処理内容を記述

}

});

</script>

関数名 ()

liやクラス名「btn」をクリックやマウスオーバーした時のaタグの動作を実際に関数で記述すると下記のようになります。

<script>
$(function(){
    function color_change () {
      var a_props = {
       "color" : "FFF",
       "background" : "#333",
      }
      $("a").css(a_props);
    }
    $('li')
        .on('mouseover', color_change);
    $('.btn')
        .on('click', color_change);
});
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<script>

$(function(){

function color_change () {

var a_props = {

"color" : "FFF",

"background" : "#333",

}

$("a").css(a_props);

}

$('li')

.on('mouseover', color_change);

$('.btn')

.on('click', color_change);

});

</script>

a要素に対するcssの変更を関数にすることで、いちいち処理を書かずに、簡潔に書くことができます。

チェックボタンがすべてチェックされているかの判定

前の記事

jQueryでスクロール位置を取得

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

HTML,CSSがブラウザのどのバージョンに対応しているか確認するWEBサービス

2017.03.31

コーディング

レスポンシブ対応のテクニック

2018.09.12

コーディング

slick.js中央の画像を大きく表示させる方法

2019.02.25

コーディング

WP Theme Test

2018.11.12

コーディング

WordPressサイトの中で静的htmlを共存させる

2018.12.05

コーディング

makeshopでのテンプレート

2017.05.16