jQuery.fn 以外の方法：ネイティブ JavaScript とその他のライブラリ

2024-04-02

jQuery.fn とは？

例:

// jQuery オブジェクトを作成
const $div = $('div');

// プロパティにアクセス
console.log($div.length); // 1

// メソッドを実行
$div.hide();

上記の例では、$div は jQuery オブジェクトであり、length プロパティや hide() メソッドなど、jQuery.fn に定義されたプロパティやメソッドを利用することができます。

jQuery.fn の役割:

jQuery オブジェクトに共通する機能を提供する
プラグイン開発を容易にする

共通機能の提供:

jQuery.fn は、すべての jQuery オブジェクトが共通して持つ機能を定義することで、コードを簡潔に記述することができます。

// すべての div 要素を非表示にする
$('div').hide();

// すべての p 要素の色を赤にする
$('p').css('color', 'red');

上記の例では、hide() メソッドや css() メソッドは jQuery.fn に定義されているため、個別に要素を選択する必要なく、まとめて操作することができます。

jQuery.fn を利用することで、独自のメソッドを jQuery オブジェクトに追加することができます。これが、jQuery プラグイン開発の基本的な仕組みです。

$.fn.myPlugin = function() {
  // 独自の処理
};

// プラグインの使用
$('div').myPlugin();

上記の例では、myPlugin() メソッドを jQuery.fn に追加することで、すべての jQuery オブジェクトに対して利用可能になっています。

jQuery.fn サンプルコード

// ID が "my-div" の要素を取得
const $div = $('#my-div');

// class が "my-class" の要素すべてを取得
const $elements = $('.my-class');

// 最初の p 要素を取得
const $p = $('p:first');

要素の操作

// 要素を非表示にする
$div.hide();

// 要素の色を変更する
$p.css('color', 'red');

// 要素にテキストを追加する
$div.append('Hello, world!');

// 要素を削除する
$elements.remove();

イベント処理

// ボタンクリック時に処理を実行
$('button').click(function() {
  alert('ボタンがクリックされました');
});

// マウスオーバー時に要素の色を変更
$('p').hover(function() {
  $(this).css('color', 'blue');
}, function() {
  $(this).css('color', '');
});

アニメーション

// 要素をフェードインする
$div.fadeIn();

// 要素をスライドアップする
$p.slideUp();

// 要素をアニメーションで移動する
$div.animate({
  left: '100px',
  top: '50px'
});

Ajax

// サーバからデータを取得
$.ajax({
  url: '/data.json',
  success: function(data) {
    // データ処理
  }
});

// サーバにデータを送信
$.post('/data', {
  name: 'John Doe',
  email: '[email protected]'
});

jQuery.fn 以外の方法

ネイティブな JavaScript:

// ID が "my-div" の要素を取得
const div = document.getElementById('my-div');

// 要素を非表示にする
div.style.display = 'none';

// 要素の色を変更する
div.style.color = 'red';

// 要素にテキストを追加する
div.appendChild(document.createTextNode('Hello, world!'));

// 要素を削除する
div.parentNode.removeChild(div);