jQuery / jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기

jQuery를 사용할 때 다른 라이브러리와 충돌이 나는 경우가 있습니다. 충돌의 원인은 두 가지로 구분할 수 있습니다.

  1. 다른 라이브러리와 충돌
  2. 다른 버전의 jQuery와 충돌

각 경우에 대해서 어떻게 충돌을 방지할 수 있는지 알아보겠습니다.

다른 라이브러리와 충돌

jQuery는 $를 jQuery의 alias로 사용합니다. 그런데 다른 라이브러리에서 $를 함수나 변수로 사용한다면 jQuery가 제대로 작동하지 않을 수 있습니다. 이를 방지하는 방법은 jQuery에서 $를 alias로 사용하지 않도록 하는 것입니다.

아래의 코드를 넣으면 $를 다른 라이브러리가 사용하고, jQuery 코드를 만들 때는 $ 대신 jQuery를 사용합니다.

jQuery.noConflict();

만약 계속해서 $를 사용하고 싶다면 다음과 같이 합니다. AAA에서는 jQuery가 $를 사용하고, BBB에서는 다른 라이브러리가 $를 사용합니다.

jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
  // AAA
});
// BBB

jQuery의 alias를 다른 것으로 만드는 방법도 있습니다.

var jb = jQuery.noConflict();

위와 같이 하면 $ 대신 jb를 jQuery의 alias로 사용합니다.

jb( 'p' ).addClass( 'abc' );

다른 버전의 jQuery와 충돌

흔한 경우는 아니지만 여러 버전의 jQuery를 사용하는 경우가 있습니다. 이런 경우 충돌을 방지하는 방법은 버전별로 alias를 따로 만들어 주는 것입니다.

<script src='jquery-1.11.1.js'></script>
<script>
  var jb = jQuery.noConflict();
</script>
<script src='jquery-2.1.1.js'></script>
<script>
  var hs = jQuery.noConflict();
</script>

1.11.1을 사용할 때는 jb를, 2.1.1을 사용할 때는 hs를 alias로 사용합니다.

같은 카테고리의 다른 글
jQuery / input 값 변화 감지하기 / change, keyup

jQuery / input 값 변화 감지하기 / change, keyup

input 요소에 값을 입력하거나 선택했을 때, 이를 감지하여 어떤 작업을 할 수 있다. input의 type이 number일 때, checkbox일 때, radio일 때로 나누어서 어떻게 감지하는지 알아본다. input type="number" 숫자를 입력할 수 있는 폼 두 개를 만들고, 값을 입력했을 때 두 수의 곱을 출력해보자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킨다. 문법 .before( content ) 다음은 h1 요소 앞에 Hello를 내용으로 갖는 p 요소를 추가한다. $( 'h1' ).before( '<p>Hello</p>' ); 다음은 클래스 값으로 a를 갖는 h1 요소 앞에 클래스 값으로 b를 갖는 p 요소를 이동시킨다. $( 'h1.a' ).before( $( 'p.b' ) ); 예제 ...

jQuery / Method / .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드

jQuery / Method / .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드

.removeClass() .removeClass()로 선택한 요소에서 클래스 값을 제거할 수 있습니다. 문법 .removeClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).removeClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있습니다. $( 'h1' ).removeClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 제거되는 것이므로, 제거되기 전의 모양에서 제거된 후의 모양으로 변하는 것을 방문자가 볼 ...

jQuery / Method / .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드

jQuery / Method / .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드

.has() .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 $( 'h1' ).has( 'span' ) 은 span 요소를 가지고 있는 h1 요소를 를 선택합니다. 예제 span 요소를 포함하고 있는 h1 요소의 글자색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...

jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

.wrapAll() .wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다. 문법 .wrapAll( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 모든 p 요소를 모아서 div 태그로 감쌉니다. 예제 1 .wrap()은 선택한 요소에 각각 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...

jQuery / Selector / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자

jQuery / Selector / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자

:checked는 체크박스(checkbox)에서 선택한 요소, 라디오 버튼(radio)에서 선택한 요소, 선택 목록(select)에서 선택한 요소(option)를 선택하는 선택자이다. 예제 1 - 라디오 버튼 색을 선택하면, div 요소의 배경색을 바꾼다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { ...

jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드

jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드

.toggleClass() .toggleClass()로 선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 $( 'p' ).toggleClass( 'xyz' ); 는, p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Selector / :empty - 내용이 없는 빈 요소를 선택하는 선택자

jQuery / Selector / :empty - 내용이 없는 빈 요소를 선택하는 선택자

:empty는 내용이 없는 빈 요소를 선택하는 선택자이다. 문법 $( ':empty' ) 예를 들어 다음은 div 요소 중 내용이 없는 것을 선택한다. $( 'div:empty' ) 예제 표에서 내용이 없는 셀에 N/A 문자열을 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> table { ...

jQuery / 자식 요소의 개수를 기준으로 부모 요소 선택하기

jQuery / 자식 요소의 개수를 기준으로 부모 요소 선택하기

자식 요소의 개수를 기준으로 부모 요소을 선택하기 위해서는 스크립트를 이용해야 합니다. 다음은 jQuery를 이용한 간단한 예제입니다. li 요소를 3개 이상 가진 ol 요소를 선택해서 글자를 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> .a ...

jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드

jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드

.attr() .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다. 문법 1 - 속성의 값 가져오기 선택한 요소의 속성의 값을 가져온다. .attr( attributeName )  예를 들어 아래는 div 요소의 class 속성의 값을 가져온다. $( 'div' ).attr( 'class' ); 문법 2 - 속성 추가하기 선택한 요소에 속성을 추가한다. .attr( attributeName, value )  예를 들어 아래는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 ...