※ jquery
▶ javascript = > jquery를 사용하는 이유
- javascript
<script type="text/javascript">
function disappear(element){
element.style.display = "none";
}
</script>
<body>
<div onclick="disappear(this)">1. 클릭하면 사라짐</div>
</body>= inline 으로 함수가 연결되어있는데, 이건 좋은 코드가 아니다.
javascript 로도 완전히 분리된 코드를 짤 수 있지만, 코드가 너무 길어진다.
- jquery
$(document).ready(function(){ //페이지가 로드되면 내부의 것을 실행해라
$('div').click(function(){ // 이벤트핸들러
$(this).hide(); // 이벤트핸들러안에서의 this : 이벤트가 발생한 객체
});
});= 위와 동일한 작업을 수행하지만
완전히 분리되어있고, 코드도 간결하다
▶ jquery 사용하기위한 셋팅
: jquery 라이브러리를 넣고 경로 맞추기
src="../js/jquery-3.6.0.min.js"
▷ jquery 형식
$("선택자").메서드();- 여기서 반환되는것은 jquery 객체이다.
jquery 객체가 반환되기 때문에 jquery 메서드를 사용할수있는것임
$(document).ready(function(){});· ( function(){} ); : ready() 메서드 안에 익명함수를 넣어준 것이다
▶ 메서드체이닝
- 메서드를 연속으로 사용
- jQuery가 제공하는 모든 메서드는 그 반환값이 효과가 반영된 jQuery 개체이기 때문에
메서드를 이어서 사용할 수가 있음
$("tr:odd").css("font-weight", "bold").css("color", "blue");
※ 선택자
중요중요중요중요중요 !!!!! 중 !!!!!!! 요 !!!!!!!!!!!!!!!!!!
▶ * : 전체선택자
$('*').css("font-size","20px");
▶ '태그이름' : 태그선택자
$('h2').css("font-style","italic");
▶ '태그이름, 태그이름, 태그이름' : 다중태그선택자
- , : 여러개선택할때 사용
$('h1,div,span').css('border','1px solid green');= > h1,span,div 태그들를 모두 선택해라
▶ # : 아이디선택자
$('#header2').css('color','blue');
▶ > : 자식선택자
- 자식 = 직계로 연결되어있어야함
- 바로 하위에 있는
$('#div1 div > *').css('border','1px solid red');= >아이디가 div1인 것의 후손인 div의 ! 자식인 모든 태그
$('#div1 div > li').css('background','yellow');=> 아이디가 div2인 것의 후손인 div의 ! 자식인 li 태그
▶ 띄어쓰기 : 후손선택자
- 하위에 있는 모든
$('#div2 div *').css('border','1px solid blue');= > 아이디가 div2인 것의 후손인 div의 ! 후손인 모든 태그
$('#div2 div li').css('background','cyan');= > 아이디가 div2인 것의 후손인 div의 ! 후손인 li 태그
▶ . 클래스 : 클래스선택자 1
$('.ph').css('color',"red");=> 태그상관없이 클래스가 ph인 것들
▶ 태그 . 클래스 : 클래스선택자 2
$('span.ph').css('background','yellow');=> span 태그 이면서 && ph 클래스인 것들
▶ .클래스.클래스 : 클래스선택자 3
$('.ph.red').css('background','yellow');=> ph클래스이면서 && red 클래스인 것들
▷ body
<p class='ph red'>문단2</p>클래스 띄어쓰기 클래스 : ph red
- 클래스 두개를 동시에 사용하고싶을때 이렇게 씀
- ph클래스도 적용하고 red 클래스도 적용
▶ + : 특정태그 바로 다음에 나오는 태그 선택하기
- 내 태그 바로 뒤에 오는 형제태그를 뜻함
$('label + input').css('border', '1px solid blue');= > label 태그 뒤에오는 input 태그가 선택됨
▷ body
: label 태그 뒤의 input 태그는 text 이다. 따라서 텍스트 박스의 테두리가 파란색으로 그려짐
<body>
<div>
<label>이름 : </label><input type="text">
</div>
<div class="start">
<label>아이디 : </label><input type="text">
</div>
.
.
</body>
▶ 태그.클래스 ~ 태그 : 특정태그이고, 특정 클래스 다음에 나오는 모든 형제태그
$('div.start~div').css('background', 'cyan');=> start클래스의 div 다음에 오는 모든 형제
▶ 속성선택자
▷ type = text
- .val() 로 값을 읽고 넣는다
$('input[type=text]').val('안녕');= > input태그중에 type 이 text 인것
▷ name=
$('input[name=a2]').val('안녕');= > input 태그중에 name 이 a2인것
▷ a[title]
$('a[title]').css('color','orange');<a href="#" title="a태그입니다.">a태그2</a>= > title속성을 가지는 a태그
▶ 필터 선택자
- 선택자 중에 : 기호를 포함하는 선택자
- 걸러내는 역할
- index 는 0부터 시작해서 0, 1, 2 . . .
▷ 태그 : eq(index)
- 인덱스에 해당하는 단일 요소와 일치
$('tr:eq(1)').css('color','orange');= > 모든 tr 중 첫번째 (0번째 1번째) tr 선택
$('button:eq(1)').click(function() {
});
▷ 태그:odd / :even
- 인덱스가 홀수인 / 짝수인 (0부터 시작)
- 현재 문서에 존재하는 모든 특정태그 중 홀수번째 특정태그만 선택
tr:odd= > 현재 문서에 존재하는 모든 tr 중 홀수 번째 tr 만을 선택
▷ 태그:gt(4)
- 특정 태그들 중 인덱스가 4 초과인 모든 특정태그
tr:gt(4)= > 문서에 존재하는 모든 tr 중 그 인덱스가 4 보다 큰(초과) 모든 tr들을 선택
▷ 태그:last / :first
tr:last= > 모든 tr 중 가장 마지막 tr을 선택하는 선택자
$('button:first').click(function() {});= > id 없을때 여러개 버튼 중에 첫번째 버튼을 선택 :first
alert($('span:first').text());= > 첫번째 span태그의 텍스트를 읽어와서 메세지창에 출력
▷ 태그 :contains
$('th:contains("제목2")').css('color','red');
▶ input 필터 선택자
- text, radio, checkbox, submit, image, button 등이 있다
▷ input[type=text]
- input태그중에 type 이 text 인것에
값넣기 (text 상자에 값 넣을때는 val 사용)
$('input[type=text]').val('안녕');
▷ input[type=radio]
- radio : checked
name이 num이면서 동시에 체크된 것의 값읽기
$('input[name=num]:checked').val() // 얘 type 이 radio 임
▷ input[type=checkbox]
- checkbox : checked
$('input[type=checkbox]:checked').each(function(){
result += $(this).next().text() + " ";
});=> checkbox 에서 checked 된 것들의 (this) 바로 다음에 있는 태그의 (next) 텍스트를 가져와서 result 배열에 넣어라
여기서 왜 this 가 아닌 next 의 값을 배열에 넣으라 하냐면
보이시죠 ? 내가 가져와야 하는 값은 this 의 next 에 있음
▶ option
▷ option : selected
var result+=$('#sel1 > option:selected').val();=> 선택된 option 의 value 를 가져와서 result 배열에 넣어라
var str = $('#selLang > option : selected').text();$('select[name=sel1] > option:selected')
▷ change
$('#selLang').change(function() { // option 이 선택되면
});<select id="selLang">
<option>jsp</option>
<option>spring</option>
<option>JQuery</option>
</select>
※ each ()
[1] 배열과 객체를 순회할 목적의 메서드
$.each(배열객체, function(index, item){});index에는 배열의 인덱스가 전달되고
item에는 배열의 데이터가 전달됨
▷ 배열에 있는 값 차례대로 읽어서 태그 값에 넣기
var arr=[10,20,30];
var str="";
$.each(arr, function(index, item){
str+="<p>"+index+" : " + item+"</p>"; // index : (arr의)item
});
$('#result').html(str);0 : 10
1 : 20
2 : 30
▷ [{키,값},{키값}] 의 배열 키, 값 읽어서 태그 값에 넣기
arr = [
{name:'홍길동', id:'hong'},
{name:'김길동', id:'kim'},
{name:'이길동', id:'lee'} ];
str="";
$.each(arr, function(idx, item){
str+="<h2>[" + idx+"] " + item.name +"-" + this['id']+"</h2>";
}); //접근방식
$('#result').append("<hr>"+str); // .append : 기존 값 뒤에 추가
[2] 선택자로 선택된 여러 개 요소들을 개별적으로 처리할 때 사용
$(selector).each(function(index, item){});
▷ p태그 각각에 서로 다른 스타일 적용
- idx 번째의 item 값에 font-size 가 idx+1*100 로 설정된다 = 글자 크기가 점점 커지게 됨
$('p').each(function(idx, item){
$(item).css('font-size', (idx+1)*10);
$(this).css('font-size', (idx+1)*10); // item = > this 로 변경해서 사용할수도있음
});
▷ 각 div 태그의 텍스트를 div100, div200, div300,div400으로 변경하고
각 div 태그의 border를 1,2,3,4px로 지정
$('div').each(function(idx, item) {
$(this).text('div' + ((idx+1)*100));
$(item).css('border',idx + 'px solid');
});
[3] 선택된 요소들 각각의 값을 모두 읽어올 때
var str = "";
$('p').each(function(idx,item){ // *
str += idx + "번째 p태그 값 : " + $(this).html()+"\n";
str += idx + "번째 p태그 값 : " + $(item).html()+"\n"; // this => item 변경해서사용가능
});* p선택하면 여러개인데 다 읽어오고싶으면 each 돌려라 => 모든 tag 사잇값을 가져올 수 있다
▷ 모든 span태그의 텍스트를 읽어와서 메세지창에 출력하기
var arr = "";
$('span').each(function(idx,item){
arr += $(this).text();
});
alert(arr);
'jquery' 카테고리의 다른 글
| [JQeury] Ajax (0) | 2022.06.20 |
|---|---|
| [jquery] 문제를 통한 jquery 이벤트 및 메서드 사용예제 (0) | 2022.05.07 |
| [jquery] 탐색메서드, 이벤트, 효과 (0) | 2022.05.07 |
| [jquery] 문서객체조작 / 요소추가 / 삭제,복사 / attr / css 관련 메서드 (0) | 2022.04.27 |