[jQuery] html(), text(), val() 구분

html(), text(), val() 특정 타겟의 내용(값)을 뽑아오고 싶을때 사용하는 함수 매번 잘 이해하고 암기했다고 확신했는데, 작업할 때마다 다시 찾고있는 저를 발견하게되어 정리해 두게 되었습니다. 저만 그런건 아니죠 ~?? 저는 jQuery랑 javascript가 약간 머리속에서 섞여 있는 것 같습니다. 이후에는 자바스크립트에 대한 부분도 정리해 보려고 합니다. 일단 오늘은 jQuery에 대한 부분 먼저 한번 정리해보겠습니다. $('selector').html(); 셀렉터 태그 내에 존재하는 자식태그를 태그나 문자열 상관없이 그대로 읽어올 때 사용 셀렉터로 지정된 노드의 내용을 html 형식으로 태그를 포함해서 추출 ▶ 태그 동적추가할 때 주로 사용되는 함수 Hello! // result He..

• format_list_bulleted 기본
• · 2023. 3. 17.
• textsms

[jQuery] 특정 영역 외 클릭 이벤트 e.target / e.currentTarget

특정 영역 외 클릭 이벤트 event.target / event.currentTarget 개발을 진행하면서, 커스텀 selectbox를 구현하거나, toggle 메뉴 위에 올라오는 서브 메뉴를 구현할 때, 외부 영역을 클릭하게 되면 닫히도록 구현을 해야했다. body를 사용해서 하면되지 않을까라고 생각했지만, 그럼 그에 해당하는 div 영역을 클릭했을 때에도 닫힐 것이다. 그래서 찾아보게 되었고, 정리해보자 event.target 이벤트가 발생한 요소를 반환 현재 이벤트가 발생한 요소의 속성들을 얻을 수 있으며, 만약 이벤트가 발생한 대상 id도 가져올 수 있다. $('.divBox').click(function(event){ console.log(event.taget); console.log(event..

• format_list_bulleted 기본
• · 2023. 3. 16.
• textsms

💡attr vs prop

💡 attr() VS prop() 💡 jQuery 1.6.0 업데이트로 attr() 과 prop() 두 개로 나눠졌다. attr() : HTML 속성 (Attribute) 취급 prop() : javascript 프로퍼티 (Property) 취급 * 속성(Attribute) 은 HTML 요소에 대한 추가 정보를 전달하며 쌍으로 제공 * 프로퍼티(Property) 는 HTML DOM트리의 특성으로 javaSctipt / jQuery를 통해 수정된 요소의 값을 가져오는데 사용하는 것이 좋음 // .html // .js // attr() var text = $("input[type=text]"); console.log(chk.attr("id"));// example console.log(chk.attr("ty..

• format_list_bulleted 기본
• · 2022. 12. 14.
• textsms

input form reset function

보호되어 있는 글입니다.

• format_list_bulleted 기본
• · 2022. 10. 17.

4. 객체 조작 - 예제

예제1 내용1 내용2 내용3 내용4 예제2 내용1 내용2 내용3 내용4

• format_list_bulleted 기본
• · 2022. 6. 9.
• textsms

4. 객체 조작 - 객체 편집 메서드

종류 사용법 설명 before( ) / insertBefore( ) $("요소선택").before("새요소"); $("새요소").insertBefore("요소선택"); 선택한 요소 이전 위치에 새 요소를 추가합니다. after( ) / insertAfter( ) $("요소선택").after("새요소"); $("새요소").insertAfter("요소선택"); 선택한 요소 다음 위치에 새 요소를 추가합니다. prepend( ) / prependTo( ) $("요소선택").prepend("새요소"); $("새요소").prependTo("요소선택"); 선택한 요소의 맨 앞 위치에 새 요소를 추가합니다. append( ) / appendTo( ) $("요소선택").append("새요소"); $("새요소").app..

• format_list_bulleted 기본
• · 2022. 6. 9.
• textsms