jQuery 기본(배열관리)

• jQuery를 사용한 배열 관리(1)

 jQuery를 사용해 배열을 관리할 때는 each() 메서드를 사용합니다. each() 메서드는 매개 변수로 입력한 함수를 사용하여 for in 반복문처럼 객체나 배열의 요소를 검사하는 메서드 입니다.

 

첫 번째 형태인 $.each() 메서드를 사용해 보겠습니다.

 

 아래의 script 태그에 배열 array를 선언 합니다. 배열 array는 5개의 객체를 가지고 있고, 각 객체는 name 속성과 link 속성을 가지고 있습니다.

 

 $.each() 메서드의 첫 번째 매개 변수에는 배열을 넣습니다. 두 번째 매개 변수는 매개 변수로 index와 item을 갖는 함수를 넣습니다. 여기서, 두 번째 매개 변수로 넣은 함수의 매개 변수 index는 배열의 인덱스 또는 객체의 키를 의미하며 매개 변수 item는 해당 인덱스나 키가 가진 값을 의미합니다.

 item 객체 안에 들어 있는 name 속성과 link 속성을 사용해 링를 만들어 body 태그의 뒷부분에 넣습니다.

 

HTML

 

실행한 화면

 

• jQuery를 사용한 배열 관리(2)

 앞 절에서 자바스크립트의 배열을 $.each() 메서드를 사용해 다루어 보았습니다. 이 절에서는 자바스크립트 jQuery의 배열 객체를 다루는 방법을 사용해 보겠습니다. jQuery의 배열 객체는 따로 만드는 것이 아니라 선택자를 사용해 여러 개의 문서 객체를 선택할 때 생성됩니다.

 

우선 style 태그에서 hight_light 클래스의 background 속성을 지정합니다.

 

-addClass() : 문서 객체에 class 속성을 추가하는 메서드입니다.

-removeClass() : 문서 객체의 class 속성을 제거하는 메서드 입니다.

 

HTML

 

실행한 화면

 $()메서드를 사용해 h1 객체를 선택하면 현재 body 태그 안에 h1 태그가 다섯 개이므로 다섯 개의 문서 객체를 가져옵니다. 각 객체에 다르게 설정하고 싶을 때 each() 메서드를 사용합니다.

 

 each() 메서드의 매개 변수로 입력하는 함수는 첫 번째 매개 변수에 index를 가지며, 두 번째 매개 변수에는 각각의 item을 가집니다. 앞 절의 $.each() 메서드와 차이가 없습니다.

 

기존 한 개의 클래스에 적용된 색상에서 서로 다른 색상 적용을 위해 다섯개의 색상을 적용합니다.

 

HTML

 

실행한 화면

 

$.extend() 메서드 : jQuery를 사용한 객체 확장 메서드

 기존의 자바스크립트를 사용해 빈 객체를 생성하고 이후에 새 속성을 추가할 때는 위 와 같이 추가였습니다. 이렇게 적은 수의 속성을 추가할 때는 문제 없지만 많은 수의 속성을 추가할 때, 이 방법을 사용하면 매우 귀찮고 코드가 지저분해집니다. 이러한 문제를 해결하고자 만들어진 메소드가 바로 $.extend() 메서드입니다.

 

HTML

 

실행한 화면

 코드를 실행하면 $.extend() 메서드의 두 번째 매개 변수에 입력한 객체의 속성이 object 객체에 합쳐진 것을 볼 수 있습니다.