1. ready( )함수
<script>
$(document).ready(function(){ //문서를 읽어들여서 맨 처음 실행할 구문이 있다면 실행
alert("ready()를 이용한 함수 호출");
})
$().ready(function(){
alert("함수 호출2");
})
$(function(){
alert("함수 호출3");
})
</script>
2. each
<style type="text/css">
.fromjQuery0 {color:red}
.fromjQuery1 {color:pink}
.fromjQuery2 {color:blue}
.fromjQuery3 {color:yellow}
</style>
<script>
var i=0;
$(function(){
//형식)$('반복적으로 수행할 태그명').each(호출할_사용자정의함수명 | 익명함수명)
$('li').each(forEach)
})
function forEach(){
$(this).attr('class','fromjQuery'+i)
i++
}
</script>
<body>
<ul>
<li>jQuery each()연습1</li>
<li>jQuery each()연습2</li>
<li>jQuery each()연습3</li>
<li>jQuery each()연습4</li>
</ul>
</body>
3. 중첩
<script>
$(function(){
//중첩->트리구조로 형성
//형식) 부모태그 > 자식태그 =>부모태그 바로 밑에 있는 자식태그를 선택,자손태그 포함X
//형식) 부모태그 자식태그 =>부모태그 바로 밑에 있는 자식태그를 선택,자손태그 포함O
//형식) 부모태그+자식태그 =>바로 옆의 태그를 찾을때 사용
//특정태그를 찾으시면 prev(),next()를 이용
$('body div').css('border','3px solid navy');
$('p > span').css('border','3px dotted red');
$('span+a').next().css('border','3px double green');
//next()->바로 다음 태그
//prev()->바로 전의 태그
$('span+a').prev().css('background','yellow');
})
</script>
<body>
<div>
<ul>과일 목록
<li>사과</li>
<li>배</li>
<li>복숭아</li>
<li>오렌지</li>
<li>파인애플</li>
</ul>
<div>가을</div>
</div>
<div>jQuery 연습</div>
<p>
<span>태그정보</span>
<a>one</a>
<span>태그정보2</span>
</p>
</body>
4. 속성
<script>
$(function(){
/*
선택자 속성 설명
요소[속성명]->특정 속성을 가진 태그를 찾을때 사용
요소[속성명=값]->속성값이 일치하는 태그를 찾아라
요소[속성명!=값]->속성값이 일치하지않는 태그를 찾아라
요소[속성명^=값]->지정한값으로 시작하는 태그를 찾아라
요소[속성명|=값]->지정하는값을 찾거나 지정한글자- 태그를 찾아라
요소[속성명$=값]->지정한 값으로 끝나는 태그를 찾아라
요소[속성명*=값]->지정한 값을 포함한 태그를 찾아라(ex sql의 like연산자 비슷)
요소[속성명~=값]->지정한값을 단어로서 포함하는 태그를 찾아라
*/
$('button[name]').text('변경됨');
$('input[type=text]').val('hello jQuery')
$('div[id^=content-]').css('background','green')
$('div[id|=content]').css('background','navy')
$('div[id$=2]').css('font-size','20pt').css('background','yellow')
$('input[id*=한국]').css('font-size','30pt').css('background','chocolate')
$('input[name~=한국]').css('font-size','50pt')
})
</script>
<body>
<h3>속성선택자 이용(같은 태그일때)</h3>
<button name="btb">버튼</button>
<button>버튼2</button>
<input type="text">
<input type="password">
<br><!-- val() input box의 들어있는 값 -->
<input name="한국" value="한국">
<input name="한국인" value="한국인">
<input name="한국 민" value="한국 민">
<input name="대한민국" value="대한민국">
<div id="content-1">DIV content-1</div>
<div id="content-2">DIV content-2</div>
<input id="한국" value="한국">
<input id="한 국인" value="한 국인">
<input id="한국민" value="한국민">
<input id="대한민국" value="대한민국">
</body>
5. even, odd, first, last
<script>
$(function(){
/*
요소:odd->홀수번째 위치한 태그를 찾기
요소:even ->짝수번째
요소:first->첫번째 위치의 태그
요소:last->마지막번째 위치의 태그
*/
$('tr:even').css('background','pink');//내부적으로 인덱스는 0부터 시작
$('tr:odd').css('background','tomato');//내부적으로 인덱스는 0부터 시작
$('tr:first').css('font-size','23pt').css('background','yellow')
$('tr:last').css('font-size','30pt').css('background','cyan')
})
</script>
</head>
<body>
<center>
<table border="1">
<tr><th>이름</th><th>혈액형</th></tr>
<tr><td>test1</td><td>A형</td></tr>
<tr><td>test2</td><td>B형</td></tr>
<tr><td>test3</td><td>O형</td></tr>
<tr><td>test4</td><td>AB형</td></tr>
</table>
</center>
</body>