개발/jQuery

[jQuery All in One] 기존 컨텐츠를 둘러싼 새로운 컨텐츠를 삽입하는 방법 (unwrap, wrap, wrapAll, wrapInner)

.unwrap() - 지정한 요소의 부모요소를 제거 .wrap() - 지정한 요소를 wrap의 매개변수로 전달한 태그로 감싼다 .wrapAll() - 지정한 클래스들을 wrapAll 매개변수로 전달한 태그로 모두 감싼다 .wrapInner() - 지정한 요소에 자식 컨텐츠를 wrapInner 매개변수로 전달한 태그로 감싼다. .unwrap() // 지정한 요소의 부모요소를 제거한다. $('p').unwrap(); .wrap() // 지정한 요소를 wrap의 매개변수로 전달한 태그로 감싼다. $('p').wrap(''); .wrapAll() // 지정한 클래스들을 wrapAll 매개변수로 전달한 태그로 모두 감싼다 $('.inner').wrapAll(''); .wrapInner() // 지정한 요소에 자식..

개발/jQuery

[jQuery All in One] 특정 요소의 앞쪽에 원하는 컨텐츠를 삽입하는 방법 - . prependTo()

jQuery prependTo 메서드는 지정한 요소의 자식 요소들의 가장 앞쪽에 원하는 컨텐츠를 삽입합니다. Javascript 배열에서 unshift 메서드를 생각하시면 이해가 편할 것 같습니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .prependTo(target) 설명 : 일치하는 요소를 대상의 끝에 삽입합니다. .prependTo(target) target Type: Selector or htmlString or Elem..

개발/jQuery

[jQuery All in One] 특정 요소의 앞쪽에 원하는 컨텐츠를 삽입하는 방법 - .prepend()

jQuery prepend 메서드는 지정한 요소의 자식 요소들의 가장 앞쪽에 원하는 컨텐츠를 삽입합니다. Javascript 배열에서 unshift 메서드를 생각하시면 이해가 편할 것 같습니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .prepend(target) 설명 : 특정 요소 앞에 컨텐츠를 삽입합니다. .prepend( content [, content ] ) content Type: htmlString or Element..

개발/jQuery

[jQuery All in One] 특정 요소에 원하는 요소를 삽입하는 방법 - .html()

jQuery html 메서드는 지정한 요소의 자식 요소에 원하는 컨텐츠를 삽입합니다. Javascript 메서드 중에 innerHTML을 떠올리시면 됩니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .html() 설명 : 일치하는 요소 집합에서 첫 번째 요소의 HTML 내용을 가져옵니다. .html() 이 메소드는 매개변수를 받지 않습니다. 이 방법은 XML 문서에서 사용할 수 없습니다. HTML 문서에서 .html ()을 사용하여..

개발/jQuery

[jQuery All in One] 특정 요소의 뒤쪽에 원하는 컨텐츠를 삽입하는 방법 - .appendTo()

jQuery appendTo 메서드는 지정한 요소의 자식 요소들의 가장 뒤쪽에 원하는 컨텐츠를 삽입합니다. Javascript 배열에서 push 메서드를 생각하시면 이해가 편할 것 같습니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .appendTo(target) 설명 : 일치하는 요소를 대상의 끝에 삽입합니다. .appendTo(target) target Type: Selector or htmlString or Element or..

개발/jQuery

[jQuery All in One] 특정 요소의 뒤쪽에 원하는 컨텐츠를 삽입하는 방법 - .append()

jQuery append 메서드는 지정한 요소의 자식 요소들의 가장 뒤쪽에 원하는 컨텐츠를 삽입합니다. Javascript 배열에서 push 메서드를 생각하시면 이해가 편할 것 같습니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .append( content [, content ] ) 설명 : 매개변수로 지정된 컨텐츠를 일치하는 요소의 끝에 삽입합니다. .append( content [, content ] ) content Type..

개발/jQuery

[jQuery All in One] 일치하는 요소 복사하는 방법 (clone)

jQuery version: 3.4.1 .clone([withDataAndEvents]) 설명 : 일치하는 요소를 깊은 복사(deep copy) 합니다. .clone([withDataAndEvents]) withDataAndEvents (default: false) Type: Boolean 이벤트 핸들러와 데이터를 요소와 함께 복사해야하는지 여부를 나타내는 Boolean 값입니다. .clone([withDataAndEvents][, deepWithDataAndEvents]) withDataAndEvents (default: false) Type: Boolean 이벤트 핸들러와 데이터를 요소와 함께 복사해야하는지 여부를 나타내는 Boolean 값입니다. deepWithDataAndEvents (defaul..

개발/jQuery

[jQuery All in One] 클래스 선택자 다루기 (addClass, removeClass, hasClass, toggleClass)

jQuery version: 3.4.1 .addClass( className ) 설명 : 지정된 클래스를 일치하는 요소 집합의 각 요소에 추가합니다. .addClass( className ) className Type: String .addClass( function ) function Type: Function( Integer index, String currentClassName ) => String 사용예시 요소의 집합에서 선택된 요소의 클래스를 추가하는 예시입니다. .removeClass( className ) 설명 : 지정된 클래스를 일치하는 요소 집합의 각 요소에서 제거합니다. .removeClass( className ) className Type: String .removeClass( fu..

개발/jQuery

jQuery contains() 메서드를 활용한 검색기능 구현

서론 안녕하세요. 정말 오랜만에 포스팅을 남기네요 ㅎㅎ 겨울방학이 시작하고 1월중말까지 정말 많은 일들이 있었네요.ㅎㅎ 사실 이 일들때문에 글을 작성하지 못했다는 것은 핑계인 것 같고, 앞으로 꾸준히 기술 포스팅을 하도록 하겠습니다. 그래도 좋은 소식이 있다면, 2월 1일부터 프론트엔드 개발자로서 첫 출근을 시작한다는 점입니다. 그래도 학부시절에 나름대로 이쪽 분야로 가고싶어서 독학을 하며 실력을 키워나갔는데, 첫 직장을 제가 가고싶은 분야로 나아갈 수 있게 되어서 정말 만족스럽습니다.ㅎㅎ 이제 앞으로 역량을 많이 쌓아나가면서 정말 전문가다운 포스팅을 많이 남기도록 하겠습니다! ㅎㅎ 오늘 제가 포스팅할 주제는 jQuery의 contains() 메서드를 활용한 간단한 검색기능 구현입니다. contains(..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - addClass() / hasClass() / removeClass() / toggleClass())

예제와 함께하는 제이쿼리 강의 이번에 다룰 기능은 addClass() / hasClass() / removeClass() / toggleClass() 메소드입니다. jQuery addClass() .addClass() 메소드는 특정한 클래스를 요소에 추가할 수 있습니다. 문법.addClass( className )className ( 지정한 클래스 이름을 추가) 데이터타입 : 문자열(String) 1개 또는 2개 이상의 클래스들을 속성에 추가합니다. .addClass( function )function Type: Function( Integer index, String currentClassName ) => String 함수에서 반환된 클래스를 속성에 추가합니다.여기서 함수는 인자(매개변수) 값으로 in..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - animate())

예제와 함께하는 제이쿼리 강의 이번에 다룰 기능은 animate() 메소드입니다. jQuery addClass() .addClass() 메소드는 특정한 클래스를 요소에 추가할 수 있습니다. 문법.addClass( className )className ( 지정한 클래스 이름을 추가) 데이터타입 : 문자열(String) 1개 또는 2개 이상의 클래스들을 속성에 추가합니다. .addClass( function )function Type: Function( Integer index, String currentClassName ) => String 함수에서 반환된 클래스를 속성에 추가합니다.여기서 함수는 인자(매개변수) 값으로 index 와 currentClassName을 가지고 있습니다. 이 부분은 예제를 가지..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - slideDown() / slideUp() / slideToggle())

이번에 다뤄볼 기능은 jquery - slide() 메소드입니다. jQuery Effects - Sliding slide 메소드는 요소를 위 그리고 아래로 움직이게 도와주는 기능을 가지고 있습니다. slide 메소드는 아래와 같이 3가지 기능을 가지고 있습니다. slideDown()slideUp()slideToggle() jQuery slideDown() Method slideDown() 메소드는 요소를 아래로 내려주는 역할을 합니다. 문법 $(selector).slideDown(speed,callback); 인자는 지금까지 소개했던 메소드와 같이 속도를 제어할 수 있는 인자와 추가적인 기능을 적용시킬 수 있는 callback 함수 인자를 가지고 있습니다. 아래는 slideDown() 메소드의 예시입니다..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - fadeIn() / fadeOut() / fadeToggle() / fadeTo())

jQuery Effects - Fading jQuery는 희미하게 나타나게하고 없애는 fade() 메소드를 가지고 있습니다. jQuery에서는 아래 4가지 fade() 메소드를 가지고 있습니다. fadeIn() fadeOut() fadeToggle() fadeTo() 우선 fadeIn() 메소드에 대해서 알아보도록 하겠습니다. jQuery fadeIn() Method 메소드 이름과 같게 희미하게 보여지게 해주는 메소드입니다. show() 메소드에 자동으로 speed가 적용된 느낌의 메소드입니다. 문법 $(selector).fadeIn(speed,callback); 전 강의에서 다뤘던 show() 그리고 hide () 메소드와 같은 인자를 가지고 있습니다. 속도나 콜백함수에 대해서 잘 모르시다면, 전 강의..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - show() and hide())

jQuery - hide() and show() 제이쿼리에는 hide() 와 show() 메소드를 통해 HTML 요소를 숨기고, 보이게 해줄 수 있는 기능을 가지고 있습니다. 예시 결과값을 보면, 박스가 사라지고 나타나는 것을 볼 수 있습니다. 문법 $(selector).hide(speed,callback); $(selector).show(speed,callback); 각 메소드에 속도를 제어할 수 있게 도와주는 인자값을 넣을 수 있는데요. 값은 milliseconds 단위로 입력하면 됩니다. 콜백함수를 인자 값으로 넣을 수도 있는데요 이 함수를 통해서 hide() 나 show() 메소드가 완료된 다음에 어떠한 처리를 가능하게 해줍니다. 쉽게 말해서, hide()와 show() 메소드는 동작속도와 동작 ..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - filter)

jQuery - filter() jQuery의 filter는 CSS 셀렉터로 DOM 트리를 제어했을 때에 감소하는 속도를 커버해주는 기능을 합니다. jQuery 객체를 이용해서 표현된 DOM 요소 집합에 .filter() 함수를 사용하면 선택된 요소들의 일부부을 추출하여 새로운 jQuery 객체를 생성합니다. 바로 예제를 가져와서 설명하도록 할게요 ul의 자식 태그인 li태그에서 짝수만 골라서 색을 변환시켜보는 코드를 짜보겠습니다. 결과를 보면 짝수 menu에 색이 적용된 것을 확인할 수 있습니다. 아니 짝수라면서요?? 왜 menu1부터 색이 들어가 있어요? 코드잘못짠거 아닌가요? 라고 생각하실 수 있는데요. li 태그에 접근할 때 자바스크립트는 내부적으로 반복문을 돌리는데요. 그 반복문은 인덱스를 기준..