1. 제이쿼리 선택자 (=CSS 선택자)
ul#gnb의 첫번째 li만 잡기
$('#gnb li:fitst-child')
$('#gnb li').eq( 0 )ul#gnb의 첫번째 li 빼고 다 잡기
$('#gnb li').eq( 0 ).siblings()
$('#gnb li:first-chilld').siblings()
$('#gnb li:not(:first-chilld)')
$('#gnb li:not(:nth-chilld('+(i+1)+'))')
$(`#gnb li:not(:nth-chilld(${i+1}))`)
2. 콜백 함수 : 어느 시점에 누가 써도 좋도록
제이쿼리 실행문
<script>
$(document).ready(function(){
})
</script>는 사실 (document).ready 생략가능
<script>
$(function(){
})
</script>2-1. 콜백 함수 : 즉각 실행해라!
자바스크립트
<script>
(function(){
})( )//<-여기가 추가!
</script>A 유형) 이름있는 콜백함수(=즉각 실행문)
<script>
window.onload = 함수명;
function 함수명( ){ // 화면이 열리자마 실행!
화면이 빨걔진다
}
document.getElementById('btn').onClick = 함수명
</script>B유형) 이름없는 콜백함수(=즉각 실행문)
<script>
window.onload = function(){ // 화면이 열리자마 실행!
화면이 빨걔진다
};
document.getElementById('btn').onClick = function(){
화면이 빨걔진다
}
</script>
2-2. 메서드 체인
"#btn을 클릭하면 '배경색 red' 실행하라"
<script>
$('#btn').click( function(){
$('body').css( {'background': 'red'} );
})
</script>"#btn을 클릭하면 '배경색 red' & '글자색white' 실행하라"
json과 같은 데이터 스타일 (자바스크립트 object)
<script>
$('#btn').click( function(){
$('body').css( {
'background': 'red',
'color': 'white'
} );
})
</script>좀 더 최적화
(1) 변수 선언
(2) 변수에 객체들을 집어넣은 다음
(3) 변수 삽입
<script>
const bgstyle = { // 변수 선언
'background': 'red', // 객체 삽입
'color': 'white'
}
$('#btn').click( function(){
$('body').css( bgstyle ) // 객체를 담은 변수를 대입
})
</script>3. 콜백 함수 실습
HTML
<p id="text"></p>js
(1) 콜백함수 이름 지어줌 function fun( ){ }
(2) 실행할 때 이름만 부르면 된다! fun( );
<script>
fun(); // 실행할 때 이름만 부르면 된다, 콜백 함수!
function fun(){ // 콜백함수, 이름 지어줌 'fun'
document.getElementById('text').innerHTML="끝"
}
</script>
HTML
<p id="text">
<button id="btn">나와라</button>
</p>js
<script>
// '나와라' 버튼 클릭하면 -> fun 함수 실행 ("끝")
document.getElementById('btn').addEventListener('click', function(){
fun();
})
// ------------------------------------------------
function fun(){ // 콜백함수, 이름 지어줌 'fun'
document.getElementById('text').innerHTML="끝"
}
</script>
