제이쿼리(jQuery) - 제어(변경, 변환)

변경, 변환

기본

.text() : 해당 요소에 text 요소를 삽입 또는 변경

.html() : 해당 요소에 html 요소를 삽입 또는 변경

.val() : 해당 요소의 value 값을 삽입 또는 변경

 

.replaceAll()

해당 요소들로 인자 요소를 대체

$('<h2>New heading</h2>').replaceAll($("div"));
// div 요소를 <h2>New heading</h2> 요소로 변경한다.

 

.replaceWith()

해당 요소들을 인자의 요소로 바꾼다.

replaceAll() 과 선택, 인자(target)이 반대

$("div").replaceWith('<h2>New heading</h2>');
// <h2>New heading</h2> 요소로 div 요소를 변경 시킨다.

배열

.toArray()

선택한 요소 DOM 집합을 자바스크립트 배열로 만든다.

var arr = $("div").toArray();
// arr[0] === <div>Hello</div>

 

$.makeArray

jQuery 집합의 요소 값을 JavaScript 배열로 변환한다.

var arr = $.makeArray($("input"));
// arr[0] === "Hello"

 

$.map()

선택된 배열 요소를 순서대로 callback 함수를 통해 얻어진 리턴값을 포함하는 새로운 jQuery 오브젝트 생성

var arr = $("div").map(function(){
	return $(this).text().toUpperCase();
	//선택된 요소들의 text값을 대문자로 변경한다.
});

var arr = $("div").map({width : 10, height: 15} ,function(value, index){
	return index;
	//key를 반환한다. ["width", "height"]
});

 

$.globalEval()

문자열로 명령어를 실행시켜준다.

$.globalEval("var newVar = true;")
// newVar == true

 

$.merge()

두개의 배열을 첫번째 배열에 합침

$.merge([0,1,2],[2,3,4]);
// 첫번째 배열 결과 : [0,1,2,2,3,4]

$.merge($.merge([],[0,1,2]),[2,3,4]);
// 첫번째 배열의 값을 유지하기 위해 새로운 배열을 만든다.

 

$.trim() 

문자열 앞뒤에 있는 공백 문자를 제거하고 결과 반환

var trimStr = $.trim(str);
// str === " abc def ff "; trimStr === "abc def ff";

 

$.unique()

element 배열의 중복된 모든 element를 제거

- string, number 배열에서는 동작 X

var divs = $.unique(divs);
// divs의 중복 선택되어 들어간 element를 제거

$.parseJSON()

JSON문자열을 JavaScript object로 반환

var obj = $.parseJSON('{"name":"John"}');
// 문자열 {"name":"John"}을 JavaScript object로 변환
alert(obj.name==="John");
// JavaScriptObject인 obj에서 name 요소인 John

※ 참고 : 형식이 어긋난 JSON 문자열을 인자로 사용하면 exception이 발생한다.

문자열의 key 와 value 는 쌍따옴표("")를 사용해야 한다.

 

XML문서

$.parseXML()

유효한 XML문서를 파상한다.

$title = $.parseXML(xml).find("title");
// xml 파일에서 title의 값을 찾는다.