🏡
Jeju Coding Basecamp(제주코딩베이스캠프)/
🛳️
jQuery/
🌇
2. jQuery의 필터와 실행방법
🌇

2. jQuery의 필터와 실행방법

Index

Index
Index9. jQuery의 필터와 실행방법9.1 jQquery 필터기본 필터속성 필터차일드 필터컨텐츠 필터9.2 실행방법
 

9. jQuery의 필터와 실행방법

9.1 jQquery 필터

 

기본 필터

  • :eq(index)
  • :even
  • :odd
  • :first
  • :last
  • :gt(index)
  • :lt(index)
  • :not(filter)
 

속성 필터

  • :attributeContains - input[name*='man’]
  • :attributeEquals - input[name='newsletter’]
 

차일드 필터

  • :first-child, :last-child
  • :nth-child(2)
  • :nth-child(even), :nth-child(odd)
  • :nth-child(3n)
 

컨텐츠 필터

  • :contains(text)
  • :empty
  • :has(selector)
 
 

9.2 실행방법

 
  • 속성값 변경
  • DOM 탐색
  • DOM 편집
  • CSS
  • 이벤트
  • 효과
  • AJAX
  • 유틸리티
 
 
jQuery에서 속성값을 불러오는 방법은 다음과 같습니다.
 
  • 속성값 CODE
$("name").val(); #속성값 읽어오기
("name").val();  #속성값 쓰기
 
jQuery는 $(“”)의 부분에서 코드가 적용 될 부분을 작성합니다.
그 다음에 .hide(); 와 같이 실행했을 때 적용되는 코드를 넣습니다.
notion imagenotion image
 
선택 방법은 기본 선택과 계층 선택이 있습니다.
기본 선택에는 element, .class, #d, all(*)이 있으며,
계층선택에는 child(>)이 있습니다.
 
이 파트에서는 jQuery에서 DOM을 탐색하는 방법에 대해 알아보도록 하겠습니다.
DOM의 탐색은 일반적으로 선택자를 통해서 이루어집니다.
  • 탐색 CODE1
<div class="wrapper">
	<h1 class="title">TITLE</h1>
	<ul class="items">
		<li class="items">item 1</li>
		<li class="items">item 2</li>
	</ul>
</div>
  • 탐색 CODE2

$("span").parent();
$("div").children();
$("div").first();
$("div").last();
 
빨간 네모 박스가 쳐진 곳이 선택자에 해당하는 부분입니다.
$(“span”).parent();는 부모 선택자입니다. 이것은 부모 인자로 잡히는 모든 상위 인자를 반환합니다. $(“div”).children();는 자식선택자로, 선택된 요소의 자식에 해당하는 것을 전부 반환합니다. $("div").first();는 선택한 요소 중 가장 첫번째를 반환합니다. 이 예시에서는 div 중 가장 처음 나오는 div를 반환합니다. 반대로 $("div").last();는 여러 개의 div 중 가장 마지막에 나오는 div를 반환합니다.
 
다음으로는 DOM의 편집에 대해 알아보도록 하겠습니다. 먼저 제이쿼리의 문자를 편집하는 메소드에 대해 알아보도록 하겠습니다.
 
  • 편집 CODE1
$("test1").text("Hello World!");
$("test2").html("<b>Hello World!</b>");
$("test3").val("<b>Hello World!</b>");
위 세 코드는 텍스트를 받아오거나 변경할 수 있게 합니다.
세 코드는 비슷해 보이지만 차이점이 존재합니다.
notion imagenotion image
 
  • 편집 CODE2
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("#div1").remove();
append()는 객체를 선택한 객체(p)내의 가장 마지막 요소로 붙입니다. prepend()는 객체를 선택한 객체 내의 가장 첫번째 요소로 붙입니다. remove()는 선택한 객체를 삭제시킵니다.
DOM 편집은 html 요소 뿐만 아니라 css도 변경할 수 있습니다. 아래의 코드를 함께 공부해 보도록 하겠습니다.
 
  • CSS 편집 CODE
$("div").addClass("important");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");
$("p").css("background-color");
$("p").css("background-color","yellow");
먼저 addClass() 함수는 클래스를 추가하는 것이 가능합니다. 위 코드에서는 div에 important라는 클래스가 추가되게 됩니다.
 
예를 들어 위와 같은 코드에 $(“div”).addClass(“world”)라는 코드를 실행하면 다음과 같이 클래스가 변화하게 됩니다.
 
.addClass() 적용 전
 
<div class="hello">hello world!</div>
 
.addClass() 적용 후
 
<div class="hello world">hello world!</div>
 
notion imagenotion image
 
이제부터는, jQuery의 effect에 대해 알아보도록 하겠습니다. effct를 사용하면 마치 파워포인트의 애니메이션과 같이 요소에 다양한 효과를 줄 수 있습니다.
 
  • effect CODE
$("p").hide();
$("p").show();
$("p"),toggle();
$("#div1").fadeIn();
$("#div1").fadeOut();
$("#div1").fadeToggle();
$("#div3").fadeIn(3000);
 
notion imagenotion image