JQuery 2일차

박창희·2021년 2월 2일
0

JQuery

목록 보기
2/4

1 . JQuery 에서 값을 불러오는 방법 .val()

var doc = $("input:button").val();
//JS : .value
//JQ : val()

javascript 에서는 .value 를 통해 값에 접근할수 있다.

JQuery 에서는 .val() 을 통해 값에 접근 할 수 있다.

2. JQuery 에서 상위/하위 요소를 불러오는 방법 next() / prev()

var book = chk.next().text()
// next() -> 다음 요소
// prev() -> 이전 요소

.next() 의 경우 다음 요소 태그를 불러오고

.prev() 의 경우 이전 요소 태그를 불러온다.

3 .submit() / .click() / .append() / .each()

  • .submit( handler) 폼 태그에서 전송할때 handler 가 작동
  • .click( handler) 클릭시 안에 handler이 작동
  • .append ( content ) : 내용을 추가한다.
  • .each( function ) : 각 요소에 function 이 동작 한다.

4. .eq() / .slice() / .first() / .last()

  • eq() : 선택한 엘리먼트 들 중에 인덱스로 탐색
  • slice() 선택한 엘리먼트 들 중에 인덱스의 길이로 요소 탐색
  • first() 선택한 엘리먼트 들 중에 첫번째 요소
  • last() 선택한 엘리먼트 들 중에 마지막 요소

5. find() / children() / parent() / parents()

find (selector) : 선택한 엘리먼트의 자손들 중에 탐색하고자 하는 엘리먼트를 찾는다

children ("selector") : 선택한 엘리먼트의 자식 요소들 중엔 탐색하고자 하는 엘리먼트를 찾는다

parent() / parents("selector") : 선택한 엘리먼트의 부모 요소를 찾는다

6. add() / is()

add() 선택한 엘리먼트에 추가적으로 selector 표현식을 작성할 때 사용

is() 선택한 엘리먼트들 중에 원하는 엘리먼트가 있는지 확인

7. attr() 과 .prop() 의 차이

attr() 은 속성값이나 정보를 세팅하는 역할을 한다 . → attribute set

.prop() 은 실제적인 상태를 제어 하는 역할 → property control

8. hover()

  • .hover( handlerIn, handlerOut )

    handlerIn 으로 마우스 가져다 둘때 작동하는 이벤트

    handlerOut 으로 마우스를 뺄때 작동하는 이벤트

  • .hover( handlerInOut )

    handlerInOut 으로 마우스를 가져다둘때도 작동 뺄때도 작동 .toggle 같이 양쪽에서 작용할때 사용한다.

9. 이벤트 전파 요소를 막는 방법 .stopPropagation() / .preventDefault()

  • .stopPropagation() 해당 함수의 이후의 이벤트를 작동하지 않는다

ex ) a 작동후 → b 이벤트 작동 중단

  • .preventDefault() 해당 태그에 포함된 이벤트를 작동시키지 않는다.

ex) a href = "" 같은 태그의 본질이 가지고 있는 이벤트가 중단.

  • return false 위의 두 요소를 전부 포함하는 방법

10. bind() unbind() on()

bind → 사라질 예정 on을 주로 사용할것!

.on( events [, selector ][, data ] , handler ) 의 형태로 작동

ex1)

$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

ex2)

function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

값 자체를 전달할수도 있다. triger 도 활용가능하다.

profile
큰꿈의 개발자

0개의 댓글