[J] JavaScript & jQuery 공부하기 #23

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

28.jQuery 기본 문법

< script type="text/javascript">
$(제어대상).method1().method2();
</ script>
- $은 jQuery에 access한다는 뜻
- metho1()은 (제어대상)에 대해서 수행될 작업
- '$(제어대상)'은 주어, 'method1().method2()'은 서술어로 대치됨

* jQuery 선택자
- 페이지 내의 요소들에 접근하는 역할

< script type="text/javascript">
$(document).ready(function(){
$('*').css('color','red');
$('h2').css('color','blue');
$('h1#header1').css('color','purple');

$('.item1,.item2').css('color','orange');
$('h1.item').css('color','tomato');
$('item.cc').css('color','yellow');
});
</ script>

< body>
< p>*******</ p>
< h2>h2</ h2>
< h1 id="header1">h1#header</ h1>
< h1 class="item1">.item1</ h1>
< h1 class="item2">.item2</ h1>
< h1 class="item">h1.item</ h1>
< h1 class="item cc">.item.cc</ h1>
</ body>

 * each()메소드
  - jQuery로 배열을 관리할 때는 each() 메소드를 사용함
  $.each(object, function(index,item){})
  $(selector.each(function(index,item){})

  > $.each() 메소드의 첫 번째 매개변수에는배열, 두 번째 매개변수에는
  index, item을 갖는 함수를 삽입한다
  > index는 배열의 인덱스 또는 개체의 키, item은 해당 인덱스나
  키가 가진 값임

 * addClass()메소드
 - 문서 객체에 class속성을 추가하는 메소드

 * removeClass() 메소드
 - 문서 객체의 class속성을 제거하는 메소드

 * .noConflict() 메소드
 - 여러 JavaScript 프레임워크를 함께 사용 할 때,
   충돌 방지를 위해 사용함
 - 식별자 '$'대신 'jQuery'을 사용한다.

 < script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function(){
  alert('jQuery(document).ready');
  });

  var J = jQuery;
  J(document).ready(function(){
  alert('J(document).ready');
  });
 </ script>

 * 예제

  < script type="text/javascript">
  $(document).ready(function(){
  var flag = false;
  $("h1").click(function(){
  if(flag){
  $("p").show();
  flag = false;
  }
  else{
  $("p").hide();
  flag = true;
  };
  });
  });
  </ script>
  < body>
  < h1>클릭하세요</ h1>
  < p>보였다 안보였다.</ p>
  </ body>