[jquery] JQ - $.fn (= jQuery.fn) 확장 - 사용자정의메서드 생성

목차

1. $.fn (= jQuery.fn) 예제 - 사용자정의 메서드 생성
2. $.fn (= jQuery.fn) 정의
3. $.fn (= jQuery.fn) 구문

$.fn (= jQuery.fn) 예제 - 사용자정의 메서드 생성

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

     

 <div id="hz">홈짱닷컴</div>

 <script>

// 사용자 정의 jQuery 메서드 정의

$.fn.myHost = function() {

    this.text("Homzzang.com");

    return this; // 체이닝 위해 this 반환.

};

$(document).ready(function() {

    // 사용자 정의 메서드 호출해 텍스트 변경

    $("#hz").myHost();

});

</script>

결과값: Homzzang.com 

$.fn (= jQuery.fn) 정의

 

선택자(selector) 이용 가능한 사용자정의 메서드 생성.

 

---

 

1.

return 키워드 이용해 값을 반환해야지만, 체이닝(Chaining: 특정 선택자에 대해서 여러 메서드를 연이어 연결해 실행) 가능함.

 

2. 홈짱닷컴 목차 이동 기능에 사용되는 사용자정의 메서드

https://homzzang.com/js/jquery.highlight-5.js

 

3. $.fn 공식매뉴얼 보기

https://api.jquery.com/jquery.fn.extend/ 

 

$.fn (= jQuery.fn) 구문

 

$.fn.myMethodName = function() {

    ...

};

 

또는,

 

jQuery.fn.myMethodName = function() {

    ...

};