jquery拡張メソッドとインスタンスメソッド

フロントエンド開発では、jQuery は非常に人気のある JavaScript ライブラリです。その強力な機能と使いやすさにより、多くの開発者が Web ページの操作にこれを使用することを選択しています。 jQuery は一連のインスタンス メソッドと拡張メソッドを提供しており、開発者はより効率的なプログラミング エクスペリエンスを提供し、コードをより簡潔にすることができます。この記事では、jQuery の拡張メソッドとインスタンス メソッドを紹介し、その使用法を示すいくつかの例を示します。

1. jQuery のインスタンス メソッド

jQuery においてインスタンス メソッドとは、セレクターで選択した DOM 要素から直接呼び出すことができるメソッドのことを指し、これを jQuery オブジェクトのメソッドと呼びます。一般的に使用されるインスタンス メソッドの一部を次に示します。

1. .addClass() メソッド

このメソッドは、次に示すように、選択した要素に 1 つ以上の CSS クラス名を追加できます。 ：

$('选中的元素').addClass('class1 class2');

2. .removeClass() メソッド

このメソッドは、次に示すように、選択した要素から 1 つ以上の CSS クラス名を削除できます。

$('选中的元素').removeClass('class1 class2');

3. .attr() メソッド

このメソッドは、次に示すように、選択した要素の属性値を取得または設定できます。

// 获取属性值
$('选中的元素').attr('属性名')

// 设置属性值
$('选中的元素').attr('属性名', '属性值')

4. .css( )メソッド

このメソッドは、次に示すように、選択した要素のスタイル値を取得または設定できます。

// 获取样式值
$('选中的元素').css('样式名')

// 设置样式值
$('选中的元素').css('样式名', '样式值')

5. .html()メソッド

このメソッドは、以下に示すように、選択した要素の HTML コンテンツを取得または設定できます。

// 获取HTML内容
$('选中的元素').html()

// 设置HTML内容
$('选中的元素').html('HTML内容')

6. .on() メソッド

このメソッドは、イベント リスニングを追加できます。以下に示すように、選択した要素 Object の場合:

$('选中的元素').on('事件名', function(event) {
  // 处理事件
})

2. jQuery の拡張メソッド

拡張メソッドとは、jQuery オブジェクト ($) 上で直接呼び出すことができる、jQuery と呼ばれるメソッドを指します。関数 (またはグローバル関数)。

1. $.extend() メソッド

このメソッドは、次に示すように、1 つ以上のオブジェクトを 1 つのオブジェクトにマージできます。

$.extend(target, object1, object2)

where 、targetはマージされるターゲット オブジェクトであり、object1、object2 などはマージされるソース オブジェクトです。

2. $.ajax() メソッド

このメソッドは、HTTP リクエストを送信するために使用されます。これにより、バックエンド API から非同期でデータを取得でき、次のように成功または失敗後にコールバック関数を処理できます:

$.ajax({
  url: 'url',
  method: 'GET',
  data: 'data',
  dataType: 'json',
  success: function(response) {
    // 处理响应数据
  },
  error: function(jqXHR, textStatus, errorThrown) {
    // 处理请求错误
  }
})

3. $.getJSON() メソッド

$.getJSON('url', function(response) {
  // 处理响应数据
})

  
  




  
  

    
jQuery实例和拓展方法演示
  

  
  

以上がjquery拡張メソッドとインスタンスメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。