본문 바로가기

Local Oriented/jQuery

jQuery CSS 스타일 선택시, 태그명의 대/소문자는 구분없이 사용해도 되지만.. 속성(값)은 대소문자 구분


정상적인 경우라면,
<a ...> 나 <A ..> 모두
$('a') 또는 $('A') 로 선택이 가능. 즉, jQuery 에서 태그명(혹은 키워드명)은 대소문자를 가리지 않는다는 것.

그런데, 속성(값)은 그렇지가 않아요..
<a href="JAVASCRIPT:funcA()">...</a> 인 경우 아래와 같이 하면 안 되겠죠..
$('a').each(function(){
  var $o = $(this);
  var href = $o.attr('href');
  if(href.indexOf('javascript')>-1){ ... }
});

그러면 어떻게 해야 하느냐..?
$('a').each(function(){
  var $o = $(this);
  var href = $o.attr('href').toLowerCase(); // 대문자로든 소문자로든 한쪽으로 몰아 두어야 합니다.
  if(href.indexOf('javascript')>-1){ ... }
});

위와 같이 하면 대소문자가 섞여 있어도 정상적으로 작동하겠군요.. ^^.
다만, 대소문자를 구분하는 것이 중요하다면 대소문자를 수정하는 함수 사용에 유의해야 합니다.



참고로, 속성을 다루는 함수들 http://uix.kr/archives/655
.addClass(), .removeClass(), .hasClass(), .toggleClass()
.attr(), .removeAttr(), .prop(), .removeProp()
.html(), .text(), .val()


- toggleClass('classA') 인 경우, 만약 $Elements 에 classA 가 존재한다면 이를 제거 하고 removeClass('classA'),

존재하지 않는다면 addClass('classA'). 따라서 toggleClass('classA') 는 아래와 동일한 동작.

$('...').each(function(){

  if($(this).hasClass('classA')) $(this).removeClass('classA');

  else $(this).addClass('classA');

});



.Fine.