jQuery/기본10

• 

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

• [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.. jQuery/기본 2023. 3. 16.

• 

  💡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.. jQuery/기본 2022. 12. 14.

• input form reset function 보호되어 있는 글 입니다. 2022. 10. 17.

• 

  4. 객체 조작 - 예제 예제1 내용1 내용2 내용3 내용4 예제2 내용1 내용2 내용3 내용4 jQuery/기본 2022. 6. 9.

• 

  4. 객체 조작 - 객체 편집 메서드 종류 사용법 설명 before( ) / insertBefore( ) $("요소선택").before("새요소"); $("새요소").insertBefore("요소선택"); 선택한 요소 이전 위치에 새 요소를 추가합니다. after( ) / insertAfter( ) $("요소선택").after("새요소"); $("새요소").insertAfter("요소선택"); 선택한 요소 다음 위치에 새 요소를 추가합니다. prepend( ) / prependTo( ) $("요소선택").prepend("새요소"); $("새요소").prependTo("요소선택"); 선택한 요소의 맨 앞 위치에 새 요소를 추가합니다. append( ) / appendTo( ) $("요소선택").append("새요소"); $("새요소").app.. jQuery/기본 2022. 6. 9.

• 

  4. 객체조작 - 수치조작 메소드 종류 사용법 설명 height( ) $("요소선택").height( ); $("요소선택").height(100); 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환합니다. width( ) $("요소선택").width( ); $("요소선택").width(100); 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환합니다. innerHeight( ) $("요소선택").innerHeight( ); $("요소선택").innerHeight(300); 안쪽 여백을 포함한 높잇값을 반환하거나 변환합니다. innerWidth( ) $("요소선택").innerWidth( ); $("요소선택").innerWidth(100); 안쪽 여백을 포함한 너빗값을 반환하거나 변환합니다. outerHeight( ) $("요소선택").o.. jQuery/기본 2022. 6. 8.

• 

  4. 객체 조작 - 속성 조작 메소드 종류 사용법 설명 html( ) $("요소선택").html( ); $("요소선택").html("새요소"); 선택한 요소에 하위 요소들을 반환하거나 새 요소로 변환합니다. text( ) $("요소선택").text(); $("요소선택").text(새텍스트); 선택한 요소에 포함되는 텍스트를 반환하거나 새 텍스트로 변환합니다. css("속성")/ css(속성","값") $("요소선택").css("color"); $("요소선택").css("color","blue"); 선택한 요소에 css속성값을 반환 또는 변환합니다. removeAttr("속성") $("요소선택").removeAttr("title"); 선택한 요소의 지정한 속성을 삭제합니다. attr("속성")/ attr("속성","값") $("요소선택").a.. jQuery/기본 2022. 6. 8.

• 

  step2 - 종합 Effect $(“p”).hide() $(“#test”).hide() $(“.test“).hide() $(this).hide() ​ Events click() dblclick() mouseenter() mouseleave() mousedown() mouseup() hover() focus() and blur() ​ Effect Hide/Show hide() hide() and show() toggle() hide() Fade fadeIn() fadeOut() fadeToggle() fadeTo() Slide slideDown() slideUp() slideToggle() Animate animate() animate() - manipulate multiple CSS properties animate() .. jQuery/기본 2022. 6. 2.

• 

  선택자 인접 관계 선택자 1. 전체 선택자 제이쿼리 직접 선택자및 관계 선택자 직접 선택자 관계 선택자 css에서도 전체 요소를 선택할 때는 *{ }로 사용하는데, 제이쿼리에서 전체 선택자의 경우에도 $("*")로 표현한다. 2. 아이디 선택자 제이쿼리 직접 선택자 및 관계 선택자 직접 선택자 관계 선택자 html에서 설정되어 있는 아이디로 표현하는 방식 $("#id") 3. 클래스 선택자 제이쿼리 직접 선택자 및 관계 선택자 직접 선택자 관계 선택자 4. 요소명 선택자 제이쿼리 직접 선택자 및 관계 선택자 직접 선택자 관계 선택자 5. 그룹 선택자 제이쿼리 직접 선택자 및 관계 선택자 직접 선택자 관계 선택자 6. 부모요소 선택자 인접 관계 선택자 내용1 내용2 내용3 class = "second"의 부모 태.. jQuery/기본 2022. 5. 31.