jquery拡張メソッドとインスタンスメソッド-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-23 11:44:07

オリジナル

427 人が閲覧しました

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

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

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

.addClass() メソッド

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

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

ログイン後にコピー

.removeClass() メソッド

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

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

ログイン後にコピー

.attr() メソッド

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

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

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

ログイン後にコピー

.css( )メソッド

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

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

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

ログイン後にコピー

.html()メソッド

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

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

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

ログイン後にコピー

.on() メソッド

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

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

ログイン後にコピー

2. jQuery の拡張メソッド

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

$.extend() メソッド

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

$.extend(target, object1, object2)

ログイン後にコピー

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

$.ajax() メソッド

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

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

ログイン後にコピー

$.getJSON() メソッド

#This メソッドGET リクエストを送信し、JSON 形式で応答データを取得するために使用されます。以下に示すように、$.ajax() メソッドと比較して、$.getJSON() メソッドはシンプルでコードが少なくなります:

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

ログイン後にコピー

4. デモの例

を以下に示します。これは、jQuery の拡張メソッドとインスタンスメソッドを使用して簡単な例を処理する方法を示しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery实例和拓展方法演示</title>
</head>
<body>

  <!-- 示例DOM元素 -->
  <div id="example">
    <p>jQuery实例和拓展方法演示</p>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>

    // 使用实例方法
    $('#example').addClass('test');
    $('#example').on('click', function() {
      alert('点击了example元素');
    });

    // 使用拓展方法
    var settings = {
      url: 'https://randomuser.me/api/',
      method: 'GET',
      dataType: 'json'
    };
    $.ajax(settings).done(function(response) {
      var $paragraph = $('<p>').text('随机用户：' + response.results[0].name.first);
      $('#example').append($paragraph);
    });

  </script>
</body>
</html>

ログイン後にコピー

この例では、最初にインスタンスメソッドを使用して、ID が「example」の要素に「test」クラスを追加し、クリックイベントをバインドします。次に、拡張メソッドを使用して GET リクエストを送信し、ランダムなユーザーのデータを取得してページに表示します。

概要

この記事では、jQuery の拡張メソッドとインスタンスメソッドの概念と使用法を紹介し、それらの使用法を示すいくつかの例を示します。インスタンスメソッドを使用するか拡張メソッドを使用するかに関係なく、フロントエンド開発タスクをより迅速かつ便利に完了し、開発効率を向上させるのに役立ちます。

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