1. HTML 삽입하기

• before() : 지정한 태그 바로 직전에 태그가 삽입된다.

const txt = `<div><h1>삽입된 레이아웃</h1></div>`;

$('selector').before(txt);

• after() : 지정한 태그 바로 직후에 태그가 삽입된다.

const txt = `<div><h1>삽입된 레이아웃</h1></div>`;

$('selector').after(txt);

• prepend() : 지정한 태그의 자식 노드 중 제일 첫번째에 삽입된다.

const txt = `<div><h1>삽입된 레이아웃</h1></div>`;

$('selector').prepend(txt);

• append() : 지정한 태그의 자식 노드 중 제일 마지막에 삽입된다.

const txt = `<div><h1>삽입된 레이아웃</h1></div>`;

$('selector').append(txt);

2. Selector(선택자) 알아보기

• ID Selector : $('#xxx')

const id = $('#idText').val()

• Class Selector : $('.xxx')

const class = $('.classText').val()

• Tag Property Selector : $('tag[prorperty key = property value]')

const name = $('input[name=nameText]').val()
const radioCheck = $('input[name=checkedRadio]:checked').val()

• Index Selector : $('div:eq(0)') / $('div').eq(0)

const eqRadio1 = $('input[name=checkedRadio]:eq(0)').val()
const eqRadio2 = $('input[name=checkedRadio]').eq(1).val()

3. Style (CSS) 제어하기

• .css() : $('slector').css('스타일key', '적용하고자 하는 값')

$('div:eq(0)').css('color','red');
$('div:eq(0)').css('border','1px solid black');

• .attr()

$('div:eq(1)').attr('style','color:red; border:1px solid black');

• .addClass() : $('slector').removeClass('클래스명'), 클래스 추가

$('div:eq(0)').addClass('sample1');

• .removeClass() : $('slector').removeClass('클래스명'), 클래스 제거

$('div:eq(0)').removeClass('sample1');

• .hasClass() : $('slector').hasClass('클래스명'), 클래스 존재 여부 판단

$('div:eq(0)').hasClass('sample1');

4. 내가 추적하고자 하는 태그 알아내기 - Traversing

Traversing이란, 어떠한 특정 태그를 기준으로 내가 찾고자하는 태그들을 추적을하는 기능을 하는 함수이다.

• find() : 자식값들을 찾고자 할 경우 사용한다.

const idTxt = $('table').find('#txt').val();

• parent() : 현재 지정된 selector에서 바로 상위의 태그를 찾는다.

const txt = $('#txt').parent().val() ;

• prev() : 동일 레벨의 태그들의 직전의 태그를 찾는다.

const txt = $('#txt').prev().val() ;

• next() : 동일 레벨의 태그들의 직후의 태그를 찾는다.

const txt = $('#txt').next().val() ;

5. 반복문 알아보기 - each()

여러개의 동일한 selector일 경우, each()를 이용하여 반복문처럼 사용할 수 있다. 중간에 break를 하고 싶은 경우, return false를 주면 된다. (return 아님)

each() 사용방법

$('selector').each(function(index){
	$(this)
});

• index : Selector의 index 값
• $(this) : each문이 돌때마다 각각의 div영역을 가리킨다.

$(this) === $('selector').eq(index)

each() 사용예시

$('div').each(function(index){
  // txt1 === txt2
  const txt1 = $('div').eq(index).find('input[type=text]').val();
  const txt2 = $(this).find('input[type=text]').val();
  const txtTag = `임시값${index}`;

  $(this).find('input[type=text]').attr('value', txtTag);
})

---

해당 포스팅은 인프런 - 퍼블리셔, 신입 프론트 개발자를 위한 실무에서 써먹는 실전 jQuery 설명서의 내용을 보며 공부한 것을 정리한 내용입니다.

참고사이트

인프런 - 퍼블리셔, 신입 프론트 개발자를 위한 실무에서 써먹는 실전 jQuery 설명서