JQuery

JQuery

자바스크립트 라이브러리

 

기본 사용법: $(선택자).행동()

$(this).hide() - 현재 요소를 숨김
$("p").hide() - <p> 요소를 숨김 
$(".test").hide() - 클래스명이 "test"인 요소를 숨기
$("#test").hide() - 아이디명이 "test"인 요소를 숨김

$("*") 모든 요소 선택
$(this) 현재 HTML 요소를 선택
$("p.intro") 클래스명이 intro 인 모든 p 요소를 선택
$("p:first") 첫 번째 p요소를 선택
$("ul li:first") 첫 번째 ul의 첫 번째 li요소를 선택 
$("ul li:first-child") 모든 ul의 첫 번째 li 요소를 선택
$("[href]") href 속성을 가지고 있는 모든 요소를 선택
$("a[target='_blank']") a태그의 target 속성이'_blank'인 모든 요소를 선택
$("a[target!-'_blank']") a태그의 target 속성이 '_blank'가 아닌 모든 요소를 선택 
$(":button") 인풋 요소의 타입 속성이 'button'인 모든 요소를 선택
$("tr:even") 짝수개의 모든 tr요소를 선택
$("tr:odd") 홀수개의 모든 tr요소를 선택

 

 

이벤트

마우스	키보드	폼	문서/윈도우
click (1번 클릭 시 함수 실행)	keypress	submit	load
dbclick (2번 클릭 시)	keydown	change	resize
mouseenter (마우스 올릴 시)	key up	focus(포커스 시/ input textbox)	scroll
mouseleave(마우스p 내보낼시)		blur(포커스 벗어나면 실행)	unload

 

문서 준비 완료 이벤트

제이쿼리 코드가 문서가 로딩이 완료되기 전 미리 실행되는 것을 방지

$(document).ready(function(){  // jQuery methods go here... });

$(function(){
  // jQuery methods go here...
});

 

 

콜백함수

자바스크립트구문은 한 줄씩 실행됩니다. 하지만 모션효과를 사용하면 해당 모션 효과가 끝나지 않은 상황에서도 바로 다음 구문이 실행되기 때문에 에러를 발생시킬수도 있습니다.

콜백함수는 현재 실행중인 모션 효과가 완전히 끝나야만 실행이 되는 함수입니다.

 

콜백인수값 자리에 hide모션 효과가 완료되면 실행될 콜백함수를 정의한 예제입니다.

콜백함수가 있는 예제

$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});

 

 

아래 예제에는 콜백 인수가 없으며, hide 모션 효과가 다 끝나기도 전에 경고창이 뜹니다.

콜백함수가 없는 예제

$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});

 

제이쿼리 메서드 체이닝

체이닝이라고 하는 기술을 이용해서 여려개의 명령어들을 하나의 체인으로 이어서 실행시킬 수 있습니다.

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

 

새로운 HTML컨텐츠 추가하기

append() - 선택된 요소의 끝부분에 컨텐츠를 삽입

prepend() - 선택된 요소의 시작부분에 컨텐츠를 삽입

after() - 선택된 요소의 다음에 컨텐츠를 삽입

before() - 선택된 요소의 이전에 컨텐츠를 삽입

 

 

요소제거하기 remove / empty

// 선택된 요소(#div1)와 해당 자식 요소들까지 모조리 삭제
$("#div1").remove();

//선택된 자식 요소만 삭제 
$("#div1").empty();

 

 

제거할 요소를 필터팅하기

class="test" 속성을 가지고 있는 <p>요소 제거
$("p").remove("test");

class="test"나 class="demo" 속성을 가지고 있는 <p>요소 제거
$("p").remove("test, demo");

 

 

CSS 속성 설정

CSS("속성명","값");

$("p").css("background-color", "yellow");

$("p").css({"background-color": "yellow", "font-size": "200%"});

 

 

 

 

테스트

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove2