기본 문법(2022.01.03)

jQuery는 Sizzle Engine 을 사용한다.

Sizzle Engine > CSS 선택자를 사용해서 태그를 검색 가능

const btn1 = jQuery('#btn1');
        btn1.click(function(){
            alert();
        });

ES6 부터는 기본 javascript도 qurySelector로 CSS 선택자 사용 가능.

jQuery를 사용한 결과는 무조건 배열로 반환된다. (유사배열)  AND 자료형은 jQuery Object가 반환됨

jQuery의 결과물은 단 복수 상관없이 그 뒤에 붙은 메소드가 일괄 적용된다. (내부 loop 작동)

jQuery('div').css('color','red');

jQuery('#box2').css('background-color','red');

 

---

Event

전용
jQuery('#btn1').click(()=>alert('버튼1'));
범용
jQuery('#btn2').on('click',()=>alert('버튼2'));

jQuery는 동일한 동작의 경우 한번에 지정 가능하다. 또한 반환값이 모두 jQuery object이기 때문에 함수형 코딩이 가능하다.

jQuery('#btn4').css({
	'color':'white',
	'background-color':'gold',
	'font-size':'1em'
});
jQuery('#btn4').on({
	'click':function(){$('body').css('background-color','red')}
});

---

$ 란 jQuery함수의 별칭이다.

이벤트와 함께 사용한 예 ▼

$('#btn1').click(()=>$('#box').hide('fast'));
        
$('#btn2').click(()=>$('#box').show('slow'));

$('#btn3').click(()=>$('#box').toggle(100));

---

animate (object , time , function) function은 애니메이션 종료 후 실행된다.

 $('#btn4').click(()=>$('#box1').animate({
   width:0,
   opacity:0,
   height:0,

  width:'toggle',
  opacity:'toggle',
  height:'toggle',

  width:'+=100px',
  opacity:'-=0.3',
  height:'+=100px'
},1000));

jQuery는 애니메이션을 중간에 멈추는것 역시 가능함.

$('#box1').click(()=>$('#box1').stop());

---

A타입 전용함수 obj.test()읽기 obj.test(value)쓰기

$('#btn').click(()=>{
	console.log($("#box").text());
	console.log($("#box").text("sdf"));
});

B타입 범용함수 obj.test(name)읽기 obj.test(name,value)쓰기

$('#btn').click(()=>{
	$("#box").css('background-color','blue');
	alert($("#box").css('background-color'));
});

---

manipulation 

- innerText > text() - innerHTML >html() - value > val()

$('#box').text('<b>홍길동</b>');
$('#box').html('<b>홍길동</b>');
$('#txt').val('<b>홍길동</b>');

$('#box').append('<p>문단입니다.'+n+'</p>');
$('#box').prepend('<p>문단입니다.'+n+'</p>');

attr 속성 조작

$('#txt').attr('size',50);
$('#txt').attr('maxlength',5);
alert($('#txt').attr('size'));

$('#txt').attr({
	size:50,
	maxlength:5
});

본인 삭제

$('#box').remove();

jQuery 함수 용도

1. 태그 검색 후 jQuery 객체 반환

2. 해당 객체를 jQuery 객체로 변환 후 반환

3. 문자열 구문을 실제 jQuery 객체로 생성 후 반환 > 동적 태그 생성

 

class 조작

$('#box').addClass('one');
$('#box').addClass('two');

$('#box').removeClass('two');

jQuery는 style sheet에 선언된 속성도 바로 불러올 수 있음.

$("#box").css('width') // ex ) 200px 단위도 반환됨
$("#box").width() // 숫자만 반환됨 단위를 유추 해야됨

//순수한 상자 크기
        console.log('width',$("#box").css('width'));
        console.log('width',$("#box").css('height'));
        console.log('width',$("#box").width());
        console.log('width',$("#box").height());

        // padding 포함한 값
        console.log('innerWidth',$("#box").innerWidth());
        console.log('innerHeight',$("#box").innerHeight());

        //padding border 까지 합한 상자의 크기
        console.log('outerWidth',$("#box").outerWidth());
        console.log('outerHeight',$("#box").outerHeight());

        //margin + border + padding 까지 합한 값
        console.log('outerWidth',$("#box").outerWidth(true));
        console.log('outerHeight',$("#box").outerHeight(true));

Traversing 본인을 기준으로 자식 & 부모 태그 검색

자식
$('#me').children().css('background-color','gold');
손자
$('#me').children().children().css('background-color','green');
첫번째
$('#me').children().first().css('background-color','gold')
마지막
$('#me').children().last().css('background-color','gold')
eq번째
$('#me').children().eq(1).css('background-color','gold')
선택
$('#me').find('.box').css('background-color','gold');

부모
$("#me").parent().css('background-color','gold');
모든 부모
$("#me").parents().css('background-color','gold');
body 전까지만
$("#me").parentsUntil('body').css('background-color','gold');

위의 형제
$('#me').prev().css('background-color','gold');
위의 형제 들
$('#me').prevAll().css('background-color','gold');
아래 형제
$('#me').next().css('background-color','gold');
아래 형제 들
$('#me').nextAll().css('background-color','gold');
모든 형제
$('#me').siblings().css('background-color','gold');