jquery 확장 메서드 및 인스턴스 메서드-프런트엔드 Q&A-php.cn

jquery 확장 메서드 및 인스턴스 메서드

WBOY

풀어 주다： 2023-05-23 11:44:07

원래의

432명이 탐색했습니다.

프런트 엔드 개발에서 jQuery는 매우 인기 있는 JavaScript 라이브러리입니다. 강력한 기능과 사용 용이성으로 인해 많은 개발자가 웹 페이지를 운영하는 데 사용하도록 선택합니다. jQuery는 개발자에게 보다 효율적인 프로그래밍 경험을 제공하고 코드를 더욱 간결하게 만들 수 있는 일련의 인스턴스 메서드와 확장 메서드를 제공합니다. 이 기사에서는 jQuery의 확장 메서드와 인스턴스 메서드를 소개하고 그 사용법을 보여주는 몇 가지 예제를 제공합니다.

1. jQuery의 인스턴스 메소드

jQuery에서 인스턴스 메소드는 선택기를 통해 선택된 DOM 요소에서 직접 호출할 수 있는 메소드를 의미합니다. 다음은 일반적으로 사용되는 몇 가지 인스턴스 메서드입니다.

.addClass() 메서드

이 메서드는 아래와 같이 선택한 요소에 하나 이상의 CSS 클래스 이름을 추가할 수 있습니다.

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

로그인 후 복사

.removeClass() 메서드

이 메서드는 아래와 같이 선택한 요소에서 하나 이상의 CSS 클래스 이름을 제거할 수 있습니다.

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

로그인 후 복사

.attr() 메서드

이 메서드는 아래와 같이 선택한 요소의 속성 값을 가져오거나 설정할 수 있습니다.

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

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

로그인 후 복사

.css() 메서드

이 메서드는 아래와 같이 선택한 요소의 스타일 값을 가져오거나 설정할 수 있습니다.

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

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

로그인 후 복사

.html() 메서드

이 메서드는 스타일을 가져오거나 설정할 수 있습니다. 아래와 같이 선택한 요소 HTML 콘텐츠의 값:

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

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

로그인 후 복사

.on() 메서드

이 메서드는 아래와 같이 선택한 요소에 이벤트 리스너를 추가할 수 있습니다.

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

로그인 후 복사

2. jQuery 확장 메서드

The 확장 메소드는 jQuery 객체($)에서 직접 호출되는 메소드를 jQuery 함수(또는 전역 함수)라고 합니다.

$.extend() 메소드

이 메소드는 아래와 같이 하나 이상의 객체를 하나의 객체로 병합할 수 있습니다.

$.extend(target, object1, object2)

로그인 후 복사

여기서 target은 병합할 대상 객체이고 object1, object2 등은 병합할 소스 개체입니다.

$.ajax() 메소드

이 메소드는 HTTP 요청을 보내는 데 사용됩니다. 비동기 방식으로 백엔드 API에서 데이터를 얻을 수 있으며 아래와 같이 성공 또는 실패 후 콜백 함수를 처리할 수 있습니다.

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

로그인 후 복사

$.getJSON() 메서드

이 메서드는 GET을 보내는 데 사용됩니다. 요청하고 응답 데이터를 JSON 형식으로 가져옵니다. $.ajax() 메서드에 비해 $.getJSON() 메서드는 아래와 같이 더 간단하고 코드가 적습니다.

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

로그인 후 복사

IV. 예제 데모

다음은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!