2.jQuery CSS

jQuery [CSS]

[CLASS]
● .addClass( className )  : 선택된 element의 클래스 추가
- $("p").addClass('myClass yourClass');

● .addClass( function(index, class{ })   // (index : 0 부터  ,lass :  element 의 현재 설정되어있는 class명)

- $("ul li:last).addClass(function(){

return 'item' + $(this).index();

});

  
● removeClass([ className])  : 선택된 element의 className에 해당하는 class를 삭제.( 예> 단,복수 삭제 가능)
- $("p").removeClass('myClass noClass').addClass('yourClass');

● .removeClass(function(index,class))

- $("li:last").removeClass(function(){return $(this).prev().attr('class'); });

 

● .css( propertyName) :  선택된 element의 propertyName에 해당하는 css정보를 리턴한다.

● .css(propertyName, value) : 선택된 element의 propertyName에 css정보를 설정한다.
● .css(propertyName, function(index, value)) 
● .css(map) //map 형태로 입력함 {key:value}
- $("span").css({"width":"100px", "height":"50px"});  // 복수 설정

 

● .hasClass( className)  : 선택된 element의 class가 className에 할당되어있는지 확인.

( return value = true,false)

 

 

● .toggleClass( className) : 선택된 element의 className을 (className)에따라  설정/해제 한다.
   1.<div class="tumble"> someText..... </div>

   2.$("div.tumble").toggleClass("bounce"); - 호출

   3.<div class="tumble bounce"> someText..... </div>  -적용

   4.$("div.tumble").toggleClass("bounce"); - 해제

   5(1).<div class="tumble"> someText..... </div>

 

 ● .toggleClass( className, switch) : switch는 boolean 값으로 조건값이 true이면 토글형태로 동작한다. 

     $("#foo").toggleClass(className, addOrRemove);  ==  (예1)

 

     if(addOrRemove){    // (예1)

$("#foo").addClass(className);      

      } else {

$("#foo").removeClass(className);

}

 

● .toggleClass( function(index, class), [switch])

예)

$("div.foo").toggleClass(function(){

if($(this).parent().is("bar")){

return "happy";  

} else {

return "sad";

}

});

[WIDTH&HEIGHT]

● .width() : 선택된 첫번째 element의 가로 길이값을 가져온다.
● .height() : 선택된 첫번째 element의 세로 길이값을 가져온다.
 *.css('width') 와 . width() 차이점은 단위없이 리턴한다. (예:100px -> 100)

 

● .innerWidth()   :  선택된 첫번째 element의 border길이를 제외한 padding길이를 포함한 가로길이 값을 가져온다.
● .innerHeight()   :  선택된 첫번째 element의 border길이를 제외한 padding길이를 포함한 세로길이 값을 가져온다.
● .outerWidth()   :  선택된 첫번째 element의 padding,border,optionally margin길이를 포함한 가로길이값을 가져온다.
● .outerHeight()   :  선택된 첫번째 element의 padding,border,optionally margin길이를 포함한 세로길이값을 가져온다.

● .width( value)  :  선택된 element 의 가로 길이값을 설정한다. (100px, 50%, auto 처럼 단위를 설정하지 않는다.)
● .width( function(index, width))
● .height( value) :  선택된 element 의 세로 길이값을 설정한다. (100px, 50%, auto 처럼 단위를 설정하지 않는다.)
   .height( function(index, height))

[OFFSET]

● offset()  : document을 기준으로 선택된 첫번째 element의 현재 좌표(오프셋)를 리턴한다.
- $("selector").offset().left , $("selector").offset().top

● offset( coordinates)  :  선택된 element의 현재 좌표(오프셋)를 변경한다.
- $("p:last").offset({top: 10, left: 30});

● .offset(function(index,coords))

 

● position()  :  부모 element로 부터 현재 좌표.
- $("selector").position.left, - $("selector").position.top

 

● .scrollTop()  :  선택된 element의 스크롤바 수직위치를 리턴한다.
● .scrollTop( value)  : 선택된 element의 스크롤바 수직위치를 설정한다. (value=integer)

● .scrollLeft()  :  선택된 element의 스크롤바 수평위치를 리턴한다.
● .scrollLeft( value)  : 선택된 element의 스크롤바 수평위치를 설정한다. (value=integer)