jquery는 셀렉터를 이용해 DOM에서 가져온 객체를 jquery내장함수를 이용해 다양하게 가공할 수 있다.
예를들어
위와같이 DOM을 읽어들여서 innerHTML을 수정할 수있다.
비슷한것 같지만 셀렉터로 읽어오지 않은
document.getElementsByTagName('div')[0] 에서는 html() 함수를 사용할 수 없다.
따라서
var d = document.createElement('div');
로 만들어진 div는 DOM Object가 될 수는 있지만 Jquery객체는 아니므로 Jquery에서 지원하는 내장함수들을 사용할 수 없다.
jquery의 동적이벤트 등록방식이 필요해서 위와같은 경우 처리법을 찾아봤는데 혹시나 하고
$(d).click(function(){alert();});
이렇게 써보니 Object를 Jquery객체로 인식했다. 해서
$(div).css('color','#f00').html('클릭이벤트 동적으로 등록').click(functionname).appendTo($('body'));
하게되면 onclick태그가 없이도 해당객체에 이벤트를 등록할 수 있다.
click이벤트가 아닐경우는 Jquery객체.bind('mouseover', function); 등의 형식으로 사용가능하다
그런데 $(document.createElement('div')).click(function(){alert();});
이렇게 하면 한줄이네.
예를들어
<body>
<div></div>
<script type="text/javascript">
//<![CDATA[
$(document).ready( function() {
$('div').html('동적으로 추가된 innerHTML');
});
//]]>
</script>
</body>
※스크립트 태그는 head, 또는 body사이에만 넣을것!
<div></div>
<script type="text/javascript">
//<![CDATA[
$(document).ready( function() {
$('div').html('동적으로 추가된 innerHTML');
});
//]]>
</script>
</body>
※스크립트 태그는 head, 또는 body사이에만 넣을것!
위와같이 DOM을 읽어들여서 innerHTML을 수정할 수있다.
비슷한것 같지만 셀렉터로 읽어오지 않은
document.getElementsByTagName('div')[0] 에서는 html() 함수를 사용할 수 없다.
따라서
var d = document.createElement('div');
로 만들어진 div는 DOM Object가 될 수는 있지만 Jquery객체는 아니므로 Jquery에서 지원하는 내장함수들을 사용할 수 없다.
jquery의 동적이벤트 등록방식이 필요해서 위와같은 경우 처리법을 찾아봤는데 혹시나 하고
$(d).click(function(){alert();});
이렇게 써보니 Object를 Jquery객체로 인식했다. 해서
$(div).css('color','#f00').html('클릭이벤트 동적으로 등록').click(functionname).appendTo($('body'));
하게되면 onclick태그가 없이도 해당객체에 이벤트를 등록할 수 있다.
click이벤트가 아닐경우는 Jquery객체.bind('mouseover', function); 등의 형식으로 사용가능하다
그런데 $(document.createElement('div')).click(function(){alert();});
이렇게 하면 한줄이네.