JQuery란?, Selector

jQuery

• JavaScript의 라이브러리 
• 자바스크립트를 쉽게 쓰기 위해서 사용
• J-QUERY는 css의 selector 의 기능을 차용해서, 원하느 요소를 쉽게 가져올 수 있음 
• 자바스크립트나 제이쿼리나 html요소를 가져와서 속성을 바꿔줌 

 

jQuery를 사용하는 이유?

1. 사용의 편리성

2.cross browsing : 자바는 jdk 설치해서 해석기가 있어서 쓸 수 있었는데 , 자바스크립트는 해석기가 브라우저에 붙여있는 방식.

브라우저 종류라 버전마다 표현이 다른데, jQuery는 내부적으로 브라우저마다 처리를 해놓아서 신경 쓸 필요가 없음 

3. 다양한 플로그인 : J-QUERY를 기초로 한 부트스트랩 등이 있음 

 

 

jQuery 시작하기 전에

1.Study - jQuery 폴더 만듦 

2.확장 - Open in browser  - 설치  (Alt shift b : 구글크롬 엔터로 열기)

- Html 여는방법 

1. 더블클릭

2 웹서버에 던져서 보여주는 방식(Open in browser)

 

---

 

 

 

selector

: 뭐중에 뭐 ,뭐 밑에 뭐 < -이런식으로 잘 쓰임!

 //기본 셀렉터 
        console.log($("#one")); //*id가 one인 요소
        console.log($(".cls")); //*class가 cls 인 요소 
        console.log($("p")); //*태그가 p인 요소 

 //000중에서...
        console.log($("*")); //모든 요소 / 잘 안쓰임 
        console.log($("h2.cls")); //*h2태그 중에서 class가 cls 인 요소 
        console.log($("p:first")); // p태그 중에서 첫번째 
        console.log($("ul li")); //ul 태그의 자식요소 li 요소 
        console.log($("ul li:first")); //첫 ul 자식 중 첫 li 
        console.log($("ul li:first-child")); //모든 ul의 자식중 첫 li

• 셀렉터로 id를 가지고 올 때, 그 id를 가진 태그가 여러개더라도 한개만 가져옴. 여러개라면 제일 위에 있는 것 하나만 가져옴
• id를 제외한  classs나 태그 등을 셀렉터로 가지고 올 경우 여러개를 다 가지고옴

 

 

console과 요소(element)

 

console

- Console창에 찍으면 length(몇 개)를 가지고왔는지 알 수 있음, 없으면 length 가 0 

- 내가 가지고 오려고 한 요소를 잘 가지고 왔는가 콘솔로 확인하는 습관 들이기! 

 

 

개발자창 도구에서 요소도 잘 볼 수 있어야 한다. 태그는 파랑색 속성은 보라색 값은 주황색  - 좀 다르다(태그는 보라색, 속성은 주황색, 파란색은 값)

 

 

 

 

 

$(this)

: 현재 엘리먼트 선택 

//this == 현재 이것 
        $("p").click(function(){
            console.log($(this)); // 클릭 이벤트가 일어난 '그(This)' 요소 
        });

- this는 활용도가 높다 - > 잘 사용하면 코드가 간결해지고 셀렉터 코드가 단순해지면서 가지려고 한 요소를 깰끔하게 잘 가져올 수 있음! 

 

 

 

특정 속성 가져오기

 

 //속성 필터 (특정 태그의 특정 속성)
        console.log($("a[href]")); //*a태그중에서 href 속성이 있는 요소 (a태그는 href속성을 다 가지고있음)
        console.log($("a[target='_blank']")); //*a태그중에서 target 속성의 값이 _blank인 요소
        console.log($("a[target!='_blank']")); //위의 반대

Target 속성 1. self(기본값, 현재창에서 열림) 2. Parent(부모프레임에서 열림? ) 3. _ blank (새로운 창 오픈)

 

 

odd와 even

 

- 0으로 시작을 한다. (0은 2로나눠도 0이 되기 때문에 짝수로 본다/  모든 배수의 시작은 0  )

- odd : 홀수

- even : 짝수

모든 배수의 시작은 0 

 

 

 

 

 

 

들여쓰기로 부모 자식 파악 

 

