jQuery

[jQuery] selector

maribel 2019. 9. 18. 09:32

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>