jQuery 기본, 요소의 배치

jQuery

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 라이브러리

 

jQuery의 장점

• 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능
• HTML DOM을 손쉽게 조작 가능하며, CSS 스타일도 간단히 적용 가능
• 애니메이션 효과나 대화형 처리를 간단하게 적용
• 같은 동작을 하더라도 더욱 짧게 구현 가능
• 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능

 

jQuery의 기초 표현

$(선택자).동작함수();

 

• $ 는 jQuery() 함수의 축약 형태로, 식별자 역할

 

jQuery의 메소드  - 기본

jQuery 쓰는 법	의미	예시
$( 선택자 ).val();	value 값을 가져올 수 있다.	var value = $("input").val();
$(선택자).val(“설정할 값”);	value 값을 설정할 수 있다.	$("input").val("설정완료");
$( 선택자 ).css( “속성” , “속성값” );	Style을 변경할 수 있음	$("span").css("color", "blue"); $("span").css("font-size", "28px"); ------------------------------------------------------------------------- var span = document.querySelector("span"); span.style = "font-size: 10px; color: red;";
$( 선택자 ).attr( “속성”, “속성값” );	속성을 변경할 수 있음	$("#li2").atr((style, "color: red");
$(선택자).text("글자");	Text 값을 변경함	$("span").text("jQuery로 바꿨습니다."); ------------------------------------------------------------------------- var span = document.querySelector("span"); span.innerText= "js로 설정하였습니다.";
$( 선택자 ).html( html );	태그 안에 특정 태그 추가	$("span").html("<h1>jQuery로 바꿨습니다.</h1>"); ------------------------------------------------------------------------- var span = document.querySelector("span"); span.innerText= "<h3>js로 설정하였습니다.</h3>";
$( 선택자 ).append( 요소 );	선택한 요소으의 자직 요소 중 마지막으로 추가	$("p").append(h1); ------------------------------------------------------------------------ p.appendChild(h1);

jQuery의 메소드  - 요소의 배치 

 

jQuery 쓰는 법	의미	예시
$( 선택자 ).append( 요소 );	선택된 요소의 자식 요소 중 마지막으로 추가	$("p").append(h1);
$( 선택자 ).prepend( 요소 );	선택된 요소의 자식 요소 중 첫번째로 추가	$("p").prepend(h1);
$( 선택자 ).before( 요소 );	선택된 요소의 형제 요소로 이전 형제로 추가``	$("p"). before(h1);
$( 선택자 ).after( 요소 );	선택된 요소의 형제 요소로 다음 형제로 추가	$("p").after(h1);
$( 선택자 ).remove();	• 선택한 요소를 DOM 트리에서 삭제 • 인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제	$("p").remove(h1); || $("p").remove();
$( 선택자 ).empty();	• 선택한 요소의 자식 요소를 모두 삭제 • 선택된 요소는 남아 있고 그 안이 다 비워진다	$("p").empty();