12/16 66-1 [JQuery] 개념+Select
잠시 Spring은 접어두고 (예에에에에에에에에 !!!!!!)
JQuery
크로스 플랫폼의 자바스크립트 라이브러리다.
자주 사용하는 것들을 함수로 만들어 놓아 기능을 간편화 하였다
메서드 체인방식에 따른 효율적인 코딩가능
JQuery를 사용하기 위해선 역시 라이브러리 다운로드가 필요함
production 이랑 development 둘 중하나 받아도 됨
나는 두개 다 받음
ui 관련 제공은
프로젝트할 때 참고 많이 될 듯
이클립스를 잠시 떠나서 (오예에에에에!!!!1)
비주얼스튜디오코드로 감
그리고 라이브러리 임베딩을 하자
jquery 사용을 위한 라이브러리 임베딩
<script src="../js/jquery-3.6.2.min.js"></script>
요거 조금 쓰다가
CDN주소로 사용함
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
JQuery 들어가기..
요소를 load하는 법 총 세 가지 표현이 가능하다
자바스크립트에서 노드라고 불렸던 객체들을
JQuery에선 요소라고 부른다 !
첫 번째
$(document).ready( == 모든요소들이 로드 완료 !되면 밑의 함수가 실행된다. 라는 뜻
function(){//무명 메서드(이름이 없는 메서드)
//여기서 코딩-자바스크립트와 jQuery혼합
});
두 번째
$().ready(
function(){//무명 메서드
//여기서 코딩
});
세 번째 ==> 짧고 간편하니 요 방식을 많이 쓴다
$(
function(){//무명 메서드
//여기서 코딩
});
*** $( 여기다가 scc셀렉터를 넣어 줌 )
요렇게 쓰는걸 팩토리 함수라고 함
팩토리 함수는 문서개체를 가져올 때 사용 즉 $(선택자).메서드()형식으로 선택자에
해당하는 jQuery객체를 가져와 메서드를 적용시킨다.
선택자는 " "으로 감써가나 ''로 감싸준다.(String형이 와야함으로)
$대신에 jQuery도 가능
ex. jQuery( ) 요렇게 !!
역시실전을 봐야 금방 안다
순수 바닐라자바스크립트를 사용했을 때와 JQuery를 이용했을 때를 비교해서 얼마나 간편 해 졌는지 볼 수 있음
바닐라 자바스크립트로 구현
window.addEventListener("DOMContentLoaded",function(){
var span=document.querySelector('#jQuery'); // 이건 자바스크립트 객체
console.log(span);
console.log('%O',span);
console.log(span.tagName);
span.style.color='red'
span.innerHTML='<strong>프로그램 진입점</strong>';
//위 두 줄은 한 라인으로 작성 불가
var legend = document.querySelector('legend');
legend.onclick=function(){
span.style.color='black'
span.innerHTML='jQuery 첫 수업입니다';
};
});제이쿼리이용(방법 총 4가지로 )
프로그램 진입점 방법1.
$(document).ready(function(){
var span = $('#jQuery'); //$() 요런걸 팩토리함수 , 제이쿼리 객체
console.log(span);//나온거 위에꺼랑 비교해봐!
console.log('%O',span);
console.log(span.tagName); // undefinde 즉 제이쿼리 객체는 tagName이라는 속성이 없음
// span.css('color','red');
// span.html('<strong>프로그램 진입점</strong>');
//위 두 줄을 메소드 체인으로 한 라인으로 작성
span.css('color','red').html('<strong>프로그램 진입점</strong>');
$('legend').click(function(){
span.css('color','black').html('jQuery 첫 수업입니다');
});
});
프로그램 진입점 방법2
$().ready(function(){
$('#jQuery').css('color','red').html('<strong>프로그램 진입점</strong>');
$('legend').click(function(){
$('#jQuery').css('color','black').html('jQuery 첫 수업입니다');
});
});
프로그램 진입점 방법3.
$(function(){
$('#jQuery').css('color','red').html('<strong>프로그램 진입점</strong>');
$('legend').click(function(){
$('#jQuery').css('color','black').html('jQuery 첫 수업입니다');
});
})
프로그램 진입점 방법4.
jQuery(function(){
jQuery('#jQuery').css('color','red').html('<strong>프로그램 진입점</strong>');
jQuery('legend').click(function(){
jQuery('#jQuery').css('color','black').html('jQuery 첫 수업입니다');
});
})여기까지 모두 script안
[Selector]
1.선택된 제이쿼리DOM 객체 수 얻기
length속성 : 제이쿼리에선 size()가 사라져서 length를 이용
요소 존재 여부를 판단 할 때도 사용 함 (0이면 요소가 없음)
얘를 보면서 가져가봐
<legend>선택자 첫번째</legend>
<ul style="list-style-type: decimal;">
<li><a href="http://www.naver.com">네이버</a></li>
<li><a href="http://www.daum.net">다음</a></li>
<li><a href="www.nate.com">네이트</a></li>
</ul>ex
a요소 (자바스크립트에선 a태그)의 수
$('a').length // 3개
요렇게 표현함
2. $("선택자[속성*='속성값']")
* ~의 모든 것
$ ~으로 끝나는 것
^ ~으로 시작하는 것
css( , ) 이렇게 css를 바로 적용시킬 수도 있음! 오 신기 !!
$('a[href*=naver]').css('color','red').css('fontSize','1.8em');
=>a요소 중에서 href가 naver가 들어가는 것이 선택 됨 //네이버
$('a[href$=net]').css('color','green').css('fontSize','.8em');
=> a요소 중에서 href가 net으로 끝나는 것이 선택 됨 //다음
$('a[href^=www]').css('color','#998989').html('NATE');
=> a요소 중에서 href가 www로 시작하는 것이 선택 됨 //네이트
3. $("선택자:contains('문자열')"): 시작 태그와 종료 태그 사이의 내용으로 선택
$('a:contains(이)').css('backgroundColor','black');
=> a요소 중 a태그 사이의 내용중에 "이" 가 포함되어 있는 것들 선택 //네이버 , 네이트
이번엔 테이블
<table style="background-color:gray ;width:60%;border-spacing: 1px;">
<tr style="background-color:white ;" >
<th>번호</th><th>제목</th><th>작성자</th><th>작성일</th>
</tr>
<tr style="background-color:white ;" >
<td>1</td><td>제목1</td><td>작성자1</td><td>2013-9-12</td>
</tr>
<tr style="background-color:white ;" >
<td>2</td><td>제목2</td><td>작성자2</td><td>2013-9-12</td>
</tr>
<tr style="background-color:white ;">
<td>3</td><td>제목3</td><td>작성자3</td><td>2013-9-12</td>
</tr>
<tr style="background-color:white ;">
<td>4</td><td>제목4</td><td>작성자4</td><td>2013-9-12</td>
</tr>
</table>
<br/>
<table style="background-color:gray ;width:60%;border-spacing: 1px;">
<tr style="background-color:white ;" >
<th>번호</th><th>제목</th><th>작성자</th><th>작성일</th>
</tr>
<tr style="background-color:white ;" >
<td>1</td><td>제목1</td><td>작성자1</td><td>2013-9-12</td>
</tr>
<tr style="background-color:white ;" >
<td>2</td><td>제목2</td><td>작성자2</td><td>2013-9-12</td>
</tr>
<tr style="background-color:white ;">
<td>3</td><td>제목3</td><td>작성자3</td><td>2013-9-12</td>
</tr>
<tr style="background-color:white ;">
<td>4</td><td>제목4</td><td>작성자4</td><td>2013-9-12</td>
</tr>
</table>
4. $("선택자:even") 혹은 $("선택자:odd"). 인덱스는 0부터
$('table tr:even').css('backgroundColor','red'); ==>테이블 중 짝수 번 째꺼 빨강으로
$('table tr:odd').css('backgroundColor','green'); ==> 테이블 중 홀수 번 째꺼 초록으로
주의 해야 할 것이 선택한게 모든 tr 이기 때문에
table구분없이 적용된다 !!
5.$("선택자:first-child") 혹은 $("선택자:eq(인덱스)")
좀 햇깔렸는데
$("선택자:first-child")
이게 구조적인 접근임!
부모자식의 관계에서의 첫 번째라는 것 !! 관계를 잊지 말자 !! 구조! 관계 !!!
방법1.
$('table tr:first-child').css('backgroundColor','white');
방법2 인덱스로
$('table tr:eq(0)').css('backgroundColor','white');
$('table tr:eq(5)').css('backgroundColor','white');
요거 두개는 아무튼 테이블에서 첫 번째 행들이 선택 됨
[Selector02]
eq(0)과 first : 자식부모 관계 상관없이 선택 된 객체에서 첫 번째 객체를 의미, eq(선택된 객체수-1),last도 있다
first-child:이건 구조적으로 접근임!!! 관계에서 첫 번째!
이건 구조먼저 봐야해!!
<fieldset>
<legend>선택자 두번째</legend>
<!-- li태그중 짝수번째는 글자색을 RED
홀수번째는 GREEN
-->
<ul>
<li>가</li>
<li>나</li>
<li>다</li>
<li>라</li>
</ul>
<!-- 첫번째 li의 백그라운드 YELLOW
마지막번쩨 li는 blue
-->
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</fieldset>헷깔리지 말아야 할 게!!
$('ul:first-child').length);
요거 개수가 0개임!!!
왜?? 뜻이 ul태그 중에서 그게 첫 번째 자식인 애를 의미!!
그니까 ul인데 (부모가 되었든간) 첫 째인애!!!
저기서 보면 맨 처음 ul는 fieldset에 두 번째 자식임! 그래서 안 됨
반면 eq(0) first는 그런 관계 상관없이 선택된 객체에서의 첫 번째 객체를 의미함!
$('ul:eq(0) li:even').css('color','red');
$('ul:eq(0) li:odd').css('color','green');
이거랑
$('ul:first li:even').css('color','red');
$('ul:first li:odd').css('color','green');
이거랑
똑같다
$('ul:last-child li:first-child').css('background-color','yellow');
//li:eq(6)를 변수처리
var size = $('ul:last li').length;
$('ul:last li:eq('+(size-1)+')').css('background-color','blue');