선거가 있어서 어제는 투표를 하고왔습니다. 그리고 놀았습니다ㅎㅎ.
그리고 오늘은 jQuery에 관한 내용을 공부했슴다.
jQuery
jQeury
- 존레식에 의해 개발된 경량 javascript 라이브러리이다.
- Wirte Less DO More(보다 간단히 많은 것을)을 모토로 복잡했던 코드를 손쉽게 구현
(DOM과 관련된 처리 쉽게 구현)
(일관된 이벤트 연결 쉽게 구현)
(시각적 효과 쉽게 구현)
(Ajax 애플리케이션 쉽게 개발)- 애니메이션 기능, Ajax통신, 이벤트 처리 등 폭넓게 지원
- jQuery 플러그인을 통해 차트 작성, 슬라이드쇼, 엑셀같은 테이블도 간단한 코드로 구현 가능
jQuery 연결
- CDN(Content Delivery Network)을 통한 연결
-> 온라인으로 js파일을 불러와서 진행- 파일 다운로드 연결(오프라인에서 사용)
-> jQuery 홈페이지에서 js파일 다운로드
본인은 다운로드해서 많이 사용할듯 합니다
jQuery 선택자 사용법
const text1 = $("#text"); $(선택자).메소드명(속성,값);이 가장 기본적인 형태입니다.이런식으로 앞에 $를 사용하고 선택자를 넣어서 선택합니다.
- javascript window.onload와 같은 개념의 메소드를 사용하는 방법
$(document).ready(function(){ }); 줄여서도 사용 가능 $(function(){ })
jQuery Traversing (객체탐색)
jQuery Traversing
- jQuery의 탐색
- 특정 요소를 찾거나 필터링하는 작업은 대부분 선택자를 사용하면 되지만, 선택자에 의해 찾은 요소들을 다시 2차 필터링하거나 새로운 요소를 추가할 때는 Traverse관련 메소드를 사용
- 처음 필터 처리한 요소들의 집합에서 다시 특정요소를 찾거나 필터링 동작을 추가하는 행위
$("선택자").(밑의 예시들); 모든 예시들은 앞에있는 선택자 뒤에 .하고 붙는다.
filtering
filtering
선택자로 지정한 객체를 기준으로 객체 그룹에서 위치에 기준하여 객체를 선택하는 메소드
1.first() : 선택된 요소 중 제일 처음있는 요소 리턴
2.last() : 선택된 요소 중 제일 마지막에 있는 요소 리턴
3.eq(숫자) : 인덱스 번호와 일치하는 요소 리턴(모든게 그러하듯 0부터 시작합니다.)
4. filter("선택자") : 인자값과 일치하는 요소만 리턴
5. not("선택자") : 인자값과 일치하지 않는 요소만 리턴
Ancestors
Ancestors
선택된 요소의 상위 요소를 선택할 수 있는 메소드
1.parent() : 선택된 요소의 바로 위 상위요소만 리턴
2.parents([인자]) : [인자]가 비어있을 경우 : 선택된 요소의 모든 상위요소 리턴
[인자]값이 있는 경우 : 매개변수와 일치하는 부모만 리턴const select2 = $(".ancestors span").parents("div"); select2.css("border","2px solid blue");위의 경우 (.ancestors클래스의 자식객체 중 span요소의 부모 요소들 중 div인 요소만 가져온다.)
3. parentsUntil([인자]) : 얘는 그냥 인자값을 받는다.
선택된 요소부터 인자요소까지 범위의 요소를 리턴한다. 단, 인자로 선택된 요소는 제외const select = $(".ancestors span").parentsUntil("div"); //div는 제와하고 그 전까지만 select.css("border","2px solid red");
Descendants
Descendants
선택된 요소의 하위 요소들을 선택할 수 있는 메소드
1.children([인자]) : 선택된 요소의 모든(다음레벨) 객체를 리턴한다.const select = $(".descendants").children();descendants의 자식요소들을 선택한다.
인자값이 있을경우는const select = $(".descendants").children(".child1");자식요소들 중 인자값에 해당하는 요소들만 가져온다.
/
2.find([인자]) : 선택된 요소의 인자와 일치하는 모든 후손(모든레벨)객체 리턴const select = $(".descendants").find(".child1");후손 요소들 중 child1클래스를 가지고있는 요소들말 선택한다.
Sideways
sideways
선택된 요소의 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드
이 메소드는 선택한 요소를 기준으로 다음으로 가는지, 전으로 가는지에 따라 메소드가 다릅니다.
그 전에 일단 본인을 선택하는 메소드부터 봅시다.
sibling[인자] : 선택된 요소의 같은 레벨에 있는 요소 리턴
인자값이 있는 경우 매개변수가 있는 형제요소 리턴const select = $(".siblings h3").siblings(); const select = $(".siblings h3").siblings("p"); //이 경우엔 선택자로 선택한 요소의 형제 요소 중 p속성인 친구들만 잡음
- 다음요소를 선택할 때
- next() : 선택된 요소의 같은 레벨 중 바로 다음 한 개 요소 리턴
- nextAll() : 선택된 요소의 같은 레벨 중 다음의 모든 요소 전부 리턴
const select = $(".siblings h3").nextAll("h5");위처럼 매개변수가 있는 경우에는 선택자와 같은 레벨의 요소들 중 h5인요소들만 다 가져옵니다.
3.nextUntil([인자]) : 선택된 요소부터 매개변수로 전달한 요소 사이의 모든요소const select = $(".siblings h3").nextUntil("p");
- 이전 요소를 선택할 때
이 경우는 사실 next랑 같은데 방향만 다를 뿐입니다.
그래서 간략하게 합니다!
- prev() : 선택된 요소 바로 전 요소 리턴
- prevAll() : 선택된 요소 전 모든 요소 리턴
매개변수 있을 경우에는 모든 요소중 매개변수와 같은 요소들만 리턴const select = $(".siblings h3").prevAll("span");3.prevUntil : 선택된 요소의 같은 레벨 중 이전의 모든 요소 전부 리턴
객체조작
객체조작의 맛만 봅시다!
each
each
- 객체나 배열의 요소를 검사하는 메소드
- $.each(배열이름,function(index,item){}) 의 형식으로 사용가능
지정한 배열은 0번부터 불러와 순번을 index, 값을 item에 넣는 메소드
item은 Element로 javascript객체이므로 jQuery메소드 사용 불가.
사용하려면 $(item)으로 item을 jQuery객체화 시켜줘야함- $(선택자).each(function(index,item){}) 의 형식으로도 사용 가능
선택자로 선택한 요소를 index순번으로 item에 요소값 조작시 사용
선택된 요소를차례로 조작할 때 사용function func1(){ const divs = $("#test1>div"); divs.each(function(index,item){ //index가 순회번호 (for문의 i역할) //item 해당 순번의 객체 //item은 자바스크립트 객체로 jQuery메소드를 사용하는 경우 $(item); console.log(index,$(item).text()); if($(item).is(".d1")){ $(item).css("color","red"); }else if($(item).is(".d2")){ $(item).css("color","blue"); }else{ $(item).css("color","green"); } }); //$.each(divs,function(index,item)){} }
addClass
addClass
엘리먼트에 클래스를 추가하는 메소드divs.eq(1).addClass("t-red"); divs.first().addClass("t-red");이런식으로 선택한 요소에 클래스를 집어넣음
removeClass
removeClass
엘리먼트에 클래스를 삭제하는 메소드const divs = $("#test2").children(); divs.eq(1).removeClass("t-red"); divs.eq(2).removeClass("t-red").removeClass("bg-yellow");메소드를 삭제합니다.
hasClass
hasClass
매개변수로 전달한 클래스를 갖고있으면 true/없으면 false 리턴function func4(){ const divs = $("#test2>div"); if(divs.eq(1).hasClass("t-red")){ //글씨색이 빨간새기면 글씨색 적용 해제 divs.eq(1).removeClass("t-red"); }else{ //아니면 글씨색 적용 divs.eq(1).addClass("t-red"); } }
toggleClass
toggleClass
매개변수로 전달한 클래스를 갖고있으면 removeClass("클래스명")
/ 갖고있지 않으면 addClass("클래스명");function func5(){ const divs = $("#test2").children(); divs.eq(3).toggleClass("t-red"); }
오늘은 여기까지! 고생쑤!!
