jQuery 에서 자주 쓰이는 함수

키보드 버튼의 키값

• Entery key : 13
• Up Arrow : 38
• Down Arrow : 40
• Left Arrow : 37
• Right Arrow : 39
• ESC key : 27

제이쿼리 선택자 (jQuery Selector)

• $('#아이디')
• $('.클래스')
• $('태그명 table tr td)
• $('[속성]')
• $('[속성=속성값]')
• $('태그명[속성=속성값]')
• $('선택기:요소')
• $('[속성!=속성값]')
• $('태그명[속성!=속성값]')
• $(this)

HTML 제어와 관련된 메소드

.after()

• 해당 요소 뒤에 내용을 추가합니다.
• 삽입하는 내용에 html태그가 있다면 태그가 적용됩니다.

<script>
	$(document).ready(function(){
		$("#div2").after("<span>After</span>")
    })
</script>

.before()

<script>
    $(document).ready(function(){
		$("#div1").before("<span>Before</span>")
    })
</script>

• 해당 요소 앞에 내용을 추가합니다.
• 삽입하는 내용에 html 태그가 있다면 태그가 적용됩니다.

.html()

<script>
     $(document).ready(function(){
		$("p").html("<div\>여기를 변경 </div\>")
    })
</script>

• .text() 메소드와 기능은 유사하지만 삽입하는 내용에 html 태그가 있다면 태그가 적용되며 text가 변경됩니다.

적용 전

적용 후

.prepend()

• 가리킨 대상의 자식요소 맨 앞에 내용을 추가합니다.

<script>
 	$(document).ready(function(){
		$("#div3").prepend("<span>Prepend</span>");
    })
</script>

.append()

• 선택된 대상의 자식객체 제일 마지막에 내용을 삽입합니다.

<script>
 	$(document).ready(function(){
		$("#div3").append("<span>Append</span>");
    })
</script>

.warp()

• warp의 타겟이 된 요소를 해당 요소로 감쌉니다.
  ( 선택한 요소의 부모 요소를 생성합니다. )

.unwarp()

• 선택한 요소의 부모 요소를 삭제합니다.
  ( 선택한 요소의 부모요소를 삭제합니다. )

.remove()

• 태그를 포함한 요소 전체를 제거합니다.

<script>
	$(document).ready(function(){
		$("span").remove();
    });
</script>
 

.empty()

• 해당 요소의 내용(text)만을 지웁니다.

<script>
	$(document).ready(function(){
		$("span").empty();
    });
</script>

적용 후

• 해당 태그안의 text가 지워집니다.

.detach()

• ctrl + x 키와 같은 잘라내기 기능
• 잘라낸 부분을 다른 변수에 저장 가능합니다.

<script>
	$(document).ready(function(){
		let val = $("span").detach();
   });
</script>

적용 후

• 해당 태그가 아예 지워집니다.

.on()

• 동적으로 html을 생성시 인식되지 않을 경우 사용하고 이벤트 바인딩을 해줍니다.

 <script>
	$("span").on("mouseenter mouseleave", function() {
 		 $("span").append("마우스 커서가 문장 위로 들어오거나 빠져 나갔습니다.<br>");
		});
     </script>

.ready()

• 작성한 HTML이 웹에 로딩완료 되면 매개변수로 전달된 함수를 실행하는 메소드입니다.
• 모든 외부 리소스가 아닌 DOM 객체만 로드되어도 실행이 됩니다.

<script>
	$(document).ready(function(){
		});
    </script>

.load()

• ready()와 다르게, 해당 페이지의 모든 외부 리소스가 포함된 모든 요소가 브라우저에 로드 되어야 실행되는 메소드입니다.

<script>
	$(document).load(function(){
		});
    </script>

key 제어와 관련된 메소드

.keydown()

• 키보드의 키를 누른 상태가 될 때 발생되는 이벤트 메소드입니다.

.keypress()

• keydown() 메소드와 유사하게 키 입력시 발생되는 이벤트지만 Tab키, Enter키 등의 특수키에는 이벤트가 발생하지 않습니다.

.keyup()

• 키보드에 키를 누르고 뗀 후에 발생하는 이벤트 메소드입니다.

mouse 제어와 관련된 메소드

.click()

• 마우스로 클릭했을 때 발생하는 메소드입니다.

.mousemove()

• 마우스 포인터가 지정된 요소 범위 내에서 움직이면 이벤트가 발생하는 메소드입니다.

.mousedown()

• 마우스 버튼을 누를 때 이벤트가 발생하는 메소드입니다.

.mouseup()

• 마우스 버튼을 뗄 때 이벤트가 발생하는 메소드입니다.

.mouseout()

• 마우스 포인터가 지정된 요소 범위 내에서 벗어날 때 이벤트가 발생하는 메소드입니다.

.hover()

• 요소에 마우스를 올리거나 올렸던 마우스가 벗어났을 때 실행되는 메소드입니다.

Size와 관련된 메소드

.width()

• 해당 요소의 가로 크기를 변경하거나 가져옵니다.

.height()

• 해당 요소의 세로 사이즈를 변경하거나 가져옵니다.

css 제어와 관련된 메소드

• 클래스 명을 추가하거나 제거할 수 있어 간단하게 스타일을 변경하는 것이 가능해집니다.
• 해당되는 클래스 명이 css에 선언되어 있어야 합니다.

.addClass()

• 파라미터로 전달받은 클래스를 특정 요소에 추가합니다.
• 이미 요소가 해당 클래스를 가지고 있으면 추가되지 않습니다.

	$("span").addClass("black");

.removeClass()

• 파라미터로 전달받은 클래스를 요소가 가지고있다면 삭제합니다.

	$("span").removeClass("test");

.css()

• 선택된 DOM 엘리먼트에 인라인 방식으로 스타일인 CSS를 추가하거나 값을 가져오는 메소드입니다.
• .attr()과 다르게 기존 값을 유지하면서 새로운 스타일을 추가하거나 변경할 수 있습니다.

	$(".test").css("color", "blue");

CSS의 속성 값 등의 데이터를 제어하는 메소드

.attr("속성")

• 선택된 요소 집합에서 첫 번째 요소의 속성 값을 조회합니다.

	$("form").attr("action"); 
    //첫 번째 form 요소의 action 속성의 속성 값 반환

.attr("속성", "속성값")

• 선택자에 의해 선택된 요소에 하나 이상의 속성 값을 부여합니다.

	$("img").attr({src:"/test.jpg", alt:"img", width:100, height:100});

.removeAttr()

• 선택된 모든 요소에서 속성을 완전히 제거한다.

	$("요소명").removeAttr("속성명");

.data()

• 값을 <key, value>로 저장할 수 있고 저장된 데이터를 키 값으로 불러올 수 있습니다.

	$("span").data("name", "test");	//데이터 저장
    var name = $("span").data("name");	//데이터 읽어오기

.removeData()

• 저장된 데이터를 키값을 통해 삭제하는 메소드입니다.

	$("span").removeData("name");	///데이터 삭제

이벤트에서 boolean 값을 받아올 수 있는 메소드

.is()

• 해당 요소에 원하는 요소 값이 존재하는지 boolean값으로 체크합니다.

	<input type="checkbox" id="test" value="Y">
    if($('#test').is('.checked')){
    }

.prop()

• attr()과 마찬가지로 요소의 첫 번째 속성을 반환하는 메소드입니다.
• 선택된 대상의 요소값을 boolean 값으로 체크할 수 있으며 체크박스에 강제로 체크할 수 있습니다.

	var res = $("#chk").prop("checked");
    //체크박스에 체크가 되어있으면 res에 true가 들어감
    $('#test').prop("checked", true)
    //강제로 true 만들기(체크하기)

.index()

• 특정 태그 요소가 몇 번째 해당하는 요소인지 알아내어 index 값을 가져오는 메소드입니다.

• 매개변수를 this로 가져와야합니다.

$('article').click(function(){
	var getIndex = $('article').index($(this));
});

text제어와 관련된 메소드

.text()

• 해당 요소에 해당 텍스트를 설정합니다

$("div").text("테스트");

.replaceAll()

• 선택된 대상의 요소 중 일치하는 부분을 교체합니다.

form 제어와 관련된 메소드

.change()

• 요소의 값(value)에 변화가 생길 경우 변화를 감지하여 등록된 콜백 함수를 동작시킵니다.
• 해당 메소드는 input, textarea, select 태그에 동작합니다.

.focus()

• 선택된 대상에 포커스를 주는 메소드
• 주로 입력부의 가장 첫 번째 항목에 포커스를 주어 마우스 커서가 눌려있도록 합니다.

	$('#input_id_text).focus();	

.submit()

• submit이 발생하면 실행하는 메소드입니다. 대상을 submit 합니다.

.val()

• 값을 가져오거나 삽입하는 메소드입니다.

.toggle()

• 한번 클릭시와 한번 더 클릭시 이벤트를 걸 수 있습니다.

.slideToggle()

• 요소가 사라진 상태가 될 때는 슬라이드 다운, 요소가 나타날 땐 슬라이드 업을 해줍니다.

.slideUp()

• 천천히 올라가면서 사라지는 효과를 보여주며 요소를 감춥니다.

.slideDown()

• 천천히 내려가면서 사라지는 효과를 보여주며 요소를 감춥니다.

.show()

• 감춰진 요소를 보이게 합니다.

.hide()

• 요소를 감춥니다.

선택자를 활용한 요소의 탐색과 관련된 메소드

.each()

• 반복시키고자 하는 대상 전체를 반복시킵니다.(for문의 상위버전)

.eq()

• 선택된 대상 중 매개변수로 넣은 인덱스를 탐색합니다.

.not()

• 선택된 요소 중 특정 선택자를 제외한 요소를 선택합니다.

.filter()

• 선택된 요소들의 일부분을 추출하여 새로운 객체를 생성하는 메소드입니다.

.find()

• 선택된 요소의 자식 요소 중에서 일치하는 자식 요소를 찾아 반환합니다.(다중선택 가능)

.first()

• 선택된 대상 중 첫번째 요소를 선택합니다.

.last()

• 선택된 대상 중 마지막 요소를 선택합니다.

.prev()

• 선택된 대상의 바로 이전 요소를 선택합니다.

.next()

• 선택된 대상의 다음 요소를 선택합니다.

.parent()

• 선택된 대상의 부모 객체를 선택합니다.

.parents()

• 선택된 대상의 부모 객체를 최상위까지 선택합니다.

.children()

• 선택된 대상의 자식 요소를 검색합니다.