jQuery 함수 resize() removeClass() eq() attr() data() html()

1. resize 함수 

브라우저의 윈도우 크기가 변할때 마다 호출되는 함수 

$(window).resize(function(){
    $('span').text(x += 1);
});

아래에, 테스트 URL 이 있음

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_resize

보통, 페이지가 로드될때 onload 함수가 먼저 실행되므로, 

onload 함수에서 원하는 페이지 크기를 설정하고 resize 함수에도 같은 페이지 크기를 설정해 놓으면,

로드되는 순간부터 윈도우 크기가 변하는 모든 순간에도, 원하는 페이지 크기가 유지되게 된다.

아래 코드는, 로드되는 페이지가 화면에 꽉차가 할때 사용되는 코드이다. 

이때, CSS 에서 marign 과 padding 을 0 으로 만들어 놓아야 완벽하게 꽉 차는 페이지가 된다. 

<script type="text/javascript">    

window.onload = function() {                            

$("#mainwin").width($(window).width());      

$("#mainwin").height($(window).height());   

}

$(window).resize(function() {                             

 $("#mainwin").width($(window).width());     

 $("#mainwin").height($(window).height());   

 });                                                              

</script>                                                     

<style type="text/css">         

* {                                    

margin:0px;                

padding:0px;              

}                                      

</style>                            

2. removeClass 함수 

선택한 엘리먼트의 class 속성을 없앤다.

$("button").click(function(){
    $("p").removeClass("intro");
});

웹상에서 바로 테스트 

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_removeclass

3. eq 함수 

선택한 엘리먼트가 여러개일 경우, 지정된 순서의 엘리먼트를 반환한다.

<script>

$(document).ready(function(){

    $("p").eq(2).css("background-color", "yellow");

});

</script>

<p>My name is Donald (index 0).</p>

<p>Donald Duck (index 1).</p>

<p>I live in Duckburg (index 2).</p>

<p>My best friend is Mickey (index 3).</p>

웹상에서 바로 테스트 

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_eq

4. attr 함수 

선택한 엘리먼트의 속성을 세팅하거나 속성값을 받아오는 함수이다.

$("button").click(function(){
    $("img").attr("width","500");
});

var nWidth = $("img").attr('width');

웹상에서 바로테스트

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_attr_set

5. data 함수 

선택한 엘리먼트가 사용할 URL, 또는 Data 를 세팅하거나 가져온다.

아래의 경우 

<a id="menu" data="1">동해둘리의 IT Study</a> 

                                                                  

var data = $('.menu').attr('data');                        

alert(data)                                                    

웹상에서 바로테스트

http://www.w3schools.com/tags/att_data.asp

6. html 함수 

선택한 엘리먼트의 content ( innerHTML) 을 세팅하거나 반환한다.

$("button").click(function(){
    $("p").html("Hello <b>world</b>!");
});

웹상에서 바로테스트

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_set