JS Jquery 기본 지식 정리.3

김종민·2023년 7월 25일
0

js

목록 보기
5/25
post-thumbnail

삽입 위치 / 선택자/ 스타일 제어 /Traversing / Each()

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);
 })
profile
웹 퍼블리셔의 코딩 일기

0개의 댓글

관련 채용 정보