• 한칸 떨어져서 안에 둘러쌓인 요소는 자식요소임!
• li태그의 부모는 ul태그 ,Ul 태그의 부모는 body태그 , 최상위 부모는 html

 

 

 

 

Dom : Document object model 

• 하나의 태그를 하나의 객체로 본다 (자바도 하나의 오브젝트. 그 안에 필드 메서드 등이 있음)
• 부모,조상,형제 관계가 있기 때문에, 이런 관계를 이용하여 원하는 요소를 셀렉터로 찍어오기도 한다. 

 

 

부모 관계를 이용한 select 방식

• parent()
• parents()
• parentsUntil()

//*parent() : 지정한 요소의 바로 위 부모를 찾는다. 
        console.log($("span").parent());
   

//parents() : 지정한 요소에서 html 까지 올라간다. 
        console.log($("span").parents());
        
//올라가면서 특정 요소만 찾도록 할 수 있다. 
//-html까지 올라가면서 읽어야 하니까 효울이 안좋음 
        console.log($("span").parents('div'));
       
//parentsUntil() :당사자와 지정된 요소와 사이의 부모들을 찾는다. 
//당사자와 지정된 요소는 선택에서 제외 된다. 
        console.log($("span").parentsUntil('.ancestors'));

• Closest() : 선택한 요소로부터 부모 요소들을 탐색하여 가장 먼저 발견한 요소를 가져옴 

  //parents 는 상위로 올라가면서 걸리는 모든 div를 가져온다. 
        $("#item").parents('div').css({'border' : '2px solid red'});

 //closest는 상위로 올라가면서 걸리는 첫번째 div를 가져온다.
        $("#item").closest('div').css({'border' : '2px solid blue'});

: span으로부터 가장 가까운  div 태그주세요! 위로 올라가면서 가장가까운 거! (제일 먼저 걸리는 indexof 가 생각남)

 

 

 

 

 

 

자손 관계를 이용한 select 방식

 

• children()
• find() - 간단해서 많이 사용 

  //지정한 요소의 바로 하위 요소들을 가져온다. - 아래 캡쳐사진 확인 
        console.log( $(".ancestors").children());

 //지정한 요소의 자식들 중 span태그만 찾아온다. 
        console.log( $(".ancestors").find("span"));

console.log( $(".ancestors").children());

 

 

 

 

 

형제 관계를 이용한 select 방식

 

 //next와 prev
        $("h3").next().css({'border-color' : 'blue'}); //h3보다 한칸 아래
        $("h3").prev().css({'border-color' : 'blue'});//h3보다 한칸 위

//nextAll과 prevAll
        $("h3").nextAll().css({'border-color' : 'pink'}); //h3보다 아래
        $("h3").prevAll().css({'border-color' : 'pink'});//h3보다 위

//nextUntil과 prevUntil
//until은 당사자와 선택한 요소는 제외된다. 
        $("h3").nextUntil('p').css({'border-color' : 'red'}); //h3보다 아래
        $("h3").prevUntil('p').css({'border-color' : 'red'});//h3보다 위

//siblings 는 당사자를 제외한 모든 동일선상의 요소를 선택 
        $("h3").siblings().css({'background-color'  :'blue'});
        console.log( $("h3").siblings()); //배열의 형태로 보임(??)

 

- html문서는 위에서 아래로 내려간다는걸 기억하기! (부모 자식관계도)

 

 

 

 

Filtering을 이용한 select 방식

• first()
• eq(num)
• last()
• filter(selector)
• not(selector)

//배열 개념 (인덱스 개념)
		console.log($("div p").first()); //0번 인덱스(첫번째) 
		console.log($("div p").eq(0)); //0번 인덱스
		console.log($("div p").last()); //마지막 요소
		console.log($("div p").eq(7)); // 마지막 요소 / 총8개인걸 아니까 
	
    
    
//필터 개념(셀렉터로 가져온걸 셀렉터로 한번 더 걸러주는 개념)
		console.log($("p").filter(".sel"));//p 요소 중 클래스가 sel인 요소 

//아래와 결과는 같다 이게 좋음 그래서 필터쓸일이 별로 없음
//셀렉터 안에서 해결하는게 제일 좋음
		console.log($("p.sel")); 
		
		console.log($("p").not(".sel"));//p 요소 중 클래스가 sel이 아닌 요소