<jquery 연결방식 4가지>
1)jQuery 명시
2) $ 명시
3) jQuery 명시 + 생략 (다큐먼트부터 레디까지는 생략가능)
<선택자 종류>
1) 전체 선택자 : *
2) 태그 선택자 : <tag>
3) 아이디 선택자 : #
4) 클래스 선택자 : .
5) 자식선택자, 후손선택자 : >, (공백)
6) 속성 선택자 : [ ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01_JQuery_prac</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
// $가 보이면 제이쿼리
$(document).ready(function(){
$('#ol-connect').css('backgroundColor','gray');
});
</script>
<h3>$(document).ready()</h3>
<p id="p-ready">
페이지를 로드한 후 ready메소드 실행 = JavaScript의 window.onload()<br>
※ JS의 window.onload속성 vs Query의 $(document).ready() 차이 ※
자바스크립트의 window.onload속성은 여러 개 설정 시 마지막에 쓴 것으로 덮어써짐<br>
jQuery의 $(document).ready()는 여러 개 설정하면 모두 연달아 실행 <br>
</p>
<script>
// jquery 연결방식 4가지
// 1)jQuery 명시
jQuery(document).ready(function(){
$('#p-ready').css('border','2px dashed blue');
});
// 2) $ 명시
$(document).ready(function(){
$('#p-ready').css('color','red');
});
// 3) jQuery 명시 + 생략 (다큐먼트부터 레디까지는 생략가능)
jQuery(function(){
$('#p-ready').css('font-weight','bold');
});
// 4) $ + 생략
jQuery(function(){
$('#p-ready').css('font-family','궁서체');
});
</script>
<h2 >선택자와 메소드</h2>
<p>선택자를 지정하고 메소드를 통해 jQuery적용<br>
<br>선택자 종류<br>
1) 전체 선택자 : * <br>
2) 태그 선택자 : <tag> <br>
3) 아이디 선택자 : # <br>
4) 클래스 선택자 : . <br>
5) 자식선택자, 후손선택자 : >, (공백) <br>
6) 속성 선택자 : [ ] <br>
</p>
<div>
<ul>
<li>치킨</li>
<li>불고기 피자</li>
<li>치즈 피자</li>
<li>파인애플 피자</li>
<li>콤비네이션 피자</li>
</ul>
<h3>KH피자#</h3>
</div>
<label style="border: dashed;">이름 : </label><input type="text" id="name" name="name" class="order"><br>
<label>주문 비밀번호 : </label><input type="password" id="pwd" name="pwd" class="order important"><br>
<label>핸드폰번호 : </label>
<input type="number" name="number1">-<input type="number" name="number2">-<input type="number" name="number3"><br>
<label>주소 : </label>
<input type="text" id="addr" name="addr" class="order" size=80><br>
<label>치킨 주문 : </label>
<input type="text" id="chicken" class="order" list="chickenList">
<datalist id="chickenList">
<option value="original">후라이드 치킨</option>
<option value="source">양념 치킨</option>
<option value="half">후라이드 반 양념 반</option>
</datalist><br>
<label>피자주문 : </label>
<input type="checkbox" name="pizza">불고기 피자
<input type="checkbox" name="pizza">치즈 피자
<input type="checkbox" name="pizza">파인애플 피자
<input type="checkbox" name="pizza">콤비네이션 피자 <br>
<label>일회용품 : </label>
<input type="radio" name="product1" id="need" checked>필요함
<input type="radio" name="product1" id="noneed">필요하지 않음<br>
<label>파일 : </label><input type="file"><br>
<label>이미지 : </label><input type="image" src="../images/flower1.PNG" height="200px"><br>
<br>
<input type="button" value="클릭">
<input type="submit" value="제출">
<input type="reset" value="리셋"><br>
<input type="text" disabled><input type="button" value="비활성화" disabled>
<br><br>
<table>
<tr><th>이름</th><th>혈액형</th><th>고향</th></tr>
<tr><td>강건강</td><td>B형</td><td>광주</td></tr>
<tr><td><a>남나눔</a></td><td>AB형</td><td>담양</td></tr>
<tr><td><a href="#">도대담</a></td><td>A형</td><td>서울</td></tr>
<tr><td>류라라</td><td>B형</td><td>천안</td></tr>
<tr><td>문미미</td><td>O형</td><td>서울</td></tr>
<tr><td>박보배</td><td>A형</td><td>담양</td></tr>
<tr><td colspan="2">총원</td><td>6</td></tr>
</table>
<script>
$(function(){
// 선택자 종류
// 1) 전체 선택자 : *
// 2) 태그 선택자 : <tag>
// 3) 아이디 선택자 : #
// 4) 클래스 선택자 : .
// 5) 자식선택자, 후손선택자 : >, (공백)
// 6) 속성 선택자 : [ ]
// 1)전체선택자 : *
// $('*').css('color','white'); // 다 화이트로 바뀜
// css() : 스타일 적용 & 확인가능. 문서 객체의 스타일을 검사하거나 변경할 때 사용
// 스타일 검사? 의미?
console.log($('*').css('font')); // 16px "Malgun Gothic"
// 2) 태그 선택자 : <tag>
// 여러개 지정 가능. 쉼표로 잇기
// $('li').css('backgroundColor','#f05515');
// $(document).ready(function(){
// $('li').css('background','#ff0'); // $(document).ready() 적용
}).css('backgroundColor','blue');
jQuery(document).ready(function(){ // jQuery(document).ready() w적용
$('p').css('font','20px bold');
});
$('p,h3').css('font-size','20px');
jQuery(document).ready(function(){
$('td').css('font','30px bold','color','white');
})
// 3) 아이디 선택자 : #
// attr() : 문서 객체의 특정 속성값을 알아내거나 추가할 때 사용
// css처럼 어떤 값을 지정할 수 있지만 속성 이름만 가지고 불러올 수 있는 것처럼
// 얘도 지정할 수 있지만 불러올 수도 있음
console.log($('#name').attr('placeholder'));// 아이디를 지정하세요 // 어떤값들이 있는가 조회 한 것
console.log($('#name').attr('id')); // name -> id 속성의 밸류값을 알려줌 : id="name"
console.log($('#name').attr('type')); // text -> type속성의 밸류값을 알려줌 : type="text"
console.log($('#name').attr('size')); // undefined 없는속성가져오면뜸 // undefined : 없는 속성인데 호출하면 undefined 뜸
$('input:checkbox').prop('checked', true);
$('#name').attr('size',50); // size 추가
$('#name').attr('style','display inline-block'); // size 추가
$('#name').attr('width','500'); // size 추가
$('#name').attr('onclick'); // input태그가 아니라 안먹힘
$('#name').attr('style','border dashed'); // worked
$('#name').removeAttr('width');
// //.removeAttr() : 속성 삭제
$('#name').removeAttr('size'); // size 삭제
// 4) 클래스 선택자 : .
$('.order').css('color','green');
$('.order').css('border','5px groove');
$('.order.important').css('background','rgba(0,0,255,0.1)'); // class="order important" 한줄에만 적용 // class 두개 선언됨
$('.order').css('background','rgba(0,0,255,0.9)'); // class="order"와 class="order important" 포함하여 둘 다 적용
$('.order.important').css('background','tomato'); // 윗줄에서 order들어간 클래스 전부 파란색으로 바뀌었다가 class="order important"줄만 토마토색으로 다시 overwrite
// 5) 자식선택자, 후손선택자 : >, (공백)
$('div>h3').css('border','dashed'); // div(미포함) 아래 h3인 KH피자에 적용
$('div h3').css('border','dashed 5px'); // div(미포함) 아래 h3인 KH피자에 적용
$('div ul').css('border','dashed 5px'); // div(미포함) 아래 h3와 ul(포함) 아래 li까지 적용
$('div li').css('background','tomato'); // div(미포함) 아래 h3와 ul(포함) 아래 li까지 적용
$('div>h3').css('color', 'brown');
$('div li').css('color', 'orange'); // js와 동일
// 6) 속성 선택자 : [ ]
$('input[size]').css('background','yellowgreen');
$('input[type=number]').attr('placeholder','번호 필수 입력');
$('input[class~=important]').val('12345'); // ~= : important 포함해야하는데 구분자가 존재하기에 띄어쓰기로 구분했을 때 임포턴트가 들어가 있어도 조건에 부합
// val() : value에 값을 설정하거나 value 값을 확인할 때 사용 (= js의 value랑 동일)
console.log($('input[class~=important]').val());
// *= : 특정값을 포함하는 것에 조건 적용
// ^= : 특정값으로 시작하는 것에 조건 적용
// $= : 특정값으로 끝나는 것에 조건 적용
$('input[name*=d]').css('background','pink'); // 특정값을 포함하고있는거 다 , d라는게 안에 들어가있는
$('input[name^=n]').css('background','skyblue'); // n으로 시작하는것
$('input[name^=der]').css('background','rgba(0,100,0,0.1)'); // der로 끝나는것
$('input:text').css('background', 'white'); // 'input:text' input type이 text인것
$('input:password').css('background', 'gold'); // 'input:password' input type이 password인것
$('input:checkbox').prop('checked', true); // 'input:checkbox'
// prop() : 속성값의 여부를 true/ false로 설정하거나 알아냄
});
</script>
