jQuery practice_240411

$ - jQueryObject : jQuery에서 기능을 제공하는 객체
$("selector").jquery함수(function(){
-코드정의.
});

jQuery

$ : jQueryObject

"selector" : selector에 해당하는 태그 찾기
jquery함수 : jQuery에서 제공하는 기능을 적용
코드정의 : 개발자가 제공하는 기능을 구현하여 일처리를 수행.

jQuery로딩

** document로딩 : HTML문서 body태그의 태그정보가 로딩되면 jquery실행.
$(document).ready(function(){});

** window 로딩 : HTML문서 body태그의 사용되는 모든 객체가 로딩되면 jquery실행.
(document로딩보다 속도가 느리다. - document로딩을 주로 사용)
$(window).load(function(){});

jQuery selector

CSS의 selector와 같다.

• id selector : 특정 태그 하나를 찾을 때
  $("#id명").기능(function(){});

• class selector 사용(여러 개의 태그를 찾을 때)
  $(".class명").기능(function(){});

• tag selector (정의되는 모든 태그를 찾을 때)
  $("태그명").기능(function(){});

• multiple selector (정의되는 모든 태그를 찾을 때)
  $("selector,,,").기능(function(){});

• attribute(name)selector(속성=값의 형태를 가진 모든 태그를 찾을 때)
  $("[속성명='값']").기능(function(){});

• sub select (특정 구조에 하위 태그를 찾을 때)
  $("부모태그명 > 자식태그명").기능(function(){});

• behavior selector는 hover를 지원하지 않고 함수로 제공한다.
  $("selector").hover(function(){});

출력

html함수 사용, text함수를 사용.
원하는 태그에 출력할 수 있다.

$("selector").html("출력값");
//innerHTML같다. html태그를 해석하여 출력.

$("selector").text("출력값");
//출력값에 html태그가 존재하더라도 태그가 그대로 출력된다.

CSS함수

selector로 선택된 대상 태그에 stylesheet를 설정하거나, CSS속성값을 얻을 때 사용.

• 태그에 설정된 style값 얻기
  var 변수명=$("selector").css("속성명")

• 태그에 style값 설정.(여러 개의 속성을 부여할 때에는 함수를 여러 번 호출)
  $("selector").css("속성명", "값")

---

class 속성

style태그내에서 선언된 class속성을 jQuery에서 설정할 때 사용.

• class selector에 정의된 style을 tag에 설정.
  addClass("클래스명");
  $("selector").addClass("클래스명");

• tag에 설정된 class를 삭제
  removeClass("클래스명");
  $("selector").removeClass("클래스명");

  Event Handling

  사용자의 동작이 있을 때 그 동작에 대한 대비코드를 만들고 실행하는 것.

• $("select").on("이벤트종류", 무기명함수(){});

  $("select").on("click", function(){});

• $("select").이벤트함수(무기명함수(){});

  $("select").click(function(){});

  click : 모든 태그에 적용할 수 있다.

  $("select").click(function(){
  //클릭이벤트가 발생했을 때 사용자에게 제공할 코드
  });

  change

  select, 키입력이 가능한 HTML Form Control

• $("selector").change(function(){
  //change이벤트가 발생했을 때 사용자에게 제공할 코드
  });

  focusIn

  키 입력이 가능한 HTML Form Control

• 커서가 들어갔을 때
  $("selector").focusIn(function(){
  //커서가 들어갔을 때 사용자에게 제공할 코드
  });

  focusOut

  키 입력이 가능한 HTML Form Control

• 커서가 들어갔을 때
  $("selector").focusOut(function(){
  //커서가 빠져나갔을 때 사용자에게 제공할 코드
  });

  blur

  키 입력이 가능한 HTML Form Control

• 커서가 빠져나갔을 때
  $("selector").blur(function(){
  //커서가 빠져나갔을 때 사용자에게 제공할 코드
  });

  keydown

• 키가 눌렸을 때 : 키 입력이 가능한 HTML Form Control
  $("selector").keydown(function(evt){
  //키가 눌렸을 때 사용자에게 제공할 코드
  evt.which-키코드 얻기
  });

  keyup

• 키가 올라올 때 : 키 입력이 가능한 HTML Form Control
  $("selector").keyup(function(evt){
  //키가 올라올 때 사용자에게 제공할 코드
  evt.which-키코드 얻기
  });

  mouseover

• 마우스 포인터가 특정영역에 들어갔을 때
  $("selector").mouseout(function(){
  //마우스 포인터가 특정영역에 들어갔을 때 사용자에게 제공할 코드
  });

  mouseout

• 마우스 포인터가 특정영역에서 나갔을 때
  $("selector").mouseout(function(){
  //마우스 포인터가 특정영역에서 나갔을 때 사용자에게 제공할 코드
  });

  HTML Form Control 값 얻기

• 이름이 하나인 Form Control

<input type="text,password,data,color,,,,">, <select>, <textarea>

• 이름이 중복되는 Form Control

<input type="radio, checkboc">, <select>