삽입 위치 / 선택자/ 스타일 제어 /Traversing / Each()
const txt = <div><h1>삽입된 레이아웃</h1></div>;
$('selector').before(txt);
const txt = <div><h1>삽입된 레이아웃</h1></div>;
$('selector').after(txt);
const txt = <div><h1>삽입된 레이아웃</h1></div>;
$('selector').prepend(txt);
const txt = <div><h1>삽입된 레이아웃</h1></div>;
$('selector').append(txt);
const id = $('#idText').val()
const class = $('.classText').val()
const name = $('input[name=nameText]').val() const
radioCheck = $('input[name=checkedRadio]:checked').val()
const eqRadio1 = $('input[name=checkedRadio]:eq(0)').val();
const eqRadio2 = $('input[name=checkedRadio]').eq(1).val();
$('div:eq(0)').css('color','red');
$('div:eq(0)').css('border','1px solid black');
('div:eq(1)').attr('style','color:red; border:1px solid black');
$('div:eq(0)').addClass('sample1');
$('div:eq(0)').removeClass('sample1');
$('div:eq(0)').hasClass('sample1');
Traversing이란, 어떠한 특정 태그를 기준으로 내가 찾고자하는 태그들을 추적을하는 기능을 하는 함수이다.
const idTxt = $('table').find('#txt').val();
const txt = $('#txt').parent().val();
const txt = $('#txt').prev().val();
const txt = $('#txt').next().val();
여러개의 동일한 selector일 경우, each()를 이용하여 반복문처럼 사용할 수 있다. 중간에 break를 하고 싶은 경우, return false를 주면 된다. (return 아님)
$('selector').each(function(index){
$(this)
});
$(this) === $('selector').eq(index)
$('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);
})