웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
제이쿼리를 사용해 엘리먼트(요소)를 생성하는 방법과 간단하게 클래스, 아이디를 추가하는 방법과 또 CSS스타일과 이벤트를 지정하는 방법도 함께 알아보려합니다. 즉 제이쿼리의 기본 사용 방법에 대하여 알아봅니다.
! 제이쿼리를 사용한 엘리먼트 요소 만들기
먼저 엘리먼트를 하나 만들고 변수 testEle에 저장해봅니다. 아래처럼 DOM 엘리먼트를 간단하게 생성할 수 있습니다.
이제 만들어진 div 태그 요소에 id 어트리뷰트를 추가하려고 합니다.
testId라는 값을 가지게 되었습니다. 브라우저에 랜더링이 되면 아래처럼 되어 있겠죠.
이번에는 클래스를 추가해봅니다. testClass가 좋겠네요.
addClass 메소드를 사용했습니다. 간단하게 클래스를 추가할 수 있죠.
추가로 inline 방식의 스타일 추가역시 가능합니다.
이제 몇 가지 CSS 스타일이 추가되었습니다.
! 제이쿼리 요소에 이벤트 추가하기
클릭 등의 이벤트 역시 추가해보려합니다. 먼저 click() 메소드를 사용해 클릭 이벤트를 아까 만든 testEle에 추가합니다.
클릭 이벤트가 추가되었습니다. testEle를 클릭하면 alert() 창을 나타낼 것입니다.
! 요소 생성과 동시에 여러가지 클래스 추가, 스타일, 이벤트 등을 한 번에 추가하는 방법
위와 같이 따로 따로 정하지 않고 생성과 동시에 추가할 수도 있습니다.
$('<div'>, {스타일}, {이벤트})
코드를 보는 것이 가장 빠르게 이해할 수 있겠죠.
이처럼 요소 생성과 동시에 한 번에 여러가지 스타일, 클래스 추가에 이벤트까지 바인딩하는 방법입니다.
! 제이쿼리를 사용한 엘리먼트 요소 만들기
먼저 엘리먼트를 하나 만들고 변수 testEle에 저장해봅니다. 아래처럼 DOM 엘리먼트를 간단하게 생성할 수 있습니다.var testEle = $('<div>');
// div 태그를 생성 후 변수 testEle에 지정
// div 태그를 생성 후 변수 testEle에 지정
이제 만들어진 div 태그 요소에 id 어트리뷰트를 추가하려고 합니다.
testEle.attr('id', 'testId');
// testEle 요소에 아이디값 testId를 지정
// testEle 요소에 아이디값 testId를 지정
testId라는 값을 가지게 되었습니다. 브라우저에 랜더링이 되면 아래처럼 되어 있겠죠.
<div id="testId"></div>
이번에는 클래스를 추가해봅니다. testClass가 좋겠네요.
testEle.addClass('testClass');
// testEle 요소에 클래스명 testClass를 지정
// testEle 요소에 클래스명 testClass를 지정
addClass 메소드를 사용했습니다. 간단하게 클래스를 추가할 수 있죠.
추가로 inline 방식의 스타일 추가역시 가능합니다.
testEle.css('color', '#fff');
testEle.css('width', '60px');
testEle.css('height', '60px');
// testEle 요소에 각각의 스타일을 지정
testEle.css('width', '60px');
testEle.css('height', '60px');
// testEle 요소에 각각의 스타일을 지정
이제 몇 가지 CSS 스타일이 추가되었습니다.
! 제이쿼리 요소에 이벤트 추가하기
클릭 등의 이벤트 역시 추가해보려합니다. 먼저 click() 메소드를 사용해 클릭 이벤트를 아까 만든 testEle에 추가합니다. testEle.click(function() {
alert();
})
// testEle에 클릭이벤트를 지정
alert();
})
// testEle에 클릭이벤트를 지정
클릭 이벤트가 추가되었습니다. testEle를 클릭하면 alert() 창을 나타낼 것입니다.
! 요소 생성과 동시에 여러가지 클래스 추가, 스타일, 이벤트 등을 한 번에 추가하는 방법
위와 같이 따로 따로 정하지 않고 생성과 동시에 추가할 수도 있습니다.
$('<div'>, {스타일}, {이벤트})
코드를 보는 것이 가장 빠르게 이해할 수 있겠죠.
var testEle = $('<div>', {
id: "testId",
class: "testClass",
css: {
color: "#fff",
width: "60px",
height: "60px"
},
click: function() {
alert();
}
});
id: "testId",
class: "testClass",
css: {
color: "#fff",
width: "60px",
height: "60px"
},
click: function() {
alert();
}
});
이처럼 요소 생성과 동시에 한 번에 여러가지 스타일, 클래스 추가에 이벤트까지 바인딩하는 방법입니다.
아래의 글도 찾고 계시지 않나요?