jqueryメソッドの作り方

TOPページに戻る > jquery入門

スポンサード リンク

jqueryメソッド作成

jqueryのメソッドは自分で作ることができます
jQuery.fn.メソッド名にfunction(){処理}を代入します jQueryは$でも代用できます

jQuery.fn.メソッド名 = function(){
	新しく作ったメソッドの処理
}

実際はこんな感じです

$.fn.hoge = function(){
	新しく作ったメソッドの処理
}

作ったメソッドの使い方、hogeとゆうメソッドを作った場合

$("セレクタ").hoge();

指定したHTML要素をクリックしたときにイベントを実行する

maxwメソッドを作ります。 ボタンをクリックしたときにセレクタで指定したHTML要素の中で横幅が一番長い値を取得します。

jquery

$(function() {
  $.fn.maxw = function() {
    var huga = 0;
    this.each(function() {
      huga = Math.max( huga, $(this).width() );
    });
    return huga;
  };
  $("button").click(function(){
  var hun=$("#hoge,#hoge2,#hoge3").maxw();
	$("#foo").text("横幅の最大値は" + hun + "px" );
	});
});
css
#hoge{
 width: 50px;
  border: 1px solid; }
#hoge2{
 width: 100px;
  border: 1px solid; }
#hoge3{
 width: 200px;
  border: 1px solid; }

html

<button>ボタン</button>
<div id="hoge">50px</div>
<div id="hoge2">100px</div>
<div id="hoge3">200px</div>
<div id="foo">横幅の最大値は</div>

サンプル

50px
100px
200px
横幅の最大値は








(C)2012 ホームページ作成無料