JQuery 2일차
> 제이쿼리 선택자 개요
-선택자는 HTML요소를 선택하여 가져오며 css선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할수 있다.
-제이쿼리 선택자는 '동적'으로 스타일을 적용할 수 있다.
css예제)
<style type="text/css">
선택자(태그) {속성명:속성값;~}
h1 {color:red}
span {border:3px solid blue}
.my{border:5px dotted green}*/
</style>css에서 이렇게 꾸몄다고 할때 제이쿼리 선택자를 이용하여 코딩하면 더욱 편하고 간단하게 할수있다.
요소(태그) 선택자
형식) $('태그명').css('속성명','속성값')
1) h1태그를 찾아서 color속성에 red을 적용시키라
2) span태그를 찾아서 3px의 실선을 적용시켜라
<script>
$('h1').css.('color','red');
</script>
----------------------------------------
<script>
$('span').css('border','3px solid blue');
</script>클래스 선택자
형식) $(태그명.클래스명)
1) span태그의 my라는 클래스선택자를 가진태그 찾아서 스타일적용
<script>
$('span.my').css('border','8px double green');
</script>아이디 선택자
형식) $('태그명#id선택자명') = $('#id선택자명')
-아이디는 중복 불가로 하나뿐이여서 태그명은 생략가능하다.
1) id content인 태그를 찾아서 스타일적용
<script>
$("#content").css('background','yellow');
</script>전체 선택자
형식) $('*')
-모든 태그를 가리키는 예약어로 *을 쓴다.
1) 모든 태그에 cyan색을 적용
<script>
$('*').css('color','cyan')
</script>체이닝기법(chaining method 기법)
특정태그에 대해서 함수를 호출할때 여러개의 함수를 마치 체인이 엮인 모양처럼 호출하는 방식
형식) $(요소 선택).css(속성1,값1).css(속성2,값2).css(속성3,값3);
<script>
$('test').css('font-family','궁서체').css('font-size','50pt').css('color','green')
</script>each함수
같은 태그를 구분해서 스타일을 적용하고 반복적으로 적용할때 사용 each함수 사용
=>자바의 for문과 같다.
형식) 형식)$('반복적으로 수행할 태그명').each(호출할 사용자정의함수명 | 익명함수)
<style>
.fromjQuery0 {color:red}
.fromjQuery1 {color:pink}
.fromjQuery2 {color:blue}
.fromjQuery3 {color:yellow}
</style>
/*사용자 정의 함수를 만들어서 사용할경우*/
<script>
var i=0; // 첨자로 이용(각각의 클래스선택자를 구분하기위해서 사용)
$(function(){
$(li).each(forEach) // <li>태그를 반복할 경우
})
function forEach(){
$(this).attr('class','fromjQuery'+i);
// this를 쓰지않고 li를 쓰면 태그구분안되서 전체가 다 적용된다.
//$(this)=>현재 선택해서 읽어들이는 태그객체를 구분시켜주는 예약어(이벤트)
i++;
}
</script>/*익명함수를 사용할경우*/
<script>
var txt="";
$('#root').children().each(function(){
txt+=$(this).text()+" ";
})
alert(txt);
</script>> 중첩된 태그의 정보를 얻어오고 내용을 검색하는법
1) text(): 태그의 텍스트만 가져오는 함수 <-> text(매개변수(변경할값))
2) html(): 태그와 텍스트들까지 같이 가져오는 함수<->html(매개변수)
3) text(): 입력폼 안에 입력양식에 해당되는 값을 가져올때 사용 (ex)input,check,radion,, <-> val(매개변수명)
부모-자식관계(중첩관계)
중첩) 트리구조로 형성(DOM)
형식) (부모태그 > 자식태그)
-부모태그 바로 밑에 있는 자식태그를 선택할때 사용하며 자손태그(손자) 포함X
<script>
$('body > div').css('border','3px solid navy');
</script>형식) (부모태그 자식태그)
-부모태그 바로 밑에 있는 자식태그를 선택할때 사용->자손태그 포함 O
<script>
$('body div').css('border','3px solid navy');
</script>형식) (부모태그 + 자식태그)
-바로 옆의 태그를 찾을때 사용
<script>
$('span+a').css('border','3px double green');
</script>형식) next()
-바로 다음번 항목(태그)
<script>
$('span+a').next().css('border','3px double green');
</script>형식) prev()
-바로 이전의 항목(태그)
<script>
$('span+a').prev().css('border','3px double green');
</script>형식) nextAll()
-바로 다음번 항목전체
<script>
$('span+a').nextAll().css('border','3px double green');
</script>형식) prevAll()
-바로 이전의 항목전체
<script>
$('span+a').prevAll().css('border','3px double green');
</script>속성선택자
형식) $('요소[속성명]')
=>특정 속성을 가진 태그를 찾을때 사용
*button태그중에서 name속성인 버튼을 찾아서 버튼의이름을 변경됨으로 변경하라
<script>
$('button[name]').html('변경됨');
</script>형식) $('요소[속성명=값]')
=>속성값이 일치하는 태그를 찾아라
*input태그중에서 type속성값이 text인 태그를 찾아서 hello jQuery글자를 저장시키세요
<script>
$('input[type=text]').val('hello jQuery'); // 회원가입때 자주사용
</script>형식) $('요소[속성명!=값]')
=>속성값이 일치하지않는 태그를 찾아라(일치하는 태그외의 전부)
*input태그중에서 type속성값이 text가 아닌 태그를 찾아서 hello jQuery글자를 저장시키세요
<script>
$('input[type!=text]').val('hello jQuery');
</script>형식) $('요소[속성명^=값]')
=>지정한값으로 시작하는 태그를 찾아라
*div태그중에서 id속성값이 content-로 시작하는 태그를 찾아서 배경색을 green을 적용시켜라
<script>
$('div[id^=content-]').css('background','green');
</script>형식) $('요소[속성명|=값]')
=>지정하는값을 찾거나 지정한글자- 태그를 찾아라
*찾는값이 content 이거나 content- 인것을 찾아 배경색을 blue를 적용
<script>
$('div[id|=content]').css('background','blue');
</script>형식) =값]')
=>지정한 값으로 끝나는 태그를 찾아라
*div태그중에서 id속성값이 2로 끝나는 태그를 찾아서 글자크기를 20pt,배경색은 노란색으로 설정하라
<script>
$('div[id$=2]').css('font-size','20pt').css('background','yellow');
</script>형식) $('요소[속성명*=값]')
=>지정한 값을 포함한 태그를 찾아라(ex sql의 like연산자 비슷) 관련된 값 다 찾는경우
*input태그중에서 id속성값이 한국을 포함하는 단어 찾아서 적용(공백은 인식X)
<script>
$('input[id*=한국]').css('font-size','30pt').css('background','brown');
</script>형식) $('요소[속성명~=값]')
=>지정한값을 단어로서 포함하는 태그를 찾아라(단어중심으로)
*input태그중에서 name속성값이 한국을 포함하는 태그를 찾아서 글자크기를 50pt로 설정
<script>
$('input[name~=한국]').css('font-size','50pt'); //공백을 인식 O ->단어중심으로 찾는다
</script>입력양식에 관련된 속성선택자
input 과 같은 입력양식에 관련된 필터 속성 선택자
형식) 요소[속성명=값] => 요소:속성명
ex) $('input[type=text]') => $('input:text')로 간단히 사용 가능
*input태그중에서 password인 속성을 찾아서 배경색을 pink,값입력을 저장해라
<script>
$('input:password').css('background','pink').val('값입력');
</script>select
input 과 같은 입력양식에 관련된 필터 속성 선택자
요소(태그):selected=>select태그의 option객체중에서 선택된 태그를 가리킬때 사용하는 속성명
setTimeout(호출할 함수명 | function(){},초단위(1000))->1초(1초 후 한번만 실행)
setInterval(호출할 함수명 | function(){},초단위(1000))->1초(계속,반복 실행)
<script>
$(function(){
setInterval(function(){
var value=$('select > option:selected').val();// select의 option에서 선택된거
alert(value);
console.log(value); //console(내장객체) log(출력할값)
},5000);//5초뒤에 선택된 항목을 화면에 출력
})
</script>
body>
<h1>jQuery 예제</h1>
<select>
<option>화면구현</option>
<option>오라클</option>
<option>자바</option>
<option>JSP</option>
<option>Git/GitHub</option>
<option>JQuery</option>
</select>
</body>
filter
선택자는 같은태그일때 속성을 이용하는데 만약 같은 태그인데 속성이 없다면 어떻게 구분해서 스타일을 적용해야할까?
이럴때 사용하는 것들은
요소:odd:홀수번째 위치한 태그를 찾기
요소:even=>짝수번째 => 내부적으로 인덱스번호는 0부터 시작이라 헷갈릴수있음.
요소:first=>첫번째 위치의 태그
요소:last->마지막번째 위치의 태그
요소:contains(찾는문자열):찾는 문자열을 가진 태그를 찾기
요소:eq(n)=>n번째 위치를 가진 태그찾기(인덱스번호가 같은거)=>ex)~where id=3
요소:gt(n)=>n번째 위치의 태그보다 큰 위치를 가진 태그 찾기 ex) n=3일때 >3
요소:lt(n)=>n번째 위치의 태그보다 작은 위치를 가진 태그 찾기 ex) n=2일때 <2
요소:not(선택자)=>선택자와 일치하지 않은 태그 찾기
요소:has(특정태그)=>특정태그를 찾을때 사용
구체적으로 예를 들어보자면
<script>
$(function(){
$('tr:odd').css.('background','pink'); //내부적으로 인댁스번호가 0부터 시작 => odd는 1,3,5,,,,
$('tr:even').css.('background','pink'); //내부적으로 인댁스번호가 0부터 시작 => even은 0,2,4,,,,
$('tr:first').css('font-size','23pt').css('background','yellow');//첫번째 태그에 적용=> 위에꺼랑 중복되지만 중복되면 나중에 한게 적용된다.
$('tr:last').css('font-size','30pt').css('background','cyan').css('color','red');//마지막 태그 글자색은 red
$('td:contains(A형)').css('background','purple');//단어를 찾는거라 td
$('tr:eq(0)').css('font-size','23pt').css('background','green');
$('tr').eq(0).css('font-size','23pt').css('background','green');// 위에랑 같은거지만 이렇게 함수로도 사용가능
$('tr:gt(2)').css('font-family','바탕체').css('font-size','16pt').css('color','red');
$('tr:lt(2)').css('font-family','바탕체').css('font-size','16pt').css('color','red');
$('tr').not(':even').css('color','cyan');//홀수번째 태그찾아서 글자색 cyan (짝수가 아닌것)
$('tr:last').css('font-size','30pt').css('background','cyan').css('color','red');//글자색은 red
$('tr:has(th)').css('font-family','궁서체').css('font-size','50pt');//추가 (th)태그를 찾아서 적용
})
</script>
<body>
<center>
<table border="1">
<tr><th>이름</th><th>혈액형</th></tr>
<tr><td>테스트</td><td>A형</td></tr>
<tr><td>임 시</td><td>B형</td></tr>
<tr><td>테스트2</td><td>O형</td></tr>
<tr><td>테스트3</td><td>AB형</td></tr>
</table>
</center>
</body>
선택자 정리 표
나머지 하나는 import를 안해서 월요일에 받아와서 추가 및 전체적으로 메모내용 더 넣기
2022-07-29
ㅋㅋ