JQuery 문법

1. id문법  
- $(document).ready(function(){ -> 문서에서 어떠한 행동을 할 준비가 됨
    $("#id명 or .class명 or 태그명").click(function(){ -> id명 or class명 or 태그명을 클릭했을 때 할 동작
        동작에 관련된 코드 작성
    })
})

2. 이벤트리스너 문법 (onclick, keyon, onchange 등)
function 이벤트리스너에작성한이름(){
    $("#아이디명").기능작성();
}

3. 다른 아이디 값에서 원하는 태그를 선택할 때 사용하는 문법
    $("id명 태그명")

 

 

선택자(함수) 관련 문법

1. css() 선택 사용
    $("태그명 or #id명 or .class명").css("서식");

2. toggle() 선택 사용
    $("태그명 or #id명 or .class명").toggle("속도조절"); -> 속도 생략 가능

3. slideToggle() 선택 사용
    토글과 비슷하지만 주로 이미지를 보이거나 숨길 때 사용

4. hide() show() 선택 사용
    숨기기와 보이기

5. append() 선택 사용
    태그나 값을 추가할 때 사용

6. val() 선택 사용
    input, textarea, select 같은 폼의 태그의 값을 가져오거나 설정하는데 사용

    - 값을 가져올 때 : $("태그명 or #id명 or .class명").val();
        -> $("input").val();
        -> $("#id명").val();
        -> $(".class명").val();

    - 값을 설정할 때 : $("태그명 or #id명 or .class명").val("새로운 값 설정");
    -> $("input").val("새로운 값 설정");
    -> $("#id명").val("새로운 값 설정");
    -> $(".class명").val("새로운 값 설정");

7. this() 선택 사용
    현재 실행중인 함수(태그)의 문맥을 나타냄
    this : 이벤트가 발생한 태그를 참조
    $("#inputField").on("input", function(){
        console.log(this); -> 이벤트가 발생한 input태그를 바라봄
    })

8. on() 선택 사용
    이벤트 기능. 하나 이상의 이벤트를 처리
    $("태그명 or #id명 or .class명").on("event", function(){

        event에 속하는 유형 : click, input, mouseover, mouseenter 등
    })

    - on에 해당하는 이벤트가 많기 때문에 on을 작성한 후
      on("이벤트명", function(){}) 식으로 작성해야 하지만 다른 속성들은 "이벤트명"을 작성하지 않아도 됨

9. keyup() 선택 사용
    사용자가 입력창(input, textarea 등)에 키를 입력할 때마다 발생하는 이벤트를 감지
    -> 키보드에 키가 눌릴 때마다 작용

10. each() 선택 사용
    for문처럼 지정한 태그, class명, id명을 반복하는 기능
    $(li).each(function(){
        li 태그에 해당하는 모든 값을 가져와서 반복적으로 수행하고자하는 기능을 실행
    })

11. indexOf() 선택 사용
    - 문자열 또는 문자에서 ()안에 작성한 것와 일치하는 첫 번째 요소의 인덱스를 반환
    - 찾지 못할 경우 -1 반환 -> 에러 최소화

            index     0        1
    const 과일들 = {"사과","바나나"};
    const 바나나찾기 = 과일들.indexOf("바나나");
    console.log(바나나찾기); -> 출력값이 1

    const 수박찾기 = 과일들.indexOf("수박찾기");
    console.log(수박찾기); -> 출력값이 -1

    indexOf를 했을 때 검색을 지웠을 때 문자열이 ""로 되면
    -> keyup 이벤트에서 검색어가 빈 문자열이면 모든 항목을 보이도록 설정되어있음

    indexOf "" (값 0) : 모든 값에 잠재적으로 저장되어있음.